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

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:

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:

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.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

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:

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.

Link to comment

Share this comment

Link to comment

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.

Similar Content

I'm having trouble wrapping my brain around what actually is the issue here, but the sampler I'm using in my volume renderer is only interpolating the 3D texture along the Y axis.
I roughly followed (and borrowed a lot of code from) this tutorial, but I'm using SlimDX and WPF: http://graphicsrunner.blogspot.com/2009/01/volume-rendering-101.html
Here's an example, showing voxel-ish artifacts on the X and Z axes, which are evidently not being interpolated:

...whereas on the Y axis it appears to be interpolating correctly:

If I disable any kind of interpolation in the sampler, the whole volume ends up looking voxel-ish / bad:

Thinking maybe my hardware didn't support 3D textures (even though it's modern?) I wrote a little trilinear interpolation function, and got the same results.
In the trilinear code, I calculate the position of the ray in grid coordinates, and use the fractional portion to do the lerps.
So I experimented by just painting the fractional part of the grid coordinate where a ray starts, onto my geometry cast to a float4. As expected, the Y axis looks good, as my input dataset has 30 layers. So I see a white => black fade 30 times:

However, my X and Z fractional values are strange. What I should be seeing is the same white => black fade 144 and 145 times, respectively. But what I get is this:

TLDR: is there a way to "capture" a constantbuffer in a command list (like the InstanceCount in DrawIndexedInstanced is captured) so i can update it before the command list is executed?
Hey,
I want to draw millions of objects and i use instancing to do so. My current implementation caches the matrix buffers, so I have a constantbuffer for each model-material combination. This is done so I don't have to rebuild my buffers each frame, because most of my scene is static, but can move at times. To update the constantbuffers I have another thread which creates command lists to update the constantbuffers and executes them on the immediate context. My render thread(s) also create command lists ahead of time to issue to the gpu when a new frame is needed. The matrix buffers are shared between multiple render threads.
The result is that when an object changes color, so it goes from one model-material buffer to another, it hides one frame and is visible at the next or is for one frame at a different location where an object was before. I speculate this is because the constantbuffer for matrices is updated immediately but the InstanceCount in the draw command list is not. This leads to matrices which contain old or uninitialized memory.
Is there a way to update my matrix constant buffers without stalling every renderthread and invalidating all render command lists?
regards

Hi there,
I'm working on an web RPG. This is not and action RPG.
The problem is I work full-time as a software developer and while I may get some code for the game done at work, I'm still a little short on time. So I'm looking for a second programmer to help me out. Please no beginners. I prefer working with someone who has built a full game (client, game server, web services, db)
Requirements:
Proficient in C#
Proficient in .Net Core 2.X
Experience with ASP.Net Core MVC
Experience with ASP.Net Core Web API
Experience with Unity 2018
Proficient in SQL and SQLite
Proficient in EntityFramework
Experience in AWS (RDS and EC2)
Experience with IIS
I'll handle the cost of any third-party services, domain names, etc. I'm just looking for a little help to get this game built in a reasonable amount of time. It will also be nice to bounce some ideas off each other.

If you are interested, please send me an email: addictcodercs@gmail.com

Hi everybody !
We are an indie startup called Darkstar Games !
We are just creating our first game called Greater powers, a novel type medieval fantasy TCG MMORPG with which we use unity.
We develop our games for Android, PC, iOS, and we have a software kit developer contract with Microsoft to adapt them to VR Microsoft HoloLens and VR Magic Leap in the future.
We are developing our own alpha for the Kickstarter campaign at the moment !
So we are actively searching for motivated programmers willing to take place in our project to build the engine we are creating of our own right now ! The game is coded in C# and any unity experience is greatly appreciated!
We collaborate to the startup worldwide remotely !
Programmers collaborating to the project such as building the alpha become shareholders and are hired in the start-up launch !
Here are some links about the project:
https://www.artstation.com/floriangionnane
https://www.facebook.com/DarkstarGamesCorp
https://connect.unity.com/p/games-greater-powers
If anyone interested, please send your resume to flosambora123@gmail.com
Have a nice day !

Hi there
I'm working on a simple racing game at the moment that I like to pitch as Thumper vs. Burnout vs. Journey.
In a nutshell it's a single player experience where the player races across a city in the dead of night with a time limit of one hour. The main mechanic being that driving well earns the ability to go faster, making things more challenging and opening up shortcuts and alternative routes, while mistakes (colliding with walls for example) make the player loses their highest speed and have to re-earn it.
I have a grand vision for an a pounding, dynamic sound track with elements being added to the music as the player goes faster and I'm looking for someone to collaborate with on the audio effects.
Here is a video of the early direction and feel of the project (it's moved on since, but this still gives a sense of the style):

Contact me if you're interested in the opportunity to work on an interesting unique soundscape with me.
Kind regards,
Jamie﻿﻿