navigate_before Prev Next navigate_next
A module is the starting point for developing new content for the EMCCV. A module is located in the "modules" folder within the EMCCV application folder. So you'll find the SailorXv3 module in the following folder/directory:
EMCCV_Prototype > modules > SailorXv3
In this directory you'll find the following:
In the future you will also find the subfolders ext and mod. These will contain extensions and modifications respectively, but we'll get to those later. Let's dive in!
Our first line is always the same:
<?xml version="1.0"?>
This defines the XML version. Just copy it. ;)
Before we can add our content we need let the EMCCV know what it is we are creating! That's what the root element is for, which in our case is the module. Everything else will be placed within these two tags. If you are already confused you should probably read the XML Primer first. ;)
The module - just like almost every element within this document - needs an id. This will later serve to uniquely identify the module among the many we aim to have available on this website.
Let's also give our module a nice and expressive title and an authorid. The authorid will later be your username on the EMCCV.com website, so choose it wisely! The id naming rules apply here, too. Even while the EMCCV Community is still in development you can contact Aeryn to submit your module. Once you do you will have secured your username!
Our document should now look like this:
<?xml version="1.0"?>
<module id="SailorXv3"
title="Sailor X Generator"
version="3.X"
authorid="aerynmartin">
width="600"
height="1016"
sDesc="Generate an image of your character based on the anime/manga Bishoujo Senshi Sailor Moon!"
</module>
Hooray, we have a module! Please take a look at the additional attributes. They all need to be defined because that's where the information on the INFO tab comes from. This information will also be listed on the download page for the module on this website.
The attributes height and width are those of the final full size image, that will be exported.
The attribute version should typically contain a number, but you could call it "LUNA" if you really wanted... Numbers are easier though. ;)
The attribute sDesc stands for "short description". In the future there will also be a lDesc.
That's it for the boring info stuff! We could actually load this into the EMCCV, but aside from the INFO tab it would have no content at all. So let's add some! For SailorXv3 I used the body as a starting point because everything else is positioned in front of, behind or around it. The body would be an aspect element, BUT: as we learned in the XML Primer an aspect can only be contained within a set, because otherwise the EMCCV won't know which tab to place the aspect in. So let's add a set first, give it an id and a title, and then add the aspect with id and title as well!
NOTE: To focus on the new information I'll keep the module information short from here on out, but you should always include all of the above attributes!
<?xml version="1.0"?>
<module id="SailorXv3" title="Sailor X Generator">
<set id="setBody" title="BODY">
<aspect id="aBody" title="body">
</aspect>
</set>
</module>
If we were to load this in the EMCCV now, we would have an info tab, which it generated automatically and filled with the information of the module, so at this point all it would tell us is that the id of the module is "SailorXv3".
We would also have a tab named "BODY", which would contain an aspect called "body". We could set a colour, make it visible or invisible, but nothing would happen and we wouldn't actually see anything, because we haven't added any graphic files yet. Let's do that next!
In order to add our graphic file we need the tag file. BUT: As we know from the XML Primer, a file has to be contained within a style, which is contained within the aspect. The hierarchy once more: module > set > aspect > style > file
Let's do it!
<?xml version="1.0"?>
<module id="SailorXv3" title="Sailor X Generator">
<set id="setBody" title="BODY">
<aspect id="aBody" title="body">
<style id="sBodyStandard" title="standard">
<file src="body/standard.png" />
</style>
</aspect>
</set>
</module>
W00t! We have a fully functional module! Of course it's a little bare, but don't fret: we'll add more stuff.
Let's analyse: we have the INFO tab, the BODY tab, within the BODY tab we have an aspect called "body", which we can turn on and off, we can also change its color AND we will actually see our graphic file displayed on the canvas!
INFO: As long as we only have one style within an aspect, the title for the style is optional (because with just one style there won't be a style menu for this aspect).
The file tag works a little differently than the rest, because it is the smallest/last element in the hierarchy. No other elements can be contained within the file tags, which is why we are going to use the self-closing tag (the slash before the closing pointy bracket). Files also don't get an id. The only information we absolutely need is the location of the file, for which we have the attribute src.
Let's say we have... an open hand and a fist! That means we have two styles and at least two, possibly more files to configure. I recommend splitting your graphic files into the smallest consistent parts - meaning we shouldn't have the entire body twice, with the only difference being the hand. We CAN do that, especialy in the beginning, but eventually you're going to want to reduce the overall file size and drawing the body just once and the two hands separately will help with that.
So we now need two styles for the body, and these two styles will contain different files. Like this:
<?xml version="1.0"?>
<module id="SailorXv3" title="Sailor X Generator">
<set id="setBody" title="BODY">
<aspect id="aBody" title="body">
<style id="sBodyOpen" title="open">
<file src="body/standard.png" />
<file src="body/hand/open.png" />
</style>
<style id="sBodyFist" title="fist">
<file src="body/standard.png" />
<file src="body/hand/fist.png" />
</style>
</aspect>
</set>
</module>
WHOA! This is now a whole different game! :)
Note that we now have two styles, each with their own id and title. Both styles contain the same body file (standard.png), but they contain different hand files! To avoid having hundreds of files in the same folder, which results is awkward file names to keep them unique, I recommend using as many (sub-)folders as you need to keep the actual file names as short (and still self explanatory) as possible. That also makes them easier to find for modding purposes!
It can quickly get tedious to keep finding new unique values for the id. Additionally it is quite useful to make them readable and self explanatory, because when an error occurs, the log will contain the id of the affected element and being able to immediately recognize the associated element will help you a lot with finding the mistake. I recommend using prefixes as well, because they tell you right away what type of element is causing the error. I use "set" for sets, "a" for aspects and "s" for styles.