Jump to content
  • Advertisement
Sign in to follow this  
  • entries
    7
  • comments
    5
  • views
    826

Project: 13 RONIN

13 RONIN - DevLog #4 - Say hello to Ester!

ERASERHEAD STUDIO

1041 views

Banner950x297

Ester (Eraserhead Animation Editor) is a new tool I've build that will make it easier for me to describe what different animations a spritesheet contains and their different characteristics e.g. how long each frame should be displayed. I can then export the description, as a json-file, and then together with the spritesheet load it into the game and use it to set up my "in game" animations.

This is how Ester looks with a spritesheet loaded and one animation created:  
ester.thumb.png.0a33fc35b599b3fc6f40919d930f042b.png

I'll easily admit that building this tool has been a detour that's taken far too much time from any actual game development, but please let me give you the background.

 

Background

13 RONIN is a pixel-art game with animations based on spritesheets, just like the one below:
Animation_Demo_Spritesheet.thumb.png.7697b6db5af85a926bf570803714a78b.png

The spritesheet together with a json-file describing the sheet are read into the game and turned into different animations. A process that works quite well.
Draw_cropped.gif.2dc83ea18fc755623d29b5846c9e2171.gif  
This is the "Draw"-animation beginning at row 3 and column 1 as described by the json-file below. In this example each frame is displayed for 150 milliseconds

Draw2_cropped.gif.f707155d96c8b66bd1085ff198af9f49.gif
Same animation as above but with individual frame times

 

The description file

The description file started out quite small, but since I prefer to hard-code as few things as possible and also want room for adjustment, the file grew.

This is a file describing the "Draw"-animation starting at row 3 and column 1:

    {
        // General description of the spritesheet
        "spritesheet": { 
            
            // Size of sheet in columns and rows, 
            // where each cell is a sprite
            "gridSize": { 
                width: 13,    // The sheet has a size of 13 columns 
                height: 5    // and 5 rows of sprites
             }
            
            // Size of a sprite in pixels
            "spriteSize": { 
                width: 160,        // Each sprite has a size 
                height: 160        // of 160x160 pixels
            }
        }
    
        // Default values for animation frames
        "frameDefaults": {
        
            // Intended for describing hit-boxes and such. This
            // example would give a hitbox located at same position
            // as the sprite and of the same size
            "margin": { 
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            },
            
            // Offset value used when positioning and drawing
            // sprites.
            "offset": { 
                x: 10,    // The sprites should be drawn 10 pixels
                y: 0    // to the right of the destination point
            }
            
            // Frame duration. Display each frame 200 milliseconds
            // before advancing to next frame
            "duration": 200
        },
        
        // Animations found in the spritesheet
        "animations": [
    
            // An animation
            {
                // Name used for identification
                "name": "Draw",        
    
                // OPTIONAL. Will override default setting
                "offset": { 
                    x: 0,    // No offset for this animation
                    y: 0
                },     
                
                // OPTIONAL. Will override default setting
                "margin": { 
                    "top": 0,
                    "right": 0,
                    "bottom": 0,
                    "left": 0
                },
                
                // OPTIONAL. Will override default setting.
                // Frame duration for this animation is 150
                // milliseconds
                "duration": 150,
                                
                // Start location in grid                
                "index": { 
                    x: 0,    // This animation begins with image at
                    y: 2    // row 3 and column 1
                },
                
                // This animation contains 13 frames starting
                // at "index"
                "frameCount": 13,
                
                // OPTIONAL. Using this property it's possible to
                // set frame duration for individual frames
                "frames": [    
                ]
            }
        ]
    }

Writing and maintaining the description files is very tedious and it's also very easy to make mistakes. Remember that the file above only contains one animation and that is an animation without any individual frame duration times. To get the animation seen in the second example above following "frames"-section has to be added:

    "frames": [
        {
            "index": 0,
            "duration": 200
        },
        {
            "index": 1,
            "duration": 175
        },
        {
            "index": 2,
            "duration": 175
        },
        {
            "index": 3,
            "duration": 200
        },                    
        {
            "index": 4,
            "duration": 300
        },            
        {
            "index": 5,
            "duration": 175
        },        
        {
            "index": 10,
            "duration": 175
        },
        {
            "index": 11,
            "duration": 175
        },
        {
            "index": 12,
            "duration": 1000
        }                        
    ]

We now have 3 pages of json and only one animation described. I grew tired of this and felt a need for a tool to assist me in describing and tuning the animations as well as automatically generating the json. Together with a desire to improve my skills as a front-end developer I started the development of Ester.

 

Tech

Ester is an Electron based application using React as UI-framework. I'm not really a front-end developer and since this isn't the main focus of the blog I won't dwell and deeper into the subject, but for anyone interested in trying out these technologies, there are a lot of posts written on the subject, so just use your magic friend google and you'll get lucky.

And please feel free to browse or clone the Ester-repo. I think the project- and component-structure is quite good, but I'm sure there could be a lot of improvements made on the JavaScript- and CSS-code. If you find something really horrific please let me know.

 

Using Ester

If you would like to give Ester a try, please visit my BitBucket account for further instructions. 

If you find Ester useful, run into bugs or have ideas for new features, please don't hesitate from letting me know.

Please be aware that this is not a finished product, but something I'm working on as part of the game development project. Fatal crashes might happen and breaking changes be introduced.

You're also very welcome to clone and extend the product yourself.

Happy coding!  
/jan.

 

NOTE. As always, everything I show, share or write about here is work under progress and subject to change.



3 Comments


Recommended Comments

Hello Ester! ;)

Looks pretty cool, and reasonably simple to work with.

Share this comment


Link to comment

Hello Ester! ;)

Looks pretty cool, and reasonably simple to work with.

Share this comment


Link to comment

Thanks for your nice words!

I know the UI could be better, but I felt a little bit short of time, and this was kind of good enough 🙂

As I will be focusing on creating animations during the summer I'll fix bugs and glitches as I found then and hopefully have a release candidate of Ester ready in the fall. By then I'll probably also have an .exe or installable version ready.

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By Nilmani Gautam
      In this video we will learn to select the object an perform action to the object
       
    • By Vandallord
      Link: https://www.kongregate.com/games/Vandallord/idle-stone-history

      A wicked witch turned the main hero into the stone, you need to find a way to break the spell.
      INSTRUCTIONS
      Click on the objects and they will open.
      Click on the stone and its skill to attack the animals will grow as well as a the losses from clicking on animals.
      Click on the river to improve the function to manage time and clicks on the animals will be more precise.
      Click on the tree and it will give you things from animals and the level of luck will grow which give you an opportunity to Harder hits.
      The higher the level of monsters the more animal can visit the stone and give presents which are essential to make a portion.
      Screenshots:
       
    • By Feirx
      Current Project
      -Action/Adventure/Puzzle
      -Over the Shoulder/3rd person
      -Steampunk/Medieval aesthetic
      -Co-op (2 Player story line)
      Calling all content creators and programmers of any skill and experience level to join the team. Please be at least 16+ years of age. Artist(s) NEEDED (Unspecific; 3D Models, Concept Art, Animation, Ads, Graphic Design, ...)*
      *Artist(s), We currently do not have any art styles set. We are looking for an original artist to set the art style for our production. This is a big opportunity.

      Feel free to ask questions. I am super excited to get started and meet some new people.

      Comment or message me for Discord server invitation.
    • By ERASERHEAD STUDIO
      A new entry in the devlog for 13 Ronin, a retro 2d samurai fighting game, this time it's about implementing the logic for the computer player.
      Happy coding!
      https://www.eraserheadstudio.com
       
       
    • By horror_man
      Hello, I'm currently searching for a talented and passionate programmer to create a small but great horror game that would take around 3 months to be done.
       
      About the game: The game would be a sci-fi/post-apocalyptic survival horror 3D game with FPS (First person shooter) mechanics and an original setting and story based in a book (which I'm writing) scene, where a group of prisoners are left behind in an abandoned underground facility. It would play similar to Dead Space combined with Penumbra and SCP: Secret Laboratory, with the option of playing solo or multiplayer.
       
      Engine that'd be used to create the game: Unity
       
      About me: I'm a music composer with 4 years of experience and I'm fairly new in this game development world, and I'm currently leading the team that'd be creating this beautiful and horrifying game. I decided that making the book which I'm writing into a game would be really cool, and I got more motivated about doing so some time ago when I got a bunch of expensive Unity assets for a very low price. However, I researched about how to do things right in game development so I reduced the scope of it as much as I could so that's why this game is really based in a scene of the book and not the entire thing (and also that's why it would take 3 months). Also I'm currently learning how to use Unity and how to model things with Blender.
       
      Our team right now consists of: Me (Game Designer, Creator, Music Composer, Writer), 3 3D Modelers, 1 Sound Effect Designer, 1 Concept Artist and 1 Programmer.
       
      Who am I looking for:
      - A programmer that's experienced in C# and with Unity.
       
      Right now the game is very early in its development (GDD is completed and all 3D Items, Music and Sound Effects are completed).
       
      If you are interested in joining, contributing or have questions about the project then let's talk. You can message me in Discord: world_creator#9524
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!