Language…
6 users online: crocodileman94, Jordan, Maw, Rudi_Schrausch, Shiki_Makiro, underway - Guests: 267 - Bots: 339
Users: 64,795 (2,377 active)
Latest user: mathew

Tool: Sprite GFX Routine Creator (with GUI)

Well, Hi here everyone. It's finally C3 time. Before anything else, I'd like to point out, that I'm most likely gonna edit this post a bit over time, so taking a quick look again now and than might not be so bad.
Enough with that, it's time for the actual tool, that you've all been waiting for (or not... probably not)
I'd like to show off my little tool, that I've been working on for a couple of months now.
It's a tool with which one can create the graphics routine for custom Sprites using an easy to use GUI (Graphical User Interface)

Download
Mirror



FEATURES:

Well, as I said. This tool grants you the possibilety to create the graphics routine as an .asm file for any kind of sprite. That is to say, it doesn't matter how large the sprite is (8x8, 16x16, 32x32, or larger) or if it is a static, simple animated or one with complex animation.

To tool is operated simmiliar to Lunar Magic, you can paste with right click that is.

With the menu, you can enable/disable various settings to your personal liking, save and load your creations as .grc files and of course load paletts (.pal) or GFX files (.bin) to create your sprite with.
The tool creates an .asm file contining the graphics routine with everything needed. You just have to copy the whole code, paste it at the bottom of the .asm file of your sprite and jump to the routine with:
Code
JSR Grapahics




SOME SCREENS:






USAGE:

Simple Sprite

The tool is, as said, fairly easy to use.
Below you can see what it looks like if you open it for the first time.
Well, actually, that's what it'll always look like when opened...



After opening, there isn't much that you can/should do, except either opening an old project (#lm{open}) or starting a new one.
Starting a new is probably what you want to do right now, so you just go to "File" and click on "New". Alternatively, you can hit Ctrl+N

You'll be presented with this screen here, asking you to select a name for you sprite, as well as the tilesize

spelling will be fixed

The meaning of the name should be obvoius, the tilesize on the other hand might not be. So just to clear things up. The entire sprite, that is every frame of every animation, can only consist out of tiles having the selected tilesize.
(this might be changed for future updates but for now, you'll have to bear with it.
You can finish the setup by clicking on "Setup sprite"

BE CARFULL ABOUT THE NAME THOUGH!
In this tool, any name you enter will be like that forever, with no hope of later change.

After the setup, this is what the window should look like:


The 3 windows on the right, containing 2 GFX files and the palette, load by themself.
Of course, you can also use the Load GFX/Load Palette button, to load your own files if needed.
The tool itself however can use the 8 default sprite palettes and all the default sprite GFX combinations you'd find under this #lm{gfxby} in lunar magic.
In this tool however, you can simply use the dropbox in the palette section to choose your desired palette or hit #lm{sgfxby} in the menu to choose a default GFX combination.

Well, let's leave all the default stuff aside for now. Learning by doing is the fastest was, so let's just make a simple sprite for starters.

click on the lakitu head with the arrow pointing to the right on it . The programm will now ask you, what name you want to give this frame.
AGAIN, YOU CAN'T CHANGE NAMES, SO BE CAREFULL

For now, I'll make the same sprite as Iceguy/Nesquick Bunny in his Sprite Making Tutorial, that is... a blue mushroom.
I know, sounds very complex and interesting

So I'm gonna name my frame "BlueShroom"
Oh, and just in case this isn't clear, a "frame" is the "image" of your sprite, that is visiable at on point in time. (If you don't understand with this, you'll with later examples)

Anyway, after clicking "Create Frame", the frame should be added to your folder (window on the very right) and a tab with the same name should have been created. All in all, it should look like this:

I forgot to extand the "Test" folder with the little "+" symbol

Now, you might not have the grid yet. Just click on this symbol, and it will magicly appear.
This button is actually on of the most important ones. Mimimizing the window or certain other things can cause a few things (such as grid, palette and whatnot) to disappear.
However, one click on this button and they are all back, so keep that in mind.

Looking at the gird, you'll notice, that the centere has a red squere. This squere reprecents the original position of the sprite. It is, where there will be no X or Y displacement added.
The red squere is, where the "X" Sprite will late be (you knwo, the one you get when inserting custom sprites in lunar magic)

Now, how do we get our blue mushroom? Simple!
  • Just go to the groupbox labeled "Sprite GFX SP1/SP3"
  • select "Palette 3" from the dropbox
  • left-click on the left-upper (8x8) corner of the mushroom (it should now be surounded by a red squere)
  • make a right-click in the center of our editing window, where our tile should be placed


And e viola, we got our blue mushroom



We are almost done already. The only thing left to do is fix the YXPPCCCT format.
To do this, we simply rightclick and disselct "Use Second GFX Page".


^ To make things clear, you have to UNCHECK IT! I took the picture before clicking on it.

Now, all that's left is to compile our sprite either with the button or by hitting F5, or in the menu.

Depending on what you've set in the Settings, you'll be asked for the path you want the debugged .asm file to be in.

You'll be shown a preview of the code after debugging, you could directly copy it from there or from the created .asm file


Animated Sprite
Making and animated sprite is just as easy.
Following the trent. To show you how to make this, I'm just gonna make a simple Bob-omb. As I said, with this tool simple as well as complex sprites. A Bob-Omb will be enough to teach you the basics and once you know those, everything else is child's play.

Well, enough of the sweet talk, let's get into making it.
For starters, I'm gonna make a new project/sprite and call it Bob_Omb (god look at this creativety)
You already saw how to do this, so I'm not gonna bother with a screenshot for this one, alright?

After this, I'm gonna add two frames (using ), calling one "Walking_Left_1" and the other "Walking_Left_2"

The treeview now looks like this.


Now I'll click on #lm{sgfxby} and select "SP3=13, SP4=02 (Forest)"
You'll notice, that the graphics to your left changed to the forest ones.

With the tabs, we can change between editing "Walking_Left_1" and "Walking_Left_2". With what we've learned so far, I inserted the still-standing tile on frame_1 and the walking one on frame_2

It should look like this:


But this isn't animated yet. To get this done, we need to insert an animaton node (using ). After clicking on it, a little dialog will be braught up.

Here you have to enter a name for the animation (again, names can't be changed later on, so be carefull) as well as the frame counter to be used for the animation ($13/$14) and the animationspeed. That is, how long it takes for the next frame to be shown.
I decided to go with the settings you can see in the picture above.

In addition, you can also add some "additional code" which will be executed after the animation has been caried out (that means, after any frame of the animation has been displayed).
This is where ";Hallo" stands. So make sure not to write any garbage in there.

Clicking OK, creates our animation node. Now, all that's left to do is simply drag-drop the two frames into the animation (simply click on the frame, and pull it into the animation node)

Final result should look like this:


And we are done. This is a animated Bob Omb sprite. HOWEVER, it will always look to the left. Unless, you're not bothered by that, we'll have to add a right-walking animation (you probably figured with me anming everything "Left", didn't you).

To do so, we just repeat everything we did so far, except we replace all the "left" with "right".
Now, you might be asking yourself: "How do I make the Bob Omb tiles look to the right though?"
That though, is as simple as it can possibly be. You just rightlick the tile, after pasting it, and select "Flip X".


The end result should look like this:


And the treeview looking like this:


However, we cannot leave it like that. Now, the generated code, would just draw the first frame of the "Walking_Left" animation and than overwrite it with the first frame of the "Walking_Right" animation.

That's why, we'll have to add a condition!
Condition nodes make it so, that whatever frame/animation is under it will only be executed if all the conditions set in it, will be met. This part is the one requiring the most ASM knowledge in the entire tool. But do not worry, it's still not much.

After clicking on the icon, this window will be braught up:


I don't think I need to tell you anything about the condition name. The "RAM/ROM Addresse" part might be of more interest to you though.
In here, you have total freedome of what you're typing. That also means though, that you have to be carefull, not to make any mistakes.
For both, the "addresse" and the "value" you can use whatever you want. You can even use tables.

You might also want to use the logic (AND/ORA) gates. You can include those by checking "Use logic gate before comparing".
The gate will than be used on whatever you've written in the addresse field.

For example, if you have $15 in your addresse field, you could check and select AND #$03 , change the comparator to "!=" (meaning "NOT EQUAL") and see if it's uniqual to #$00
(this would check if the player is pushing left or right on the control pad)

Anyway, for our example we'll just use the same settings as the ones in the picture above.
Now, click on "Add>>" and you'll see, that the conidtion you've just setup will be writte in the "Condition List". Only the conditions written in this list will be checked. So when setting up a condition, never forget to hit the "Add>>" button.

After that you can click OK.


Now we've set up the condtion for the "walking left" animation, hoever we still need the one for the "walking right" one.
So just make a new condition with the same settings as before except:
  • A different name (that's a given isn't it)
  • set the comperator to "=" instead of "!="
  • And don't forget the "Add>>" button

Now, all that's left to do, is to drag drop the animation into the coresponding condition. The final reult should look like this:

Maybe some shorter names would have been wise

Now, all that's left is to compile with .
And like that, we've finished our animated sprite.



FUTURE PLANS:

If you're curious weather or not there will be any updates for this, than I can answer that with "probably yes".
It depens on how many people are going to use this. I don't really want to bother fixing things and/or adding new features for this if only 4 or 5 people use it at all.

As of now there's just 1.0



MENU

Main Menu
#lm{open}Open a saved project by loading a .grc file (duh)
#lm{save}Save your project as .grc file (even more duh)
Refresh/Reloade everything (this one is important!!!)
Change the current grid size
Hide all selected tiles (makes them invisible and they can no longer be moved or deleted
Unhide one or more tiles.
Displays a list of all tiles currently marked as hidden. You can select one or more tiles to unhide from this list.
Unhides ALL hidden tiles
Delete all selected tiles FOREVER!
#lm{pal}Change the backcolor of the working area
#lm{sgfxby}Load a combinaten of GFX like in Lunar Magic
Debug the project and create the asm code for the graphics routine
A little "About", not that important
Side Menu
Add a Frame-Node
Add an Animation-Node.
Makes all the frames underneath it to an animation.
Add a Condition-Node
You can set which RAM-Adresses need to have certain values for the frame or animation underneath it to be displayed
Move the selected node in the tree-view up once
Move the selected node in the tree-view down once
Delete all selected nodes and the nodes under the selected one FOREVER!




FAQ

QuestionAnswer
Will it blend?Probably not, unless you throw in your harddrive, than maybe

No real questions yet :P



CREDIT:

I actually made the tool entirely myself and with google research.
I guess I'll credit FuSoYa since I took some of the icons from Lunar Magic


yczedit: disabled layout to prevent table stretch
ultiedit: decreased size of images to prevent table stretch (I have a smaller monitor than ycz I guess)
wiiqedit: got rid of width height thing in images. i guess it is something in google chrome.
This is quite the interesting tool and I see potential in this. Having a GUI which can display sprite tiles and rearrange them, with code as the output can be quite handy. Especially the animation creation feature seems cool. Is there a way to 'preview' the animation?
My blog. I could post stuff now and then

My Assembly for the SNES tutorial (it's actually finished now!)
As someone who loves dickering with sprites and their graphics but who is not very skilled in asm, I can see a tool like this coming in very handy. I'm excited to try it out the next time I need to give a sprite an odd tilemap because I've decided that it would arbitrarily look better with graphics that I like. On behalf of everyone with weak asm skills, thank you!

[?] Miscellaneous Helpful Hints
If I moderated your hack, there was apparently a 90 percent chance it was rejected.
This tool will be very useful when I change some graphic routines in sprites for my hack. Thank you!
Originally posted by Ersanio
This is quite the interesting tool and I see potential in this. Having a GUI which can display sprite tiles and rearrange them, with code as the output can be quite handy. Especially the animation creation feature seems cool. Is there a way to 'preview' the animation?


As of now, you can't really preview them. I thought about it, but didn't really implement it yet. This is one of the things I'd add if I get large enough feedback.
What you could do though, is just jump back and forth between the tabs really fast :3

Originally posted by Vanya
Very cool! This will be a great help for those of us with limited asm skill and a time saver for those with experience. Cheers!


Thanks, but mind you. This tool only creates the graphics routine that you can jump to. You still have to code the basic behaviour of the sprite yourself.
Anime statistic on MyAnimeList:
400 animes completed ✓
6000 episodes completed ✓
100 Days completed ✓
... what even am I doing with my life?
Oh. My. God. I've been waiting for this since you announced it and here it is. I've never been able to understand graphic routines. I can see this being really, really useful for creating big sprites or sprites with more animation frames. I just have no idea what to say other than thank you.

Also, this will come in real handy when I code the final boss for my hack.
So, let's say I wish to give the Ultimate Noob Boss a more complex animation. It would work, like giving it a new frame every time it gets hurt or maybe when it launches a sprite at the player?
Your layout has been removed.
Animated Sprite Tutorial Added
Read first post

Originally posted by metalgearhunter
So, let's say I wish to give the Ultimate Noob Boss a more complex animation. It would work, like giving it a new frame every time it gets hurt or maybe when it launches a sprite at the player?


Yes, you could do that. You could use the "condition" function to check for the value of the RAM Addresse holding the HP of the boss.

You can also give it an own frame/animation for throwing sprites, you just need some kind of flag addresse to build a condition with.
Anime statistic on MyAnimeList:
400 animes completed ✓
6000 episodes completed ✓
100 Days completed ✓
... what even am I doing with my life?
What if one doesn't know how to build flag addresses? Or does the tool allow you to easily create some?
Your layout has been removed.
The GUI looks well thought out, and I have to commend you on the effort you've put into this project. Provided the codes work (which I haven't actually tested yet), this tool will make the troublesome task of sprite creation a much easier one.

In general, however, having opened and played aaround with the program, things seem a little... messy to me. The spelling errors are too many for comfort, and the generated code could definitely use some cleaning up and unification. I'm also not sure why some GUI elements would fail to load and have to be refreshed manually (though I'd likely run into the same problems if I were to program that).

As I said, though, kudos for taking the time to make a tool like that.


 
Originally posted by WhiteYoshiEgg
In general, however, having opened and played aaround with the program, things seem a little... messy to me. The spelling errors are too many for comfort, and the generated code could definitely use some cleaning up and unification. I'm also not sure why some GUI elements would fail to load and have to be refreshed manually (though


Thanks for the review, no really.

I'm not sure though, what you mean with messy.
I expected some spelling errors, I'm no native after all. If you, or anyone else, finds any spelling or grammer mistakes, please point them out to me, I'll see them fixed.
If there is a problem with the overall design of the tool, please point that out as well, seeing as I had no feedback but my own

The generated code, of course, is not that beautiful. If I were to handcode a graphics routine, I wouldn't make it like that. This code however, is generated and I'd like you to keep that in mind.
No offense here, but my algorithm has to adapt itself to whatever crazy shenanigan the user might make in the treefiew. The way it is now, it does that.

About the reload button... This one really annoys me too. I don't know if you know C#, but I used the System.Drawing library to make the graphics and the pallete to the left and the grid for the working space. Unfortunatelly, I only found out later that those disappear if minized or moved out of the desktop boundry.
Now, of course this could be fixed but I didn't want to bother with fixing stuff, that already works, when there was other stuff that didn't.
If I get enough feetback, I'll fix that in upcomming updates as well (except the grid).

Originally posted by metalgearhunter
What if one doesn't know how to build flag addresses? Or does the tool allow you to easily create some?


Flag Addresse is just a regulare RAM addresse, which will be set, when the boss throws sprites. For example, if the boss throws a Bob-Omb every 4 seconds, than there is probably some time in work, which is decreased by one every frame. Uppon hitting zero, the boss throws the sprite.
In this case, the flag would be the timer if it's zero or some RAM addresse which get's set uppon it hitting zero.
Anime statistic on MyAnimeList:
400 animes completed ✓
6000 episodes completed ✓
100 Days completed ✓
... what even am I doing with my life?
This here solves the largest obstacle I had when it came to programming sprites (other than crapping 8 -> 16 bit mode changes).

Thank you so very much, I hope you win something for this.
I wonder what a HFD opcode would do in ASM...

Extras



I should have something witty to put here (even if it's just to update dated info), shouldn't I?

Advertising Space

This is a nice tool shows a lot of promise, but it would be more beneficial for the code it generates to be Romi's Sprite Tool ready (uses xkas) instead of Mikeyk's (uses Trasm), especially when the former is much more commonly used. (dcb -> db, LDA.W -> LDA.w, etc)

Originally posted by TLMB
This here solves the largest obstacle I had when it came to programming sprites (other than crapping 8 -> 16 bit mode changes).

Thank you so very much, I hope you win something for this.


I'd be glad if that were the case :3 Though many other tools were submited so I'm not expectiong too much, there's a saying though "Hope dies last" (at least there is that one in german...)

Originally posted by MrDeePay
This is a nice tool shows a lot of promise, but it would be more beneficial for the code it generates to be Romi's Sprite Tool ready (uses xkas) instead of Mikeyk's (uses Trasm), especially when the former is much more commonly used. (dcb -> db, LDA.W -> LDA.w, etc)


I was actually planing on including an option where one can choose between xkas or TRASM when compiling in the settings.
However someone pointed out, that there is a tool, which can convert a TRASM spritecode into xkas usable one. So I kinda pushed that on my "to be done" list
Anime statistic on MyAnimeList:
400 animes completed ✓
6000 episodes completed ✓
100 Days completed ✓
... what even am I doing with my life?

This is definitely a really cool tool and I see this being very useful. Great job.
Layout by LDA during C3.