Aki
![](https://akidevlog.neocities.org/DiscAvi_Skitty.png)
Since this is kinda my thing, I wanna share some resources (and maybe have some links handy in one place all for myself bwahaha). This page is also a backup of my old tutorials and resources, just in case they can still help some people.
Since this is kinda my thing, I wanna share some resources (and maybe have some links handy in one place all for myself bwahaha). This page is also a backup of my old tutorials and resources, just in case they can still help some people.
First of all, I've gotta give a link to Pokemon Essentials on Github. There are other links I'm sure but I think this one is good for long term linking. This is the kit that I've used to make so many games! You'll need a copy of RPG Maker XP (Yes, that specific version of RPG Maker. The other versions aren't compatible) but otherwise this kit has everything you need. Compared to other pokemon starter kits it's the most complete, especially where it counts. And when I say that I mean the battle system. There's so many times I've seen kits that claim to run smoother or look prettier or be easier to use, but they're little more than a pokemon graphics pack in another engine. I'd love to be proven wrong though, and the PSDK kit has come a long way.
This Stardex tool is great for balancing. The site I just linked has gone up and down since I've first heard of it, so I wanna be sure to link directly to the Github too.
This NPC Text Generator is great for playing around with and getting ideas. It's generic of course, and I really believe that NPCs should have interesting/usefull dialogue and avoid being just space filler buuuuuuut I also struggle sometimes. With trainers usually, but sometimes you get a little fried after writing so many NPCs in a row you know?
The Random Region Generator is another really fun randomizer tool. It comes up with a region name, rivals+ their personalities and partner Pokemon, and a summary of every route, town and gym leader up to and including the Elite Four and rivals final teams. It's just insanely fun to see a whole game layed out by this thing. Now I'm pretty sure anyone with the dedication and drive to make a full region Pokemon game is gonna have their own ideas and not just use a randomizer, but again it's just fun to play with. Or use it for a couple jumping off points, or when you're about to make a jam game. I bet it's also a great starting point for a tabletop roleplay game, there's just enough there.
If you want even more specific ideas, this same site has a Location Generator to help you get ideas for a specific route or type of environment. Honestly check out the whole rest of the site, it's full of fun info.
These aren't super common to edit in Essentials but can still be helpful for general game development:
Here's one that might catch you off-guard, but if you're looking for inspiration while designing certain parts of your region... maybe try something like Window Swap. Just chill out and see the kinds of places people live. Maybe this won't apply to most devs, who go in with strong ideas about where their region is based, but I allways prefer a fantasy approach where I'm not tying myself down to "This Pokemon region is a recreation of my home state" or something. Forgive me then for sharing a link to a cozy and transient site, but this is Neocities so I feel some obligation to send you through unconventional rabbitholes in the web.
I originally posted this to Relic Feb 19, 2017. It's gotten a few spotty updates over the years so some style might be outdated.
Just drop these into the pictures folder to use. Please do credit me (Akizakura16) if you use them!
First, a couple style imitating the main series:
Gen 5 style
Download includes 2 versions: compatible with Essentials v17, and the old 16.2Contains graphics for: Summary, Party, and Pokedex
Gen 6 Style
Download includes 2 versions: compatible with Essentials v17, and the old 16.2This example shot is from v17
Ribbons Style
Made compatible with Essentials v16Go Style
Download includes version compatible with Essentials v17, and the old 16.2 compatible version!I never played a lot of Go, but he UI is pretty.
Broken Pixels Style
Download includes version compatible with Essentials v17, and the old 16.2 compatible version!This was inspired by a dark UI that r/pokemon had for a brief moment of time.
Dainty Style
Made compatible with Essentials v16This style was randomly inspired by a restaraunt menu.
Rocket Style
Made compatible with Essentials v17An edgier recolor of Dainty Style, because I allways like that one even if it wasn't very popular.
DexNav Style
Compatible with Essentials v17A style based on the DexNav of Aplha Sapphire/Omega Ruby
I originally posted this to RelicCastle on May 25, 2017. I'm only reposting, without updating, so apologies if this information is no longer accurate.
Let's talk graphics! If you're looking for something special to help set the mood, you might consider trying out some Fogs or Panoramas; but what are they?
Fogs
Fogs do not:
Here's an example of the difference a fog makes. On the top are screenshots without any fog, and below them are the same areas with a special fog.
Now I'll show off some fogs in action.
The flames are a character sprite, but the glowing effect is an animated fog.
Whoops I got into a battle! but the tree shadows here are a fog that's being moved by RMXP.
In this screen, an animated fog creates the underwater look.
Here the fog creates beams of light that the characters can walk through.
This fog adds animated fireflies and a night tone.
With this fog, the windows glow and each colored lantern glows in different colors.
How to set up a fog
Step 1 is to make your image. then stick it into your project! Just look for the Graphics Folder, and then stick your image in the Fogs Folder.
Aki tip: You actually don't need to double the size of your Fog like with other graphics in Essentials. By default they display at 200% their size, so you might save yourself a step there.
Step 2 is set up your fog to be displayed! This can be done by attaching it to a certain tileset so that they're allways together, or something like a Parallel Process event to display a Fog on a certain map.
Aki tip: If you know what map you're going to use your fog on, it's easy to customize it! Set your finished map to 1/2 size view and grab a screenshot, then you can use that as a guide to draw a perfect fitting Fog image.
Step 3 is changing any of the Fog options you want to use!
Fog options in RMXP
Here's some visuals of me setting up my custom fogs.
First, setting up a parallel process event to make my Fog appear in-game.
Using an event like this is probably the most involved method of adding a fog, but it gives the dev the most control. with an event I can of course change all the fog's settings based on different game conditions.
The event method is good if you're a perfectionist/control freak like me, or if you want your fog to change based on something like time of day, or where the player is on the map. Another cool use might be a fog that darkens an area the first time the player travels through, but then the fog clears up after the area is cleared.
Here's an alternative method to make a fog appear in-game; setting it up in the Database to make my Fog/Panorama appear everytime I use this tileset.
This type of method can be super efficient in situations such as if you have a tileset just for all your forests, and one fog effect you like to put on all of them.
That's it for fogs, now to talk about another cool visual effect you can pull off in your Essentials game...
Panoramas
Panoramas do not:
Check out this screenshot where I overlapped the game's window with the map behind it. Notice the sky and plants that can be seen in the game, but aren't on the map?
That's where the panorama is, it appears in-game where I left the map completely transparent with no tiles.
Here's an example in motion, because the cool part about panoramas is how they can slide around separately from the map. It can make for some really artistic perspective shots.
At the edge of the cliff is a Panorama to create a mountain view. There are invisible tiles blocking the player from moving forward, but the Articuno graphic can easilly move on top of the Panorama thanks to checking the Through option in its' event.
I don't have any more good examples on hand while writing this, but Panoramas don't have to just be used at the edge of a map like it is here. Another good use of a Panorama might be creating puddles that the player can walk on, but also reflect a sky full of moving clouds, like seen on Hoenn's Route 120.
So, how to set up a panorama?
Here's me setting up a panorama in my game through a parallel process event.
And here's an alternative method of setting up in the Database to make my Fog/Panorama appear everytime I use a specific tileset.
And that's it! As usual, no credit needed just for reading a tutorial... but if you're interested in the game that where shown in the screenshots? They're all by me! You'll find them somewhere here on the site, even if they weren't all released.
I originally posted this to RelicCastle on Feb 17, 2017.
Found a cool new tileset you wanna use? Ready to build a tileset of your own from all the cool resources the community has made? Well it can be a little tricky if you've never done it before, so let's go over the basics!
Size
The first thing you need to know about tilesets in Essentials is that each tile is made at a size of 16x16. This is because that's how Pokemon does it. (or at least how the old pokemon games did it, we're in 3D these days of course)
But wait! Pokemon may use 16x16, but RMXP uses tiles that are 32x32! That's why after the tiles are made at 16x16, we double the size of the tileset; then it's the right size, and still captures that Pokemon look! Of course, if anything needs editing, you then have to reverse the process; Scale that tileset down to half size, make the edit, and then scale it back up before putting the set back into RMXP.
When you're changing the size of your graphics there is a way to do it wrong. Most programs want to smooth out your images as you resize them, but this will ruin pixel art. Here are the settings that will keep your pixels crisp:
Q: But why can't I just make 32x32 tiles? Or just edit them at full size without the other steps?
A: The short answer is you don't want to. All of the tiles and other graphics in Essentials are double-sized versions of their original resolutions; it's a trick acting like the game is 16x16. If you add something that's 32x32 into the 16x16 graphic system, then you're exposing the trick and throwing off the illusion. This isn't a good thing; it looks bad.
If you're dedicated to making a game that's entirely 32x32 though, you can. You'll just have little/no resources to support you. If you're curious about 32x32 graphics, then check out a game like Kanto Stories.
Q: Do I have to do that 'resize the tileset' thing even if I just want to re-position something on it?
A: Yes. Frankly it's just safer; if you don't move it properly and then do resize it later it'll throw it off anyway.
Q: Do I have to do that 'resize the tileset' thing even if I'm recoloring?
A: Yes, unless you're literally using the paintbucket tool. Shrinking the tileset to it's original size will make less work for you anyway, if you're doing anything more complex.
Format
Like it says on the wiki, tilesets are the width of eight tiles in a row. As for length, that limitation is so great it's better not to worry about it. Luckilly, there are some tilesets out there that are already formatted for RMXP! But there are some things to be aware of when using them, so let's get into examples.
The things I want to be aware of are:
I'm going to grab a tileset by Dawn Bronze. It looks like it's formatted correctly so I'll go ahead and import it into my Essentials game.
The background is all one color and the shadows look to be pure black, so importing went smoothly. The settings shown in this .GIF will make RMXP ignore the pink color, while giving the shadows a little transparency. This could have caused problems if Dawn had made a couple of mistakes when formatting the set; however the background color and shadow color are only used for those respective purposes and not on any of the actual tiles. So everything's good!
Now to just set up the tileset in the Database...
Alright, this tileset is now ready to use! I didn't put any settings on yet, and I'll talk about settings in another section of the tutorial, but for now let's see how it looks when mapping.
Q: What if I want to use pure black on my tiles and as a shadow?
A: You should pick a different color for one of those things. Take a look at these two images below, the one on the left has the shadows as semi-transparent, the one on the right doesn't. If this seems like too great of a limitation, please take another look at the .GIF above where I was mapping; there's a mailbox visible in the set that has a shadow, while still having a post that I would describe as black. It's all about how you work your colors!
Here is a pure black shadow, as you can see it stands out in a pretty bad way
Alignment
Let's say you have some tiles that aren't formatted into a set yet. If you didn't make them yourself, then you just have to make them fit into the tileset somehow right? Not quite.
For example, I'm going to look some tiles from PixelMister. I took one of the houses and put it on into a tileset twice. Once just kind of slapped in there, and once aligned purposefully. Here's the result when I play.
The problem with the house on the left here is that my player character can't line up with the door correctly. You might also notice that she's standing further away from that house as well. When putting tiles into a set, try to keep in mind how the player will be able to interact with them.
Here's how I had aligned the house on the right; all I cared about was getting the door aligned, because that's the part of the house that the player needs to interact with (if the map was evented, the door graphic would be there of course):
Properties
When you're looking at a Tileset in the Database you'll notice there are a few buttons along the right side. The Essentials wiki explains their basic functions well enough, so I'll just share my tips:
Autotiles
Autotiles are those tiles that aren't part of your main tilesets, but have their own special folder and can be animated. When you're in the Database, you can assign up to 7 Autotiles to be partnered with a Tileset, and then they're added along the top.
The first form is a single tile, repeated in a row. This is a good choice for animating a single object, like these flowers in Essentials. Most of the examples in Essentials are 4 tiles, and thus, 4 frames of animation, but I believe you can string it out for much longer.
Next there is a form that makes mapping easier. When you have something with corners and want to make complicated shapes with it, you can use this kind of Autotile. I won't try to explain the mathmatics of how it maps, just go ahead and test it out for yourself.
Again I've grabbed an example from Essentials. Can you see how this is formatted? It's 3 tiles across and 4 down. When RMXP is reading this Autotile, it's broken down like this:
So that upper right tile is actually the four inner corner pieces. The upper left tile is what you get when you place 1 of this Autotile unconnected to itself, and is also what appears as the "preview" for this Autotile on your tileset.
This final form combines the two I just listed. it has the easy-mapping functionality while also being animated. So, after seeing how the last form was set up, does this big Autotile make sense? It's the same style, but repeated for many frames in order to animate. Like a single tile animation, you can have as many frames as you want here.
As usual, if this tutorial helped you, yay! No credit needed though, just go make games!
I originally posted this to RelicCastle on Feb 17, 2017. I'm only reposting, without updating, so apologies if this information is no longer accurate.
These aspects reflect your aesthetic style in ways that can be hard to objectively measure!
How about some examples actually in context of a game screenshot?
The cliffs and rocks in both of these screenshots are actually the exact same tiles, just seen in different contexts.
Outlines
Some things to think about are how much emphasis each object needs. Typically, something stands out more if it's outlined at all, and will really stand out if that outline is in black. Knowing this, you can try styles like these:
Shadows
For events you have the option of using a script to create shadows, but what about in your tilesets?
Shading and Highlighting
Shading applies to both characters and objects, so if you don't have a plan ahead of time you might end up with different levels of shading on each!
Proportions
Is it okay to mix gen 5 sprites with gen 4 tiles?
When making my own tiles, how do I know they're the right size for my characters?
My number one tip is to compare your playable character to a door. Do they reasonably fit together? If they don't fit together at all, then you have a problem, but in this example you can also see that there's some wiggle room on what works.
Pallettes
I'm personally very bad at this, so I'll try not to preach much here.
Lighting and music
Doing this well really adds a beautiful polish to your game.
Animation
Quick! Which is more eye-catching?
The only difference here is that one screen has some characters with stop motion ON.
Here's an example of water from the same game; in one area the freshwater isn't animated, and in another area the oceanwater is animated. Both screens have animated characters though!
Alright here's the part where I get wordy
I recommend making a set of rules that define your aesthetic. Specific ones. Now you don't ever have to write them down or tell anyone (unless they're making something for you, then please tell that person), but keep them in mind when making or editing resources. What do I mean by rules? Well here's a set as an example:
Following those rules is how I made this screenshot:
The point of having rules is to just be aware in case any style mixing happens; otherwise you end up with a pile of objects that don't match each other all on the same screen. Even if formally making rules isn't your style, please just keep the qualities I listed in mind.
As allways, please point out if I've missed anything, I'll want to add it in!
No credits required at all! This is a tutorial, the knowledge is free!
I originally posted this to RelicCastle on Feb 16, 2017. I think this was one of the tutorials I posted on the original Relic site though...
There was a couple times where Relic members requested me to write a specific tutorial about something, and even if I didn't feel qualified, I would write it.
This might not be the best tutorial but it was shared fairly regularly... I think just because I was the only person writing this kind of thing specifically for/about the Pokémon fandev community.
There are plenty more generalized tutorials about animation and spritework that can probably teach better techniques.
My method may not be the most effective or efficient, but maybe we can pick up some tricks from each other! Okay, here's the process I go through when I animate sprites:
Step 1: The Sprite
Finish the sprite before doing any animation.
Make sure the sprite is already finished; like 100% excellent on its' own without being animated. It will be a pain to go back an make changes to the coloring or design during or after the animation process!
So, since I don't have a fakemon sprite on me right now that meets that requirement...I'll be using this Mew sprite by Speedxaaa:
Now this particular sprite is a bit big because it's hi-res, but I won't be using a different technique because of the size. If I am animating a regular sprite for Essentials, I do so before resizing it.
Step 2: The setup
Get set up in your program of choice.
The one I use is GIMP so you'll be seeing screenshots using that program, but in this tutorial I want to focus on the technique and not the program, so I'll try to leave GIMP out of my points.
Here's my setup right now, I've just opened up the sprite in GIMP and haven't done anything else yet:
Step 3: Preparation
Analyze the sprite and plan how it should move.
I like to think a lot about this before I begin...how will I bring out this Pokemon's personality with its' movement? Is it energetic and eager to battle, or is it an evolved veteran that's at ease on the battlefield? What kind of animal is it based on; a prey animal that might be on high alert, or a calm and focused predator?
Here is my analysis on Mew that I've drawn on for the sake of explaining my thoughts:
Since I'm animating an official sprite this time, I can look at some references if I feel stuck. However, I usually don't want to do that but instead come up with my own ideas. I'll compare my edit to some official sprites at the end though.
Step 4: Simple Movement
Now I'm animating! The still sprite is going to act as my first frame for now, so I'm gonna get started on Frame 2! I decided to start with tail movements, so I've separated the entire tail from the body.
You can see a ghost tail underneath, and that's from Frame 1. I'll be keeping that there as a reference while I change Frame 2. Now here is the tail movement I've decided to go with, I'm gonna unwind it just a bit and spread it out more than it already is, starting with this:
I made this tail by cutting and pasting several bits of the original tail, however I did not rotate any part of it. I simply redrew a couple of corners that didn't line up perfectly. I'm trying to keep 3 limitations in mind as I continue to position the tail:
That's how the tail is going to look for Frame 2. Now I'm going to use Frame 2 as a ghost guide for myself as I work on Frame 3, and then use Frame 3 as a guide for Frame 4, and so on. I'll move the tail a bit more each time, and then bring it back so that the tail can return to its' original position and create a nice movement loop. Here's what I've got so far:
It doesn't look like much does it? But know I've got one body part moving in a way that I want, and it's the base I'm going to work off of.
Break: Taking a look at some refrences
Next I'm going to add a little movement to the arms, but before I start, I want to bring up some things about the official sprites 2, 3, 5, and 6:
Firstly, As the Mew moves you can see that a lot of the sprite quality-especially the outlines-is lost (not as much in the gen 2 sprite on the far left because it hardly moves). This is because the pieces were rotated without redrawing them at all (not the gen 6 image on the far right, that's a rip of a 3D model turned into a .GIF it looks that way because 3D objects do not have flat outlines, but you can still see how it changes shape when it moves); I personally dislike it, but it is a huge time saver when you've got a lot of sprites to work on.
The second thing I want to point out is how the movement of the tail and arms on the 5th gen sprite (second from the right) has the same pacing. The arms are at their highest point when the tail is closest to the body; The arms are at their lowest point when the tail is reaching furthest from the body. They're in sync, which can be a great thing. But for myself, I want body parts that aren't connected to move independently of each other.
So now that I'm ready to move the arms on my Mew, I'm going to start with...hmmm...Frame 3, as if it was my first frame, and make a short loop with only frames 3 through 7, (as opposed to the tail, which loops its' movement in frames 1 through 8, which is all the frames.). Hopefully this will hide some of the "seems" where the .GIF loops, and make it feel a bit more natural. Let's see:
Mew still looks a bit stiff to me, so I'm going to add some movement to those dangling back legs. I think I'll start with...Frame 6, that's not the start/end of any other movement loops yet.
Step 5: Finishing up
I hope you didn't skip the break tab.
I decided that I wanted the different parts of mew to move independently of each other, and not in sync. That's just a personal choice, let's see how it works out for me.
I did each part individually. First getting the tail movements perfect, then the arms, and then the feet.
Hmm, maybe it looks a little dis-jointed actually? Well, let's see what happens when I add that bobbing/floating movement:
There, I think that ties it together nicely. I saved this biggest movement for last specifically, because I wanted to be very specific in my smaller movements first, and those are easier to see when Mew isn't moving around as much. This might be a totally backwards way of animating though depening on your sprite, it's your call how to prioritize.
I'll call that finished! This process usually takes me 30 minutes or so, but there are flaws with my technique like having to do the backsprites separately, and having to recolor every frame for shiny versions. Also, I like to make .GIFs in order to see my results right away, but Pokemon Essentials doesn't usually use .GIF files for battlers. You'll have to separate out the different frames into the proper format.
Specifics fo GIMP
Here is the finished .GIF when I open it in GIMP
The frames play in order from bottom to top, the numbers will be changed to match the order when the image is exported.
Now as I was working I did use the layers to draw as normal, but when exporting as a .GIF the layers are individual frames
Cerdits: None required at all!
I originally posted this to RelicCastle on Feb 28, 2017. I'm only reposting, without updating, so apologies if this information is no longer accurate.
I just want to start out by mentioning that these tips aren't just specific to spriting, but I'm focusing on that becasue I know that's the style most people are using for their games! If you're looking for some drawing tip though, these will work for that too!
Tip Number One is to never be afraid of looking at refrences, so I've tried to include some images.
Humans
Heads and Tails
At the very base of your creature, pretend that it is made of circles. Make a little guide if you need to, so that no part of the outline will concave into the body. (I see this most often with the skull, people place the ear too far in)
A tail is literally a spine that just keeps going. So keep the line that forms the back going and you'll get the placement just right.
Legs and Paws
Typical cat/dog back legs have very long feet- the little paw they stand on is their tip toes, and their ankle is up in the air.
Animals typically have 4 toes on each foot, but commonly sprites will simplify that to 3 toes. (but may have a small "thumb" higher up on the leg; you probably won't need to draw this unless it's an important feature of your design)
Hooves
Hooves are not paws, they should end pretty flatly on the ground and not have any bumps or toes.
Now if you'll allow me a tangent, here's something that allways bothered me:
Talons
Bird toes don't all face forward; think of like a claw machines grip and that's a bird's foot. 3 toes in front and one in the back seems to be more typical, but you can do 2 and 2. Webbed feet like a duck's don't allways need a back toe because they aren't gabbing things.
Frogs
Frog feet can be pretty unique so don't just draw paws. Frogs can have webbed feet or these recognizable designs have long toes with chubby ends.
As allways, please let me know if overlooked anything or can improve this tutorial in any way! Hope this helps!