Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Work in Progress / Current Project - a Retro Fantasy Console Inspired Sprite Editor

Author
Message
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 15th May 2020 04:43 Edited at: 20th May 2020 01:44
Link
Hello!


Update on May 19th... now at version 1.0


I will need to go through here and clean up some of these WIP images... no sense in cluttering up the thread with all of them especially the giant ones. Although it does show development from early on til now.



Yes, I have been away for quite a while.
Since I was last active here... I spent some time working with Unity again and did a little 3D game project.
Then I purchased an Arduboy game console. It's pretty cool.... a whopping 128x128 black and white screen and very limited ram space.
I created one game for it named Cattle Quest.
It still wasn't exactly what I was looking for. So I then purchased PICO-8 which I had been looking at for years.
I made one game in it (published on itch but still private).

I decided what I need to do is create some tools that are solely for the purpose of making content that is very easy to use with App Game Kit.

As in the tools need to be simple and work well. And the resulting files will be something dead easy to work with in AppGameKit programs.

My interest is in ultra low resolution graphics. Mainly because (1) I really like the look of simple "chunky" imagery and (2) working in ultra low rez allows interesting content to be created faster... so the sprite editor will be built specifically with that in mind. It will support creating images at 8x8, 16x16 (and possibly 32x32).

A few days ago I started on the Sprite Editor...

The upper left is the grid where you draw the image.
In the middle you can see the current color assigned to the Left and Right mouse buttons.
Below that is the brush size.... 1x1, 2x2, 3x3 and 4x4.
Below that are buttons for Clear Image, Copy Image and Paste Image.
Finally, below that is a 128x128 scaled up view of the current image being edited.
To the upper right is the palette where colors can be selected.
At the bottom is the full grid of images for the sprite sheet. It supports 240 different images per sheet.


I will probably add at least 2 buttons for Sheet 1 and Sheet 2 supporting 2 different sheets and up to 480 different images.
BUT I am not sure because really one sheet is all that needs to be worked on at a time anyway.
I still need to add support for saving and loading but that will be very simple.

This next gif just shows working with the Images grid and using the copy and paste buttons...



This shows using the Clear Image button as well as pressing space to toggle the view to show the current sprite sheet and pressing space to toggle back to the main screen again...
Back to top
Profile PM
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 16th May 2020 00:30 Edited at: 16th May 2020 00:37
Link
Looking awesome!
Have a look at aesprite for ideas

Attachments

Login to view attachments
Back to top
Profile PM
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 16th May 2020 00:52 Edited at: 16th May 2020 19:17
Link
Hey Blink! Good to see you are still here.

----------------

A lot of my focus with this sprite editor is based on working with a few different fantasy consoles over the past 2 months (PICO-8, LIKO-12 and TIC-80).

Over the years, I've often thought having so much available these days (ram, graphics, sounds, music, programming patterns, etc) makes game dev harder instead of easier. By that I mean it makes it way too easy to "get lost in a black hole" spending time working on things while getting only a minimal (or even no) real progress made on the actual game itself. So called "busy work".

I found working with the fantasy consoles refreshing from the simple api to the simple yet very usable editors for creating images, tile maps, sound fx and music to the constraints themselves such as 16-color palettes.
Gone is the time spent messing around with colors... the colors are already defined and developers simply use them. The simplicity and having all of the tools readily available and the output of those tools so easy to work with from the program code provides a massive increase in development efficiency.

BUT... I do think those fantasy consoles are a little too limited (especially the code space available and to a lesser degree the 16-color palette) so that is why I decided the best thing is to use App Game Kit and create simple easy-to-use tools such as this sprite editor.

So, I have decided to go with 24-color palettes. Only one can be used but there will be 10 different palettes available.

In Palette #1, the first 16 colors are the 16-color PICO-8 palette and the last 8 colors are the DB8 palette (DawnBringer's 8 color palette).

Palettes #2, #3 and #4 come from 24-color palettes found at https://lospec.com/palette-list

Palette #5 is based on the NES 64- (really 54) color palette. I reduced it down to 24 colors.
Palette #6 is based on the Atari 2600's 128-color palette. I reduced it down to 24 colors.

Palettes #7, #8, #9 and #10 are palettes I generated with a simple algorithm I wrote feeding in rgb weight values.

Back to top
Profile PM
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 16th May 2020 23:08
Link
Very interesting. I find creating a palette very difficult.
Back to top
Profile PM
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 17th May 2020 00:12 Edited at: 17th May 2020 00:16
Link
I have reached the point of it being very usable. Next session will be focused on the saving and loading.

My plan at this point is just to make these dev tools and release them here to the community in source code form.
I made this so it relies on no external media and the code is all in a single file main.agc ... this way anyone with AppGameKit should be able to load and build it whether they are on Windows, MAC or Linux.
Of course, that also means anyone can edit the palettes that are defined in code as they see fit so they can create their own series of 24-color palettes or define them based on palettes available open source online.
My main purpose here is to build these for myself and to help the community so doing low rez 2D (at least for now) game development is easier and faster for us. Once this editor is complete I will move on to the Map Editor.

The buttons use a RectangleButton system I implemented... it supports normal push buttons and Selected Buttons within button groups.
For example, Clear Image, Copy Image and Paste Image are normal click buttons.
The Brush palette, Draw, Fill and the the sprite size buttons are buttons defined to be within a group meaning selecting one of them automatically deselects the others.

So maybe that will be useful to someone as well.

Anyway... this update I added drawing modes... which are Draw and Fill. I wasn't going to bother implementing a paint algorithm but I keep testing this for usability and noticed sometimes I wished I could just click once to change the color of a region... so I added that.

I also added buttons to change between the 3 supported sprite sizes 8x8 ... 16x16 ... 32x32

And this very poor quality gif shows the current state...
Back to top
Profile PM
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 17th May 2020 05:44
Link
I must say I had forgot just how easy App Game Kit is to work with. It's definitely a rapid development tool.

This sprite editor is nearly done now.

I am focusing on polishing it up now.

I didn't like it only allowing 240 images... just seemed odd. So I adjusted the images grid size and added two buttons to select the top half and bottom half of the sprite sheet.
This is much better. Each half allows editing of 128 images. The resulting sprite sheet contains 256 images. For a sheet with 8x8 sprites the sheet image will be 128x128, for 16x16 it will be 256x256 and for 32x32 it will be 512x512.


I wanted to improve everything and make it all solid. The sprite size changing works much better now.


And I added a CLEAR ALL IMAGES button. And for this I needed to update my button control system again. But it works very well I think.


Oh! And I added saving and loading the SpriteSheetProject. I still need to save out the actual spritesheet image but that is so straightforward it will take seconds to implement.

Tomorrow I hope to finish this off. I want to get on to the map editor but I kind of think I should actually use this to make a very simple demo game just to put it to the test.
Back to top
Profile PM
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 18th May 2020 01:28
Link
Okay... the Sprite Editor is now at version 0.9... completely usable but still needs some bits for user friendliness such as an undo buffer for the last one or two actions to handle the inevitable "OH NO!!" moments.

The gifs are very low quality so here is a screenshot...


The Sprite Editor now has 10 buttons below the palette grid to provide a mouse GUI way of selecting then rather than cycling via pressing the P key (although can still use that too).
I also added Image Flipping (FH for horizontally and FV for vertically) and 90-Degree Rotation (RL for rotate left / counterclockwise and RR for rotate right / clockwise).

Back to top
Profile PM
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 18th May 2020 21:45
Link
Looking very nice matey
Back to top
Profile PM
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 19th May 2020 04:07 Edited at: 19th May 2020 04:46
Link
Thanks blink!

----------

I've done some more testing and slight improvements here and there. And I implemented a simple undo buffer. That button is on the bottom of the Sprite Editor display OOPS - UNDO.



I also put it to the test using it to make all of the images for a tiny shmup game. So the images you see in the screenshot above were saved from the Sprite Editor to a sprite sheet.
I simply loaded that sprite sheet in and made this shmup in AGK. It was all very straightforward and very fast to work with.

One thing I didn't care for with my previous AppGameKit development was using sub images text file. It just seemed like a very tedious thing. Originally, I was thinking of having the Sprite Editor generate that sub images file when saving the sprite sheet.

But I thought there must be another way... and there is!

AGK allows setting the uv points for each sprite to use when drawing the image it is using.

So this is how I will do all of my 2D game dev in AppGameKit from now on. No need to mess with sub images text files!

I wrote a function SetSpriteUVFrame(sprite, frame#) and all I do is set every sprite to use the single sprite sheet image.
Then I call SetSpriteUVFrame and it sets the uv to correctly display only that frame contained within the sprite sheet.

Now there is a SetSpriteAnimation function in the AppGameKit api but I wasn't sure exactly what that is doing. I had the impression it must be generating an entire array of uvs for an image for each sprite using the SetSpriteAnimation command instead of having a list of uvs only for a single image. Of course, I don't know for sure. But since one could have 20 sprites using the same image and same set of 10 frames so using SetSpriteAnimation might actually be allocating a list of 10 uvs for each of those 20 sprites. By simply creating an array of UVs one time for a given image it doesn't matter if 1,000 sprites use the same 10 frames because the actual image data is completely separate from the sprites. Again, I don't know for sure what the AppGameKit way is doing that was just my thinking and why I made my own uv frame system. Of course it is 2020 so even if the list of uvs are duplicated across sprites it is probably not a big deal. lol

This is the shmup experiment I made using the Sprite Editor and the UV method.

You know I really like low rez... this is 256x144 resolution (the gif is actually 960x540)... super easy in AppGameKit just use a 1280x720 screen and SetViewZoom(5)... done!


This is all very close to being done now. The player cannot be destroyed yet and I may add that.

Not sure if anyone else is interested in this work but I think I should be able to release the Editor and the example shmup project tomorrow.
Back to top
Profile PM
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 19th May 2020 23:42
Link
Brilliant! Those are some lovely chunky graphics and the palette really makes them pop!
Back to top
Profile PM
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 20th May 2020 01:42 Edited at: 20th May 2020 06:31
Link
Hey thanks blink! That was actually just something thrown together to test the sprite editor. And it really passed the test with flying colors if I do say so myself!
You're right too... one of the key points with this is having the 10 different palettes built-in so I (and anyone else) can get straight to graphics creation knowing each palette should be well suited for creating a pleasing aesthetic although some palettes will fit certain games or atmospheres more than others of course.

-----------------------

ALRIGHT! I am ready to call this done. I tidied things up a bit more, added help screens and added the confirmation on the save and load GUIs.





And I did spend a little time on the shmup demo game I made to test the sprite editor.


I think I will release this on itch.io first and after I get that done I will release the source files here. A friend told me I should sell it. That was never the intention but maybe I will do the "pay what you want" for the heck of it.
Back to top
Profile PM
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 21st May 2020 03:17
Link
Even though it was just a sample game to test the sprite editor... a simple black background is boring.

Updated from the void of space to flying over a river...


And that is enough for the simple game project. I need to get this stuff released!
Back to top
Profile PM
Mambazo
18
Years of Service
User Offline
Joined: 11th Dec 2005
Location:
Posted: 21st May 2020 11:26
Link
Nice work!
If at first you don't succeed, sky-diving isn't for you.
Back to top
Profile PM Website
GarBenjamin
AGK Developer
7
Years of Service
User Offline
Joined: 30th Nov 2016
Location: USA
Posted: 25th May 2020 21:08 Edited at: 29th Jun 2020 05:43
Link
Thanks Mambazo!

This has grown into a bigger project. Basically I had intended it as one piece of a bigger system for rapid development of 2D retro style games.

I made another thread about the AGK-G2D Fantasy Computer System on the AppGameKit forums over here
Back to top
Profile PM
Chris Tate
DBPro Master
16
Years of Service
User Offline
Joined: 29th Aug 2008
Location: London, England
Posted: 1st Jul 2020 15:15
Link
With admiration this looks like a splendid tool that is to become a charm to use. Great for being on the go; 'Gotta get them sprites done' instead of swiping away on Instagram.

It is helpful for you to have provided a refined colour palette sets because it can get tedious when having to select from a full range of mostly irrelevant colours for a particular job.
Back to top
Profile PM Email Website
Back to top

Login to post a reply

Server time is: 2024-11-16 22:39:43
Your offset time is: 2024-11-16 22:39:43