Templating tutorial

Wed, 2012-01-18 19:47
green_meep
Administrator
green_meep's picture

AFAIK, there isn't a proper templating tutorial available. I know I would have loved one when I first started templating, and I realize that not everybody has the same relatively coding-heavy background as I've had. This makes it even harder for them to pick up MSE coding.

I'd like to dedicate this thread/post to creating a functional tutorial for how to make one's own template. My ultimate goal is for it to be ported over to the currently blank "Templating Tutorial" section under Documentation.



Alright, let's start this off with an introduction. My name is Green_meep, and I made my first template a little less than three years ago, in 2009. It was very basic - probably even more basic than the template we're about to create today. Since then, I've received programming help from people on the forums, in addition to taking some programming classes. I've spent quite a bit of time poring over the documentation on this very website, but the reason I'm writing this tutorial is because it's very hard to find something if you don't know first what you're looking for.

Some things you'll need:

    Magic set editor 2.0
    A text editor. Wordpad will work fine, but I know some people who swear by Notepad++. I'm going to be using Wordpad because it's a lot simpler and comes bundled with Windows.
    Time. Coding, while relatively straightforward in theory, takes quite a bit of time.
    Patience. Directly related to time.
    An image manipulation tool like GIMP, PhotoShop, or paint.net. We won't be needing one in this tutorial, because the images are provided here.

'k, got everything? For this tutorial, we're going to be making a template that is a spin on the classic 4 suite deck.

NOTE: The user kjoppy found it beneficial while using this tutorial to download the actual template files located at the bottom of this guide and read through them while he read the guide. If you're having trouble visualizing what the guide wants you to do, perhaps you could do the same.

Setup
Make a file with the name "game", no extension, and UTF-8 character encoding. This is VERY IMPORTANT. MSE will probably not recognize files that do not have these characteristics.

Make a folder with the extension .mse-game. You can name it whatever you want. Put the game file inside the .mse-game

Do the same for folders "style" and "symbol-font". Note that while the symbol-font folder is not required for operation of the template, it's a good idea to learn how to make one.

The folders that you created besides the .mse-game folder should be called whatever you called the game folder, plus something differentiating it from the .mse-game folder. For example, MtG has magic.mse-game, then the style is called magic-new.mse-style. My folders are called four-suite.mse-game, four-suite-style.mse-style, and four-suite-symbols.mse-symbol-font. They should all be in the same location (C:/users/Green_meep/My Documents/Four Suite/) or something similar, and have a file with no extension in each of them corresponding to the folder's extension (i.e. game in the .mse-game folder, style in the .mse-style folder, and so on).

Optional
If you want to check on your progress at all, copy these folders to the data directory of the MSE containing folder (which is generally located in C:\Program Files). The reason why copying the folders is not required until at the end of the tutorial is because in newer versions of Windows, copying files to anywhere higher than a user directory could cause authorization issues and other sorts of nastiness which I'd prefer to go through only once.

Open up the game file and put the following fields in (in the format: field name, colon, space, parameter):
    mse version (this is the version of MSE you're using. Put 2.0.0.)
    short name (when you create a new set, the larger, shorter string under the icon is the short name. Put whatever you want.)
    long name (this is the other text under the icon. Put whatever you want.)
    icon (this is literally the icon of the game. Most templates use the back of the card. Since this game doesn't have a back, you can put a random image here or leave it blank. Note that the icon is not scaled down to fit in the box, so you have to assign values in your drawing program manually.)
    position hint (this is the location of your game in the list. A lower value means it's closer to the left. Infinity means that it will not show up.)
    installer group (this is where your files will be placed inside the installer. They're always placed in the same MSE directory, though.)
Fill out the same fields for your style file. Some differences are:
    The icon is generally a blank card.
    The position hint is for the lower bar. Thus (in theory) you could put a low number like 1 or 2 here.
    depends on (this is a list of dependencies. Put "package: " indented under it. The package is what the folders that contain your game and symbol-font files are called.)
    game (this is the exact name of your game.)
You should have something like this so far:
game
mse version: 2.0.0
short name: 4 Suite
full name: Now with more graphics!
icon: icon.png
position: 444


style
mse version: 2.0.0
game: four-suite
short name: Original
full name: The only style file.
icon: icon.png
position hint: 1
installer group: four-suite/style

depends on:
	package: four-suite.mse-game
	package: four-suite-symbols.mse-symbol-font


You might have noticed that the icon field has "icon.png" in it. In any field that requires an image, all that is required is the name and extension of the image (I know that MSE will accept either a .png or .jpg file. Haven't messed around with other picture formats). Make sure it is in the same folder as the file that actually requires it.
Now do the same thing for the symbol-font file (only the mse-version is actually used.)
symbol-font
mse version: 2.0.0
installer group: four-suite/symbol-font


Tip
The reason we have not included version: 0.0.0 is because it is version 0.0.0. MSE automatically assumes that the version is 0.0.0, but it will output a warning message when we get into the actual template. Since we won't be worrying about updating and re-distributions and so forth, there is no reason to put it in. HOWEVER, if you are making a template that you plan on updating as a game updates, such as M:tg, it's usually a good idea to put it in. If you are doing this, then make sure to append the version number into the dependency list:
depends on:
	package four-suite.mse-game 0.0.0
	package four-suite-symbols.symbol-font 0.0.0


Tip
Make sure you have each field filled out. If your files read icon: icon.png, make sure you have an icon.png in that folder.

Finally, fill out the following fields so that your style file looks like mine:
Spoiler:
mse version: 2.0.0
game: four-suite
short name: Original
full name: The only style file.
icon: icon.png
position hint: 1
installer group: four-suite/style

depends on:
	package: four-suite.mse-game
	package: four-suite-symbols.symbol-font

card width: 298
card height: 402
card dpi: 120
card background: rgb(200,200,200)


Your card specs must match mine or else the card will not fit properly in the screen. In addition, certain images I provide you with will be the same size. In the future, simply set these to a decent amount (usually the size of the border image). I set the background color to rgb(200,200,200), which is a light gray, because the card's background will be close to white.

Description and Background
Alright, so we have everything set up. If you didn't click on the links that I added in the previous section, I'm going to explain them quickly here. The game file dictates what sort of elements are going to be in the template, while the style file dictates how each element is going to look. The symbol-font file dictates how the special symbols intermingled with regular text is going to look.

Let's start with the background of the card. In your game file, add card field:, enter, tab. Then add type: color. This tells MSE that you have a new card field of type color. Any field of type color is basically just a box filled with a certain color. Then add name: bg_color. This tells MSE that your field is going to be called "bg_color". You will use this name to refer to the box if you need to later. Add show statistics: false. This tells MSE that you do not want the statistics for this field to be shown in the statistics tab. Finally add editable: false. We don't want the user to be able to edit this field.

Wait a second, though. This just gives us a big black box. Let's add default: rgb(255,250,250). This tells MSE that you want the unedited value of the color to be rgb(255,250,250), which is a barely off-white color. Alright, now it's just an off-white box.

This is where the style file comes in. Type card style:, which tells MSE that what follows is going to be part of the card styling. Note that each field in here will be indented at least once. Enter, tab. Here goes the name of the field you want the following information to apply to. In this case, it would be "bg_color". Enter, tab, tab. We can position the box with:

top: 0
left: 0
This means that the box will begin at the top left corner of your card (which is exactly what we want it to. Now, set the height and width:
height: 402 
width: 298
These values are exactly the same as the card's values, because we want it to take up the entire space available.
Tip
Alternatively, you could use the right and bottom values to set the width and height. I don't use them personally because I find them more difficult to use when rotating images (we'll get to that later) and when I need to adjust the top and left values (which is often).

Okay, nice change of color, but it's still a box. In the style file, we are allowed to define a transparency mask for the field. A black value in a pixel means that that pixel will be completely transparent. A white value means it is completely opaque. Varying shades of gray will show different transparencies. We'll just use a simple white-black mask with some anti-aliasing (this is why something like paint will not do; we want the outlines to look smooth): mask: bg_color_mask.png.
Tip
A word on the common .jpg, .png, and .gif file formats. For something like a mask, .jpg files are fine. However, in a more detailed background, like those on M:tg cards, you're going to need to use .png or .gif, because saving as a .jpg forces lossy compression, destroying quality. If you need something with transparency, you can only save the file in .png, because neither of the other formats support true transparency. I will always save images .png, but you may use another format if you feel you know what you're doing.


Name and Other Text
We've gotten the background all nice and set up, but playing cards aren't complete without numbers and suites! I'm going to use the BoArust font, but you can obviously use anything you like. Let's make a text (type text) box called "ranking" with a top value of 22, a left value of 26, a height of 30, and a width of 26. Do you remember how?
Answer
game
card field:
	type: text
	name: ranking


style
	ranking:
		top: 22
		left: 26
		height: 30
		width: 26



Let's set the font styling, while we're still in the style file. Add font:, enter, tab, tab, tab. Add the name: BoArust, size: 28, and color: rgb(0,0,0) in the same way.

Go back to the game file. Under "name", we're going to put description: This field is for the number or ranking of the card. so that the user knows what this field does. He will see it in the bottom left corner when he hovers over the field.

Now this field works, but the user can input ANYTHING he wants - which we don't want. The solution? To add some script. Let's make a new file named "script" within the .mse-game folder. In the game file, add under the "installer group" init script: include file: script. This tells MSE that it needs to search for a separate file called "script" within the same folder as your game file. When it finds it, it should treat everything inside it as script.

Inside the script file, let's declare a function called ranking_filter with ranking_filter := {}. Fill it out like so:

ranking_filter
ranking_filter := {
	input := to_upper(input)
	input := sort_text(input, order: "[A1234567890]JQK")
	if input == "1" then input := "A" else input
	if input == "A0" then input := "10" else input	
	if input == "" then input
	else if input == "10" or input == "A" then input := substring(input, end:2)
	else input := substring(input, end:1)
}


The lines, in order, represent:
Explanations
    Converts the string to uppercase.
    Prevents the user from entering anything besides numbers and face card values.
    Converts 1 to A.
    The function substring() returns "TRUE" if the value passed is blank. This is to compensate.
    Compensates to allow "10" to be written.
    Limits the rest of the inputs to 1 character.


I'm not going to go too in-depth with coding, because this is a guide meant for beginners. All I'm going to say is that functions are essentially isolated blocks of code that can take values, which are "passed" in a function call. You'll have to look at the functions documentation page that I linked earlier if you want to learn more.

Only "10" will be aligned properly in the box. Add alignment: under width. Then add "center". It's just like centering some text in Word.

The card number is present both in the top left hand corner and in the bottom right hand corner (which is mirrored). We're going to make another field with the same size values as the original ranking field, called ranking_mirror. The angle: property set to 180 flips it over. Fill out the rest of the values like so:

ranking_mirror
ranking_mirror:
		top: 380
		left: 272
		height: 30
		width: 26
		angle: 180
		font:
			name: BoArust
			size: 28
			color: rgb(0,0,0)

Go back to the game file and put editable: false and save value: false. The first one prevents the user from editing the value (as one would expect), and the second one lowers the set output file size. Add default: "{ card.ranking }". This links the two values together.

Make a text box:

name
game:
card field:
	type: text
	name: name
	description: The name of the card.
	script: to_title(value)

style:
	name:
		top: 22
		left: 68
		height: 24
		width: 160
		alignment: left bottom overflow-shrink
		font:
			name: BoArust
			size: 20
			color: rgb(0,0,0)


The alignment here means that MSE should shrink any text a field contains down so that it fits.

Now mirror it:

name_mirror
game:
card field:
	type: text
	name: name_mirror
	editable: false
	save value: false
	default: "{ card.name }"
	show statistics: false

style:
	name_mirror:
		top: 380
		left: 230
		height: 24
		width: 160
		alignment: left bottom overflow-shrink
		angle: 180
		font:
			name: BoArust
			size: 20
			color: rgb(0,0,0)




Icons and Images
Each card has a relatively obvious display its suite under its number. There's an attribute to do this, with - you guessed it - type. We're going to set it to "choice" because we want the user to be able to change which suite the card is of. Let's call it "suite", with the description "The suite of the card." Now we're going to add choice attributes in the same way you did the other attributes.

We'll make one for each suite, leaving them lowercase because MSE auto-capitalizes the first letter of choices: club, diamond, heart, and spade. This form of notation is a shorthand that works for right now (you can learn more about it at the above linked page). Your game file should look like this:

game
card field:
	type: choice
	name: suite
	description: The suite of the card.
	choice: club
	choice: diamond
	choice: heart
	choice: spade


Let's give it a top and left position of 60 and 22, respectively. We're going to add the attribute render style: image to tell MSE that the choice field should be rendered as an image (normally it renders text). Then define an choice images: attribute so that your list looks like this:
style
	suite:
		top: 60
		left: 22
		height: 34
		width: 34
		render style: image
		choice images:
			club: club.png
			diamond: diamond.png
			heart: heart.png
			spade: spade.png


The list or, officially, map tells MSE which image you want it to render when a certain option is selected.

Mirror it:

suite_mirror
game
card field:
	type: choice
	name: suite_mirror
	editable: false
	save value: false
	default: "{ card.suite }"
	show statistics: false
	choice: club
	choice: diamond
	choice: heart
	choice: spade


style
	suite_mirror:
		top: 342
		left: 276
		height: 34
		width: 34
		angle: 180
		render style: image
		choice images:
			club: club.png
			diamond: diamond.png
			heart: heart.png
			spade: spade.png



With choice-style programming in mind, let's make another choice field for purely aesthetic reasons:
flourish
game
card field:
	type: choice
	name: flourish
	choice: black
	choice: red


style
	flourish:
		top: 124
		left: 12
		height: 145
		width: 48
		render style: image
		choice images:
			black: black_flourish.png
			red: red_flourish.png



Alright, looking good! Now it's time for the image field called "image" that can be used on face cards. We're going to use type: image. Give it top and left values of 57 and 68, and height and width values of 292 and 179. Set the default (in the style file this time) to "image_bg.png". Note that this image is simply a 2x2 square of rgb(255,200,200), and helps the default image blend in better to the background. Add the description "The card's image".
image
game
card field:
	type: image
	name: image
	description: The card's image.


style
	image:
		top: 57
		left: 58
		height: 292
		width: 179
		default: image_bg.png



Here's where we should be so far:


Text Box and Finishing Some Leftover Script
Let's make a quick text box. In the game file, add the attribute multi line: true. This tells MSE that the user will be able to enter multiple lines of text. It will have the description "Some additional text." and the name "text".
game
card field:
	type: text
	name: text
	multi line: true
	description: Some additional text.


Here's the styling:
style
	text:
		top: 211
		left: 58
		height: 138
		width: 179
		font:
			name: BoArust
			size: 14
			color: rgb(0,0,0)


Wouldn't it be easier for the user if things like the flourish changed color as you switched suites? A simple if statement will fix this:
default: "{ if card.suite == "club" or card.suite == "spade" then "black" else "red" }"

Set editable: to false, as the user will no longer have a need to exclusively edit this field.
Tip
A little note on if statements. They are both the easiest and most commonplace functions in MSE, because of their ability to allow the computer to "think" for itself. Their syntax is as follows: if then a statement that evaluates to a boolean (true/false) value, then then the statement you want the if statement to evaluate to. Slightly more complex is the use of logic gates such as and or or. An "and" requires both boolean statements to be true for the if statement to be true, while an "or" only requires one of the two. There are a couple more, such as "xor", but those two are the most common.

Declare a new function in your script file:

text_color := {	if card.suite == "spade" or card.suite == "club" then rgb(0,0,0) else rgb(200,0,0) }

And put { text_color() } in the color attributes of the name, ranking, and their mirrors:

style
#stuff
	ranking:
		top: 22
		left: 26
		height: 30
		width: 26
		alignment: center
		font:
			name: BoArust
			size: 28
			color: { text_color() }

	ranking_mirror:
		top: 380
		left: 272
		height: 30
		width: 26
		angle: 180
		font:
			name: BoArust
			size: 28
			color: { text_color() }

	name:
		top: 22
		left: 68
		height: 24
		width: 160
		alignment: left bottom overflow-shrink
		font:
			name: BoArust
			size: 20
			color: { text_color() }

	name_mirror:
		top: 380
		left: 230
		height: 24
		width: 160
		alignment: left bottom overflow-shrink
		angle: 180
		font:
			name: BoArust
			size: 20
			color: { text_color() }
#stuff

Let's make an image box from a choice field with only one value (default) and editable false. It will only evaluate to true if text != "". Put the code for it right before the "text" field in both files and call it "text_box".

style
	text_box:
		top: 211
		left: 58
		height: 138
		width: 179
		visible: { if card.text != "" then true else false }
		render style: image
		choice images:
			default: text_bg.png

Now for my final (and completely optional) bit of scripting magic (this will be placed in the style and game files as per the following code; the script file has nothing to do with anything here). I'm going to give the user the option to split an image in half and mirror it (to mimic some of the face cards). I'm not going to explain how to do it, but here are the relevant bits of code:

style
styling field:
	type: boolean
	name: is_face
	description: Should this card be treated as a face card?
	initial: no

	image_mirror:
		top: 349
		left: 237
		height: 292
		width: 179
		angle: 180
		mask: { if styling.is_face then "face_mask.png" else "no_mask.png" }
		visible: { styling.is_face }
		default: { card.image }

	image:
		top: 57
		left: 58
		height: 292
		width: 179
		mask: { if styling.is_face then "face_mask.png" else "no_mask.png" }
		default: image_bg.png


game
card field:
	type: image
	name: image
	description: The card's image.

card field:
	type: image
	name: image_mirror
	editable: false
	save value: false



Symbol Font Declarations
The reason I saved the Symbol Font for after the rest of the files and coding is because it's largely different in terms of creation. There isn't a simple map from field type declaration to the styling of the field. In fact, it's more like declaring your own font (as the name suggests), with adding horizontal spacing and the corresponding icons and so forth.

Let's begin in your symbol-font file. It should be set up similarly to your other files already. Now put image font size: 125 under it.

Now we'll declare each member of the list with symbol:, which should be hanging indented one indent, similarly to the game file. Its attributes include code: (which letter corresponds to it), and image: (which image should be displayed when the code is fulfilled). There are also attributes concerning text drawing (think M:tg's colorless costs; more on this later).

I'm just going to use the first letter of the suite and the name of the image:

symbol-font
symbol:
	code: s
	image: spade.png


Now do this for all the images. Now copy and paste all the symbol: fields you've filled out. We're going to add a regex expression, so we need to tell MSE that the code attribute will contain one: regex: true. Next, we'll tell it that we want text drawn as well: draw text: true. MSE will figure out how to draw the text based on the text font: attribute, which is where the name of the font we're using goes:
symbol-font
symbol:
	code: s
	image: spade.png
	regex: true
	draw text: 1
	text font: 
		name: BoArust
		color: (255,255,255)
		size: 0.9


Tip
To you with a little programming background who are wondering why the draw text field isn't just "true", MSE uses a funky non-boolean variable here. Similarly to how we usually pass -1 when a function doesn't execute properly, MSE sees -1 as false and 1 as true.

Tip
If you're wondering how I got the numbers for size, I can't really say that I've found a universal method, yet. However, the size for the drawn text should be a very small number, roughly around 1. Tweak the image font size: field and the symbol font fields until it looks right.

Finally, after each piece of code, we're going to add ([AJQK0123456789][0123 ]), to tell MSE that it is going to look for certain characters after the suite:

symbol-font
symbol:
	code: s([AJQK0123456789][0123 ])
	image: spade.png
	regex: true
	draw text: 1
	text font: 
		name: BoArust
		color: rgb(255,255,255)
		size: 0.9


That's how one of your entries should look.

Go back to the style file and find the styling for the field you want to be symbol-font enabled. I'm going to use the text: field, because that's where we want the user to be allowed to put symbols into. Put symbol font: under the font: attribute. Define it the same way, but leave out the color definition, because it was already defined in your symbol-font file.

This style file piece should look like:

style
	text:
		top: 211
		left: 58
		height: 138
		width: 179
		alignment: left
		font:
			name: BoArust
			size: 14
			color: rgb(0,0,0)
		symbol font:
			name: four-suite-symbols
			size: 11


If you wanted to allow the user to put them in some other text field, add the same lines (symbol font: and the lines hanging under it) to that field's style.

Now that we have all this, I'm going to finish up the template with a little script. Tweak your text field so it looks like mine:

game
card field:
	type: text
	name: text
	multi line: true
	description: Some additional text.
	script: tag_contents(tag: "<sym>", contents: text_filter, input: value)


And then insert the following into your script file:
script
text_filter := {
	substring(input, begin:0, end:2)
	input := input + " "
	input := replace(match: "  ", replace: " ")

	if input[2] != " " then input := replace(match: " ", replace: "")
	else input

	if input[1] == " " then input := "<nosym>" + input + "</nosym>"
	suiteholder := input[0]
	if input[1] + input[2] == "11" then input := suiteholder + "J "
	else if input[1] + input[2] == "12" then input := suiteholder + "Q "
	else if input[1] + input[2] == "13" then input := suiteholder + "K "
	else if input[1] == "1" then input := suiteholder + "A "
	else input
}


Take your three folders (.mse-game, .mse-style and .mse-symbol-font), and then copy-paste them into wherever your MSE's data folder is. If you followed the regular installation, it should be in something like: C:/Program Files/Magic Set Editor/data.

You're done!


Example of what our template will look like when finished:
Spoiler:


Download link.
EDIT: Pifro seems to be down, so if the above link does not work, try this one.

Addendum on Card Lists
I did not cover card list headers in the making of 4 Suite because they're not a usual part of my design process. However, it's usually a good idea to include them for the less experienced MSE users who don't know how to add new headers. Card lists are simply attributes of a field, and all of them are prefixed with card list.

    Column is treated as an array (starting at 0). Modify it to change the position of that field in the headers. If it isn't declared, MSE will render your headers with the same order as in your game file.
    Width is literally how wide your headers are. If it isn't declared, MSE will assign a value for you.
    Visible is a boolean value that tells whether a field is actually present in the header list. It is false by default.
    Allow is a boolean value that tells whether the user is allowed to add the header in the header list. It is true by default.
    Name is the label that the header will have. If it isn't declared, MSE renders the name of the field instead.
    Alignment is how the label is aligned on the button. It's just like any other alignment, and so can accept things like "top left", "middle center", etc.

Here's an example:

card field:
	type: text
	name: name
	description: The name of the card.
	script: to_title(value)
	card list visible: true
	card list width: 100
	card list alignment: center

Fri, 2012-02-03 19:22
opqopq

As an addition to this quite complete tutorial, you can also use MSE Designer tool to generate the templates for you: http://magicseteditor.sourceforge.net/node/5463

--opq

Sat, 2012-04-07 01:05
taj1994
taj1994's picture

green_meep wrote:
A text editor. Wordpad will work fine, but I know some people who swear by Notepad++.

gedit is also good

"The greatest harm can result from the best intentions" - Wizard's 2nd Rule
"Mind what people do, not only what they say, for deeds will betray a lie" - Wizard's 5th Rule
"Life is the future, not the past" - Wizard's 7th Rule

Sat, 2012-04-07 06:19
green_meep
Administrator
green_meep's picture

This tutorial was directed more at Windows users, but yes, gedit is a good text editor.

Sat, 2012-04-07 06:37
taj1994
taj1994's picture

gedit is also available for windows. I use it instead of Notepad, ever since I started trying to learn C++ last fall

"The greatest harm can result from the best intentions" - Wizard's 2nd Rule
"Mind what people do, not only what they say, for deeds will betray a lie" - Wizard's 5th Rule
"Life is the future, not the past" - Wizard's 7th Rule

Sat, 2012-04-07 15:13
hooliganj
hooliganj's picture

You can use any text editor that doesn't add tags to the text file. Notepad is free and comes with every copy of Windows, so it's the most common recommendation.

De Chelonian Mobile.
My Shadowfist sets.
The Usagi Yojimbo CCG.

Tue, 2012-04-17 19:01
green_meep
Administrator
green_meep's picture

I've updated the tutorial with some things that I've seen in the Template Development forum, as well as linking to the list of text editors on wikipedia.

Some things I added are Card Lists and a warning to name the .mse-game and .mse-style folders differently.

Wed, 2012-06-20 20:14
michaeltaylor

My computer keeps deleting this as a virus every time I download it. A sad &#039;frowny&#039;

Wed, 2012-06-20 20:31
green_meep
Administrator
green_meep's picture

Doesn't your computer delete everything as a virus? Geez. Would it help you if I posted a non-.zip version?

Thu, 2012-06-21 14:58
michaeltaylor

Nope, it just deletes the designer.exe! ( I was replying to this: "As an addition to this quite complete tutorial, you can also use MSE Designer tool to generate the templates for you").

Fri, 2012-07-27 16:52
kjoppy
kjoppy's picture

green_meep,

This looks really useful, but I'm having a really hard time following the formatting of the text files. Instead of "Enter, tab, tab" instructions could you maybe upload or copy paste skeleton files so people can see how things are supposed to be formatted? Even looking at the pre-existing style files for other games I haven't figured this out yet. A picture's worth a thousand words ^^

Sat, 2012-07-28 02:34
green_meep
Administrator
green_meep's picture

I'm pretty sure I have posted skeleton files. In addition, the entire template is available for download - perhaps you could look at them there?

Sat, 2012-07-28 18:33
kjoppy
kjoppy's picture

Thanks. I downloaded the template and have been studying it. Going through this tutorial with the downloaded tempate files side by side has really helped me understand how MSE works. I'm very hopeful that I'll be able to do what I want now. Thanks for a great tutorial.

By the way, there are some errors and unclear bits in the tutorial. However, if you have the completed template at your side while you read it everything makes much more sense. I recommend notepad++ so that you can see two files at once, ie. game and style.

Cheers,
kjoppy

Sat, 2012-07-28 18:21
green_meep
Administrator
green_meep's picture

Thanks for the tip! I've replied to your logic flow question in the scripting thread and added a note concerning this tip at the top of the guide.

Sat, 2012-07-28 18:34
kjoppy
kjoppy's picture

Lol. I just edited my post because I wanted to say something but didn't want to double post. Anyway, the tutorial is fantastic. Thank you.

Wed, 2012-08-01 01:58
CCGNick
CCGNick's picture

Hey, I've been working on my own template, following the tutorial, and everything is great, except for one thing: Cards are not appearing to the right, where it shows all cards in the set. I've been working on a template for a game of my own, and I'm wondering if I need to do anything in particular?

Edit: Also, is there any way to modify the kerning/leading on fonts? I'm using one that has way too much space between lines, and would like to fix that.

Wed, 2012-08-01 02:17
K1L1
K1L1's picture

The card list visibility is set to false by default, so all aspects of the cards are going to be hidden. You need to go into the card_field of the aspect you want to appear and put:

card list visible: true

Current Projects
Secret Project 1 - Creating base set...
Secret Project 2 - Skeleton complete!

Wed, 2012-08-01 02:31
CCGNick
CCGNick's picture

That doesn't seem to fix it... I'm noticing now that new cards aren't even adding a new entry in the list on the right, there's just one thing there that you can select.

Edit: I'm also getting a warning saying that I'm not listing dependencies properly, despite having the dependency listed that it's warning me about, if that is relevant.

Wed, 2012-08-01 02:39
K1L1
K1L1's picture

Ah. I also am working on a template. Just started yesterday, so all of this is fresh in my mind. Had that problem last night.

Instead of doing what green_meep did, I just did it the old-fashioned way:

depends on: *game*.mse-game
depends on: *game*-symbols.mse-symbol-font

That seemed to fix it.

Current Projects
Secret Project 1 - Creating base set...
Secret Project 2 - Skeleton complete!

Wed, 2012-08-01 03:04
CCGNick
CCGNick's picture

That fixed the warning I was getting, thanks! Hopefully I can figure out the card issue soon.

Wed, 2012-08-01 03:08
Pichoro
Pichoro's picture

CCGNick - That's because the version without the card list columns is already saved in your config file for MSE. You'll have to get rid of it somehow to see your new card list column setup. The config file should be located at something like "C:\Users\~Your PC Username~\AppData\Roaming\Magic Set Editor" in a file called "mse8.config". You can delete the file, or open it and edit out your template's information. If you delete the whole file, you delete your saved settings for ALL templates. Don't confuse that with saved sets or styling choices made in building a set, those will be fine. But at least all of the following will be gone: display information, language settings, card list column settings, and automatic text replacements you've changed or created.

The config file is plain text UTF-8 format just like all MSE system files.

What do did you have for dependencies currently before following K1L1's advice? If you show me, in code tags, I can help you.

Wed, 2012-08-01 03:24
CCGNick
CCGNick's picture

I had:

depends on:
	package: exploration.mse-game 0.0.0
	package: exploration-symbol.mse-symbol-font

I changed it to what K1L1 said, and it seems to work fine now, but there you have it.

Edit: Getting rid of my set info in the config file fixed the issue, thanks!

Wed, 2012-08-01 03:24
Pichoro
Pichoro's picture

I usually do mine more like this:

depends on:
	package: exploration.mse-game
	version: 0.0.0
depends on:
	package: exploration-symbol.mse-symbol-font
	version: 0.0.0

Wed, 2012-08-01 03:25
CCGNick
CCGNick's picture

Ah, alright. I must have misunderstood the tutorial, or there might be a typo? In any case, it all works now, thank you! No dice on messing with font kerning and leading, then?

Wed, 2012-08-01 03:26
Pichoro
Pichoro's picture

MSE can't control kerning or leading on fonts, sorry.

Wed, 2012-08-01 03:56
CCGNick
CCGNick's picture

It's fine. I can go through some extra hoops and make a new font based off the old one, it just would have been more convenient to have it done automatically.

Wed, 2012-08-01 15:28
green_meep
Administrator
green_meep's picture

Both packages require a version number. Sorry if that wasn't clear.

depends on:
	package: exploration.mse-game 0.0.0
	package: exploration-symbol.mse-symbol-font 0.0.0

Should work, but Pichoro's way is better if you want to add additional options to your dependencies.

Wed, 2012-08-01 15:42
Pichoro
Pichoro's picture

I don't know what it is, but something about trying to compact the dependencies down like that tweaks my OCD - I like them "fully expanded", which is why I do them the way I do.

Wed, 2012-08-01 16:10
hooliganj
hooliganj's picture

I use

depends on: *game*.mse-game 0.0.0
depends on: *game*-symbols.mse-symbol-font 0.0.0
since it covers all the required information, and feels the closest to a traditional #include. YMMV.

De Chelonian Mobile.
My Shadowfist sets.
The Usagi Yojimbo CCG.

Fri, 2012-12-21 23:19
sommbsnph

I could use some, help, this tutorial is too intimidating and confusing to me.

http://magicseteditor.sourceforge.net/user/18672
Check the set hub with the link above!

Sat, 2012-12-22 00:07
green_meep
Administrator
green_meep's picture

I can't help you if you don't know what you need help with.

Sat, 2012-12-22 04:52
taj1994
taj1994's picture

sommbsnph wrote:
I could use some, help, this tutorial is too intimidating and confusing to me.

Like green_meep said, it might help if you actually say what you need help with.... "Please help" doesn't help anyone unless you also say what your problem is...

"The greatest harm can result from the best intentions" - Wizard's 2nd Rule
"Mind what people do, not only what they say, for deeds will betray a lie" - Wizard's 5th Rule
"Life is the future, not the past" - Wizard's 7th Rule

Wed, 2013-01-02 16:40
michaeltaylor

Nope, that doesn't work either, I've tried it.

How about - is there someone ELSE that can write a step-by-step tutorial that actually works?

Wed, 2013-01-02 19:00
Anuttymous
Anuttymous's picture

michaeltaylor, this is probably the most concise guide you're going to find, anywhere, and though it is very difficult and has room for many errors, most everyone has had no problem, in the end. If you're having trouble, try asking for help on whatever's gone awry.

Anuttymous the Gathering
Anonymous + nutty = A-nutty-mous (no mice involved)
Ask me if you need any help

Thu, 2013-01-03 18:45
michaeltaylor

I've sent pages and pages of notes on where it's wrong, vague, unclear and doesn't work and they've been completely ignored.

Well, I'm sure you believe that everyone has had no problem, but since I keep seeing postings like the about saying that it doesn't work for them and since it didn't work for me either, I'm going to have to use my own personal experience as a guide.

After all, how do you know that the "everyone" that you're talking about aren't only a "few" that didn't have problems and that a lot MORE people tried it and gave up in frustration. I've tried it several times and so I'd guess that's more likely.

And I have BEEN asking for help on whatever's gone awry. What's gone awry is getting started and getting a card set built.

There's not ONE question, there are a thousand. All of which could be answered by a tutorial that started at the beginning and went to the end with a new set of card templates.

Believe me, I'd be glad to do it myself, but I haven't been able to get a set of cards built yet.

Thu, 2013-01-03 20:15
green_meep
Administrator
green_meep's picture

I admit that I should be more active in revising the tutorial, but I've been rather busy with uni and getting my own game off the ground.

As to the current state of it, I realize that it's not useable for you. Probably the best thing to do is to look at other game files, see how they're structured, etc. If you have any specific questions while doing this, they will be significantly easier to assist you with.

Thu, 2013-01-03 21:41
kjoppy
kjoppy's picture

michaeltaylor and everyone having trouble with this,

At the bottom of the original post is a link to the complete 4-suite template. Download it, and read the source code. If you have the source in front of you while you look at the tutorial steps everything will be much easier to understand. While it's true that the tutorial could be clarified, no amount of improvement in the text can substitute for having an example of the source code in front of you.

Imagine you wanted to learn to paint a horse. No matter how detailed, text instructions would never get you very far, at least not in reasonable amounts of time. If you put up a canvas with a good, simple painting of a horse next to your blank canvas, you'd be in great shape. This is what you need to do now and in many coding endeavors.

I had trouble with this tutorial too until I downloaded the template and read the source while going through the tutorial.

Also, michaeltaylor, I have to say that if you don't have one question it's probably a good idea to back up and try to get something more basic than whatever you're doing to work. In general, folks in the programming community don't respond well to general cries for help because it indicates that you haven't actually made a genuine effort to figure something out on your own first. If you really dig in, get stuck, and isolate what's not working then most of the time you'll solve your own problem, and the rest of the time you'll come up with a good question to ask.

Finally, green_meep, it's true that the tutorial needs work. Could you please please pretty please post it to the wiki so that other people can improve it as they find errors and places where clarification is needed?

Thu, 2013-01-03 21:55
green_meep
Administrator
green_meep's picture
Fri, 2013-01-04 21:18
michaeltaylor

Look, I understand that doing something like this is time consuming and not 'paid for' time. I don't have a problem with that.

The only problem I have is the implication/assumption that if you don't get the tutorial, you must not have 'tried' hard enough ('made a 'genuine' effort). And because some people have gotten by on it, that must be a personal problem of the poster.

That's just....let's say not a very valid criticism of perfectly valid criticisms of the existing tutorial.

No one has said the tutorial's author 'didn't make a genuine effort to make a tutorial'. They've just said it didn't work for them and needs more work.

As far as trying something 'more basic', that's GREAT! That's what I'd LOVE to do.

Now, doesn't anyone know where a more 'basic' tutorial is that WILL WORK if you actually follow it!?!?!

The 'just ask a question' response is really no better than 'just google it'.

My question is - "How do I use this tool to build a deck template of say Zombies!!! cards?"

I realize that this is not a reasonable question, but the fact is I don't need help with just "one" little thing (as the 'just ask a question' implies.

So my question is "How does this tool work? What's it's architecture? Why doesn't the tutorial work when you follow it's steps?"

So 'just ask a question' is blow-off, because if you're REALLY going to answer that question, you'll probably need to phone me! Winking smiley

Let me put it another way - just so you'll understand where I'm coming from. Not to be insulting, but so you'll understand why I think what happens is that most of the people who WANT to learn to template just walk away and don't bother to ask 'just one question'.

When I ask a programmer (and it happens) how something works and they make the response of "Oh, you'll just have to dig deeper into the code to understand it". In MY programming community, that's considered a sure sign than the programmer is faking it and doesn't really know how it works himself.

So 'digging deeper' wouldn't really help.

YMMV

If I get inspired I may try again...but forgive me for being equally discouraged.

Wed, 2013-01-09 21:47
kjoppy
kjoppy's picture

Yo green_meep,

I just loaded up the template that's linked to at the end of the post in preparation for helping Mr. michaeltaylor this weekend via gchat. I wanted to make sure everything would be in working order. Turns out the issue with cards not appearing in the card list exists even in the template files you posted. I'm pretty sure it's the dependency issue. It would probably be really helpful for n00bs if those files worked out of the box. Could you update?

Other than that, no problems, so thanks again!

Btw, I find this really weird because I tried those files months ago and I would've sworn they worked fine o.O

Maybe I never noticed the missing cards...

Sat, 2013-01-12 03:57
green_meep
Administrator
green_meep's picture

Yeah, makes sense. Will update soonish.

Sat, 2013-01-12 11:57
kjoppy
kjoppy's picture

Thanks. If michaeltaylor ever gets back to me we were planning to go through the tutorial step by step this weekend and clarify it. There really are a lot of errors where field names are incorrectly referenced etc., but the thing is if you have the source files in front of you I feel like you don't even need the text instructions. Ah well, to each his own I suppose.

Thanks again for such a great tutorial.

Sun, 2013-01-13 21:52
michaeltaylor

Hello! I'm hear all day!

Mon, 2013-01-14 20:49
sommbsnph

mse version: 2.0.0
game: MTG
short name: MSE
long name: Shifting Template
icon:
position hint: 1
installer group: Shifting Template

depends on:
package: Magic Set Editor

card width: 298
card height: 402
card dpi: 120
background color: rgb(200,200,200)
top: 0
left: 0
height: 402
width: 298

after that I am totally confused. Can't even fully figure out the 1st step.

http://magicseteditor.sourceforge.net/user/18672
Check the set hub with the link above!

Fri, 2013-01-25 22:20
sommbsnph

I also managed to make the paint picture.

http://magicseteditor.sourceforge.net/user/18672
Check the set hub with the link above!

Sun, 2013-01-27 05:55
green_meep
Administrator
green_meep's picture

That is mostly correct.

I'm assuming this is the style file. If so, you should probably make the game file first. Then, your style file would look like this:

mse version: 2.0.0
game: MTG
short name: MSE
long name: Shifting Template
# icon (needs to actually be set or MSE will produce errors, so I commented it out for now): 
position hint: 1
# the installer group should be all one word, and is viewable when you actually install the files.
installer group: Shifting_Template/standard

depends on: 
	package: name_of_your_game_file.mse-game 0.0.0

card width: 298
card height: 402
card dpi: 120
background color: rgb(200,200,200)

# the following values are field styling values. This is where your game file comes in, because you specified which and what type of fields you want in the game file, and now you're telling MSE how you want each field to look like in MSE.
top: 0
left: 0
height: 402
width: 298

# so it would look more like this:
name_of_your_first_field:
	top: 0
	left: 0
	height: 402
	width:298

Note that any code that you post should be posted within [ code] tags to make the reading easier.

I hope this post helped!

Sun, 2013-01-27 23:25
Pichoro
Pichoro's picture

It looks to me like he's not trying to make a new game, just a style for Magic.

Which, if he's doing something new inside of Magic design, I might be interested in helping.

Mon, 2013-01-28 00:07
sommbsnph

MTG is the game I am designing for. aka Magic: the Gathering

[doc]C:\Magic Set Editor 2\data\magic-default-image.mse-include\Magic Set Editor 2\Magic Set Editor 2\data\dictionaries\mtg file.j[/doc]

http://magicseteditor.sourceforge.net/user/18672
Check the set hub with the link above!

Sun, 2013-05-26 22:30
green_meep
Administrator
green_meep's picture

Hey all! It's my last summer before I go off to college, so I figured I'd do something good for the community and attempt to rework this tutorial into a collection of threads. Each one will address a small part of templating, and will hopefully be more accessible than the mound of text here.

Wed, 2013-05-29 02:11
Zatnik
Zatnik's picture

My text box isn't showing up. In the "game" file, I have:

card field:
	type: text
	name: title
	description: The name of the card.

And in the "style" file:

	title:
		top: 350
		left: 60
		height: 27
		width: 222
		alignment: left bottom overflow-shrink
		font:
			name: Bodoni Highlight ICG
			size: 36
			color: rgb(0,0,0)

It's in the middle of the image box, if that makes a difference. Everything else is working fine.

Can anyone help me with this?

Wed, 2013-05-29 20:34
green_meep
Administrator
green_meep's picture

In your style file, try setting a z index attribute to 1. Your image field is probably covering the text field.