Monday, May 13, 2013

Battle Graphics - Opponents

Opponent sizes are a bit... funny.
There isn't a set size that they have to be.  While poking around online, I found a thread in which someone gave 16x16 as the minimum size and 240x240 as the maximum.  But what it likes best is an image at 40,000 pixels in area.  If it isn't that size, it'll be fickle about importing them.  According to their experience, dragging the image into the right folder will upload it no matter the pixel area, whereas importing it through the program's resources manager gives an error message.

So... yeah... we'll have to do some trial and error with that one.

By default, opponent images are, unfortunately, static rather than animated.  However, I've seen people make boss battles in which the opponent is animated, so there's some way to trick the system into doing it. I haven't figured out how yet, so I'll get back to you on that one.

Battle Graphics - Backdrops

Backdrops in battle mode are images at 320 x 240 pixels.

In the backdrops that came with RPG Maker, the horizon line tends to be about 3/4 of the way up the image or higher, while indoor areas put a back wall closer to 2/3 of the way up.  Here's an example.


The placement of the characters on the backdrop are aligned like this:


The opponent is on the left side, while the heroes are on the right side.  Everywhere the lines intersect is a location the characters can be placed.  However, you can go into the options and manually place the characters elsewhere if you want.

There are several backdrops that could likely be used in our game, (or tweaked a little to be used) so when we get to working out a certain location, we can look through them and see if there's anything useful.

Sunday, May 12, 2013

Links to Resources and Tutorials

Here are some links to sites with tutorials and such to help learn RPG Maker 2003.  (And one to help with graphics.)

123agumon's youtube videos - They aren't fantastic (he openly admits there are things in the program he doesn't know), but he covers a lot of different topics, which is very helpful.

RPG Maker 2003 Wikibook - Covers a lot and gives a lot of info.  It doesn't really walk you through it the way a tutorial would, but it's a really comprehensive source.

Dark Gaia's "Noob's Guide" - I haven't actually gone through and read this one, but it looks pretty comprehensive.

Golden Griffon's Beginners Guide and Guide to Switches, Variables, etc. - Two guides to the very first things you need to learn.  Very good tutorials, and it's a shame he didn't make more.

rpgmaker.net tutorials - A ton of tutorials people have posted on various subjects.  It's a list you'll just have to dig through until you find what you're looking for, or find something interesting you want to check out.

Master RPG Maker Helpful Things Topic - Another long list of various tutorials and resources.  (Judging from the comments, many of the links may be broken, so the helpfulness of this one is a bit questionable.)

Graphics:
Charas-project.net - Helps you make sprites, facesets and battle sprites.

If anyone has any other sites, let me know and I'll add them to the list.

Friday, May 10, 2013

System Graphics (Title screen, menus, etc.)

Title Screen:
The title screen is 320 x 240 pixels.  A menu pops up on the screen, which looks like this:
So it may be a good idea to design the title screen graphic with that in mind.  I don't have dimensions for the size and location of the menu box, but I suppose you could use the image above as a sort of template.

Game Over Screen:
Even simpler than the title screen.  It's also 320 x 240, and it ought to say "Game Over" on it.  That's all there is to it.

Misc. System Graphics:
The rest of the graphics are stored in a single file, a 160 x 80 .png file that looks like this:
The different squares and objects in the system graphic are basically like this:

Um, yeah... you got all that?  (Oh, also, there are up and down arrows inside the menu frame tile, but I haven't worked out yet where those work in the game.)
Here's a template for you (from rpgmakertimes.blogspot.com):
The top row is 16 x 16, and the rest is 8 x 8.  Just alter the ones you feel the need to and don't worry about the rest.  Leave them as-is.

To test your system file in RPG Maker:
-Skip RPG Maker and recreate it in photoshop.  Download RPG Maker here.
-In the top left corner, there's a "New" button.  Name your game files whatever you want.  This is just a test, so it doesn't matter.
-Click this button:
-On the left-hand side, make sure "System" is selected (not "System2") and click "Import."  Find the file you made and click "OK" to bring it into the program.  Then get out of that window.
-Next, click this one:

And go to the tab labeled "System."  In the bottom left corner you'll see the default system graphic.  Click "Set" and change it to your own.  Then get out of that window, too.
-Before you can test run the game, it requires you to choose a starting location for your hero.  To give him land to stand on, select one of the background tiles, then the paint bucket just above that, and click on the water to fill it in with land.  Then find the toolbar icon that looks like a cursor on a yellow square.  This will take you to a different layer on the map, which will now be gridded.  Right click anywhere and choose to make that tile the party starting location.
-Back at the main toolbar, click the "Play" button this time.  (The play arrow icon.)  It will ask you to save your changes, so click "Yes."  A new window will open, and you should immediately be able to see the new menu based on the system file you created.

Testing chipsets in RPG Maker

First, let's get a game file set up.  You'll only have to do this once, and then you can test chipsets to your hearts content.
-Download RPG Maker here.
-Once in the program, the top left of the toolbar will have a "New" button.  You can name the thing whatever you want.
-Now you'll have a water-covered map, with a pre-installed chipset to the left.  Think of it like a really weird MS Paint, and the tiles are the colors.  Click the one you want and click on the map.  There's a small toolbar across the top of the chipset with drawing options.
-The tiles are divided onto two seperate layers on the map, with the ground cover on the lower layer, and the objects (the ones on transparent backgrounds) on an upper layer.  On the toolbar, you'll see three icons in a row that show a cursor on three different colors.  The first of those icons is the lower layer, the second is the upper layer, and the third is the event layer.  The event layer is where the coding goes, so don't worry about that one.

To bring your chipset into the program:
-There are two ways.  One is to find the folders that were made when you made a new file.  Inside, there's a folder called "chipsets."  Just copy and paste your own chipset into that folder.
-The second way is to find this icon:
In the window that opens, make sure the "chipsets" is selected on the left, and then click import.  Find the file, and then hit "OK" to import it.
-Now we need to make that file available as an option for our map.  Hit this button this time:
Then find the tab labeled "Tileset."
-This isn't as scary as it looks.  You can ignore most of the info on the page.  On the left is a list of chipsets available.  You'll need to add a new number to the list, so hit the array button at the bottom and add a new one.
-Select your new, empty slot.  Go up to "Name" and  "Tileset File."  You can name it whatever you like.  Then select the "..." beside the tileset file and choose your chipset.  Hit "OK" to get out of the window.

To apply the chipset to your map (last step!):
-On the bottom left is a file directory.  Right click on the map and choose "Map Properties."
-Find "Tileset" and choose your chipset from the drop down menu.

You're done!  Now you should be able to draw on your map using your chipset.

Thursday, May 9, 2013

Chipsets (aka background tiles)

Each background tile is 16x16 pixels.  These tiles are arranged in a larger file called a chipset, which is a .png file at 480x256 pixels that gets imported into RPG Maker.

These tiles generally fall into three types: your average joe tile, such as grass and dirt; animated tiles, such as water; and objects on a transparent background.  These have to be arranged into a chipset in a certain way so that the program can find what it needs.  (You wouldn't want a random grass tile in the middle of your water animation.)

Here's an example of what a chipset looks like from RPG Maker's freebie files:


Here's a template by a very helpful person (jojogape.deviantart.com), and then I'll explain the color coding.


Blue - Animated tiles.  Each animation gets three frames which run left to right.  The dark blue tiles are for animations with four frames each, running top to bottom.
Green/Grey - Ground textures (flooring, dirt, trees, hills, etc.) that are arranged a certain way in 3x4 blocks.  More on this in a minute.
Yellow Green - Anything you want.  They will lay down exactly as they appear and can be arranged into that area of the chipset any way you want.
Yellow - These are the objects on a transparent background.  Some objects may take up more than one tile.
Black - Leave these completely blank.  A blank tile can be used as an eraser to cover up a tile that isn't wanted.

Tiles in 3x4 blocks:

These tiles are for gound cover that have a background/boarder of a different ground cover, such as the one above which shows sand surrounded by grass.  The program uses all of these tiles together so that, no matter where you lay down that particular ground cover, it can round out the corners and make everything look smooth.  The first tile should show what the ground cover would look like if only a single tile were colored with it (it should have a complete boarder of the second ground cover).  The second should be entirely the secondary ground cover.  The third is entirely the main ground cover, but with the corners rounded off.  The rest of the tiles are laid out to create a 3x3 square with a boarder around the outside.

When a map is created in RPG Maker, it is assigned a certain chipset to use and cannot access tiles from any other chipsets, so each chipset should contain all the tiles needed for that particular area.  Don't worry about what tiles can be walked on and what can't.  That isn't determined by the layout, but is adjusted inside RPG Maker.

I'm going to dump all of RPG Maker's chipsets on here as a reference, since it may be easier to alter some pre-existing tiles than to make them from scratch.





I'm going to explain how to import these into RPG Maker so you can test out your handiwork, but it's a bit of a long explanation (not difficult, just a lot of steps), so that'll be in a different post.

Tuesday, May 7, 2013

Facesets

Facesets are the images used alongside dialogue boxes to show who's talking.

Each face graphic is 48x48 pixels.

The face graphics are put together into a faceset, which is a .png file 192x192 pixels and is inserted into RPG Maker.  Once there, the program knows how to divide the image up into the individual face graphics to use.

Here's an example of a faceset from RPG Maker's freebie graphics:






Each faceset can show different characters, like this one, or can hold several expressions for a single character.  It doesn't really matter how the images are organized, although keeping all the face graphics for a single character together within the same faceset would be very helpful.  Naming the file well would be helpful, too, such as "Heroes," or "NPCs."  Or, if a single character is smiling, pouting, laughing, crying, scowling, grinning, drunk, scared, and embarrassed, all in the same faceset, then we should name it "Vash," since that's probably who we're dealing with anyway.  Hopefully we won't need as many face graphics as all that, though, so try to contain yourself, Vash.

If you would like a template to work with, here's one from rpgmakertimes.blogspot.com:


Charsets (aka Character Sprites)

Each sprite is 24x32 pixels.

All the sprites go into a charset, which is a .png file, 288x256 pixels, that gets imported into RPG Maker.  Once there, the program knows were to look on the charset to grab the sprites it needs.

Here's an example of a charset that comes with RPG Maker:


Notice how the charset is gridded to show the different characters, directions, and frames in the walking animation.  You'll need to copy that layout or else RPG Maker will get confused and look in the wrong place for the wrong sprites.

Some wonderful person on the internet (at rpgmakertimes.blogspot.com) created this template to help layout the sprites on the charset.



Final Note:  Name the charset file something as helpful as possible.  Like "Heroes" or "NPCs."  If there's more than one charset of something, start adding numbers: "NPC1,"  "NPC2," etc.


---

If you want to test your sprites in RPG Maker, to see for yourself if they look alright, it's not hard.  Here's how.

-Download RPG Maker here: http://2drpg.com/2003.php
-Open the program and, in the top left corner, click the icon that will open a new project file.  Name the stuff whatever you want.  This is just to test the sprites, so it doesn't matter.  Choose a save path that will be easy for you to find, though.
-Creating the project file will create some folders with it.  Minimize the program a minute and find those.  Inside is a folder named "charset."  Put your charset into this folder.
-Get back into RPG Maker.  Your character needs land to walk on, so make sure the grass tile is highlighted (it should be by default), click the paint bucket that's just above all the background tiles, and then click on all that water.  Viola!  Instant land!
-Along the top toolbar, there are three icons in a row that show a cursor on different colored backgrounds.  (These are for different "layers" of the map.)  Choose the yellow one.  Then right click anywhere on the map and choose the option for placing the party starting position.
-Now to grab your sprite.  Go to "Tools" and then "Database."  You'll be presented with a whole bunch of info on a character named Zach.  Find the box for his sprite and click the "Set" button.  Then find your charset.  Hit "OK" to get out of all that character stuff.
-On the top toolbar, click the play button.  (It's the arrow, just like the play button for a video or music.)  It will ask you to save the map, so hit "Yes."  Ta da!  Now have fun running around your big grassy field as your character.