Jump to content
  • Advertisement

ERASERHEAD STUDIO

Member
  • Content count

    11
  • Joined

  • Last visited

Community Reputation

1 Neutral

About ERASERHEAD STUDIO

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi everyone! Just want to everyone to know that I have published DevLog #4 for my upcoming game 13 RONIN, a pixel-art samurai fighter in the spirit of classics like The way of the exploding fist and Barbarian. In DevLog #4 I'm writing about my new tool Ester. It's an editor for tuning spritesheet animations and generating json-files describing the animations. For anyone doing spritesheet animations it might be worth checking out. Happy coding! jan.
  2. ERASERHEAD STUDIO

    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: "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. ERASERHEAD STUDIO

    13 RONIN

    13 RONIN 13 RONIN is a 2D pixel art samurai sword fighting game inspired by old japanese samurai movies and 8-bit classics such as Barbarian and The Way Of The Exploding Fist. Your mission as a noble samurai is to defeat 13 renegade ronin and their murderous leader. Although done in low resolution pixel art the game will have an somewhat “arty” aesthetic in black and white mixed with details in color. Who am I? I’m a 40 year old Swede with about 17 years of professional experience working as a .Net developer. To make a game has been a dream ever since I as a child learned to write a “guess a number”-game on my Commodore 64. Now I’m trying to fulfill that dream. I’m the sole developer behind this project and I’m doing it as an sparetime project so please be patient. Status The main structure of the game and basic gameplay, based on placeholder graphics, is done and I’m currently switching between drawing assets and coding graphic effects like rain and lightning. News I’m quit often updating my dev blog with short posts about the progress I make. A post can contain a new animation, a sound effect, a code sample or something else related to the making of 13 RONIN. On this and other forums I will post updates, that are longer than those on my site, but not as often. To help and inspire the community I will share tools and parts of the code on my BitBucket-page. /jan. https://www.eraserheadstudio.com/
  4. ERASERHEAD STUDIO

    13 RONIN - DevLog #3 - The movie analogy

    Here in Stockholm it's been unusually hot and dry for this season of the year and I'm quite convinced that the pharmacies have broken a new record in anti-histamine sales. Last night we were finally blessed with thunder and rain and today the air is cool and nice and the pollen gone. I've sneezed quite a lot the last couple of weeks but I've also done some coding. My primary focus has been building an animation framework for use in intro, cutscenes and background movements and coding an editor for animating sprites. Ester (Eraserhead animation editor) will be the subject of an upcoming dev log and this dev log will be about the animation framework. This is an animation demo and not part of the game Animation framework The purpose of the animation framework is to ease setting up and running sequences of multiple animations. The need for this arose with my desire to create an animated intro with objects moving in different patterns. But I will also use this framework for pre- and post-fight-animations as well as background animations. When finished the animation framework will contain: Support for spritesheet-based animations Builders for setting up animations by code Simple script-language for setting up scenes Loader and parser for script-files In addition to this, I will probably build an editor to use with the script-language for trying out and previewing animations. The movie analogy When designing and naming the building blocks of the framework I've taken a "movie scene"-approach and used a nomenclature found in movie scripts. That gave me following main classes: Scene Actor Action Animation "Animation" might not be a name known from movie scripts, but I kept the name to encourage its use outside of the "animated scene" context. As long as you keep track of calling the update- and draw-methods both actors and animations can be used without a scene. A simplified diagram describing the relationships between the classes Scene Think of a scene just the like a scene in a movie or a theater. It's a "room" where something takes place. A scene can have a name, background image and any number of actors. You draw it on the screen by calling its Draw-method. Background for our demo Actor Unlike in a movie or theater, an actor is not only characters but all things living or dead that has it's own image and is separate from the background e.g. character, bullets flying, rising sun. An actor has a location, it can be visible or hidden, and has a collection of actions to perform that can be looped when done. An actor also has an animation as it's current "gesture". Action Just like in the movies, an action is something an actor does, i.e. an actor will act according to its actions. Some of the available actions are: Show - draw animation Hide - don't draw animation SetPosition - set position of actor BasicMove - move actor to destination with given velocity and acceleration ChangeGesture - change animation Animation An animation is based on a spritesheet, start index in the sheet and a frame count. This determines how the actor will appear on the screen. A note on naming. The property for the animation is named Gesture in the Actor-class, that is a choice I made to keep the movie analogy consistent. I've named the class Animation to encourage use of it outside of the "animated scene"-context. Our famous actor doing one of it's gestures How to To create the scene in the demo above following steps have to be made: Load content Create an animation sheet configuration Create an animation factory Create an actor Create the scene Start the scene Draw scene Step 1 - 5 can all be done in the Initialize-method of the Game-class. Step 1 - Load content As a first step we load background- and spritesheet-images as textures. var background = Content.Load<Texture2D>("Animation_demo_background"); var texture = Content.Load<Texture2D>("Animation_demo_spritesheet"); The demo spritesheet Step 2 - Create animation sheet configuration Then we create a configuration describing animations found in the spritesheet. This object will later be used as argument to our animation factory. var sheetConf = AnimSheetConfigBuilder .Begin() .Name("Samurai gestures") .GridSize(new Point(13, 4)) .SpriteSize(new Point(160, 160)) .DefaultFrameDuration(150) .AddAnimation("Idle", new Point(0, 0), 6) .AddAnimation("Bow", new Point(0, 3), 11) .AddAnimation("Draw", new Point(0, 2), 13) .AddAnimation("Walk wo sword", new Point(0, 1), 8) .AddAnimation("Walk w sword", new Point(0, 4), 8) .Build(); We create a configuration describing a spritesheet with a size of 13 columns and 4 rows where each sprite has a size of 160 x 160 pixels. The spritesheet is called "Samurai gestures" and default frame duration for all animations in this sheet is 150 milliseconds. It contains four different animations. Note that all names must be unique. Step 3 - Create animation factory When the sheet config is ready this step is easy. Call the AnimationFactory-constructor passing in the spritesheet texture and the sheet configuration. Our factory is ready. var animFactory = new AnimationFactory(texture, sheetConf); Step 4 - Create actor Just as it takes some time for an actor to prepare for a big movie role, it takes some coding for us to set up the actor for our scene. var actor = ActorBuilder .Begin(animFactory) .Actions( actionBuilder => { return actionBuilder .Hide() .SetPosition(new Point(-120, -4)) .ChangeAnimation("Walk wo sword") .LoopAnimation() .Show() .Move(new Point(-60, -4), 0.1f, 0.0f) .ChangeAnimation("Bow") .WaitForAnimation() .ChangeAnimation("Walk wo sword") .LoopAnimation() .Move(new Point(110, -4), 0.1f, 0.0f) .ChangeAnimation("Draw") .WaitForAnimation() .ChangeAnimation("Idle") .WaitForAnimation() .ChangeAnimation("Walk w sword") .LoopAnimation() .Move(new Point(312, -4), 0.1f, 0.0f) .Build(); }) .Build(); actor.Loop = true; Here we use the ActorBuilder in combination with the ActionBuilder to create the actor and the collection of actions to perform. All these actions will be performed in sequence and when done the actions will, thanks to the "actor.Loop = true;" statement, be restarted. Step 5 - Create scene As a last building step we tie everything together by creating our scene, and for this, we also have a dedicated builder. _scene = SceneBuilder .CreateScene(animFactory) .Name("Demo") .Background(background) .AddActor(actor) .Build(); Our scene is now ready. Step 6 - Start scene If you run the project you'll find that nothing happens. That's because we haven't included the scene in the game loop yet. Add following lines to the Update-method: if (_scene.State == State.NotStarted) _scene.Start(); _scene.Update(gameTime); Step 7 - Draw scene Still, nothing happens. It's because we're still not drawing the scene. And following line to the Draw-method: _scene.Draw(_spriteBatch, Vector2.Zero); Run the project and enjoy! The future You're as always more than welcome to download the code and use it in any way you like, but since it's still early days please regard it more as inspiration than a working framework. I'm sure there are lots of bugs. And changes will come. If not discouraged, visit my BitBucket-account and get going, or wait for an announcement of a more stable version. Please visit Eraserhead Studio for more. Happy coding! /jan. NOTE. As always, everything I publish here or on any other site is work in progress and subject to change.
  5. ERASERHEAD STUDIO

    13 RONIN - DevLog #2 - Lightning

    You're absolutely right. I haven't had much content to show, but hopefully I get a lot of drawing done during the summer. Thanks for the feedback, jan.
  6. ERASERHEAD STUDIO

    13 RONIN - DevLog #2 - Lightning

    Ok, It hasn't been a full month since my first post here, but I still think it's time for an update, and from now on I plan to post a major news article at the beginning of every month containing a summary of what I've been up to lately. For anyone interested in more I recommend my blog at Eraserhead Studio where you can find random news, animations, images, sound and code that hopefully can help you out in your own game project. So, what have I been up to lately? Well, due to an aching hand, the result of too much asset drawing, I've let my hand rest from the tablet and instead focused on doing some proper coding. The result is two quite flexible engines: one for rain and the other one for lightning. Rain Since a few of the levels will take place in bad weather it's important for me to be able to generate some good looking rain. I talked about my rain engine already in the last post but since then I've fixed a few bugs, added some properties and posted a higher quality demonstration video on YouTube. The engine has a lot of settings, all which will help me make a living and varied rain. Some of these are: Drop velocity Drop acceleration Density Drop creation interval Wind No of splashes at ground contact There are still some minor features to add, such as individual ground height at different z-level, but majority of the engine is now done. If you want to do something similar for you own project please check out the demonstration video at YouTube . And why not download the source code from BitBucket . Lightning For an even more dramatic effect I want thunder and lightning in the game. I started doing a lightning bolt, then a lightning branch and finally a lightning engine sending randomized bolts and branches through the sky. As with the rain engine this engine also has a lot of settings, some of these are: Lightning length Lightning angle Interval between lightning strikes Lightning duration Animation Fade This was quite fun to code and I'm quite pleased with the result. Things left to add is sound for thunder and maybe a flashing background. Check out the demonstration video on YouTube and get the source code from BitBucket . A big thank you to Michael Hoffman whose awesome article was a big inspiration for this work. Other inspirations have been google images and YouTube. Internet is just awesome! Shaders Working with the lightning I spent a few hours and reading up on HLSL and including shaders in MonoGame. It was interesting and fun, but also quite time consuming. There will be a number of shaders included in the end product, but for now it will be a type of coding I will save for the polishing phase. For anyone getting started with MonoGame and HSLS I highly recommend the article My First Pixel Shader(s) . I'd be very happy for recommendations on other good HSLS pages. Home page I'm using WIX for the Eraserhead Studio page but unfortunately the WIX-editor is both slow and buggy. I've spent a number of hours in the editor trying to achieve a nicer looking and easier to use site than the previous one but WIX doesn't make it easy. I've still got two active tickets at the WIX-support regarding bugs I can't find any solutions for, but hopefully the site will still be better than the last one. The short lesson being - don't use WIX. Dev forums Besides writing and publishing this post I've also drawn avatar, logo and banner and added those to my profiles on: GameDev IndieGamer TIGForums GameJolt Reddit IndieDB When I've got a finished demo I'll also get on Facebook and Twitter. Do you have recommendations on other sites where you think I belong? Please let me know. Please visit Eraserhead Studio for more. Happy coding! /jan. NOTE. As always, everything I publish here or on any other site is work in progress and subject to change.
  7. ERASERHEAD STUDIO

    13 RONIN - DevLog #1

    13 RONIN 13 RONIN is a 2D pixel art samurai sword fighting game inspired by old Japanese samurai movies and 8-bit classics such as Barbarian and The Way Of The Exploding Fist. Your mission as a noble samurai is to defeat 13 renegade ronin and their murderous leader. Although done in low-resolution pixel art the game will have a somewhat “arty” aesthetic in black and white mixed with details in color. Who am I? I’m a 40 year old Swede with about 17 years of professional experience working as a .Net developer. To make a game has been a dream ever since I as a child learned to write a “guess a number”-game on my Commodore 64. Now I’m trying to fulfill that dream. I’m the sole developer behind this project and I’m doing it as a spare time project so please be patient. Status The main structure of the game and basic gameplay, based on placeholder graphics, is done and I’m currently switching between drawing assets and coding graphics effects like rain and lightning. News I’m quite often updating my dev blog with short posts about the progress I make. A post can contain a new animation, a sound effect, a code sample or something else related to the making of 13 RONIN. On this and other forums I will post updates, that are longer than those on my site, but not as often. To help and inspire the community I will share tools and parts of the code on my BitBucket-page. Happy coding! /jan. https://www.eraserheadstudio.com/
  8. ERASERHEAD STUDIO

    13 RONIN

    13 RONIN 13 RONIN is a 2D pixel art samurai sword fighting game inspired by old japanese samurai movies and 8-bit classics such as Barbarian and The Way Of The Exploding Fist. Your mission as a noble samurai is to defeat 13 renegade ronin and their murderous leader. Although done in low resolution pixel art the game will have an somewhat “arty” aesthetic in black and white mixed with details in color. Who am I ? I’m a 40 year old Swede with about 17 years of professional experience working as a .Net developer. To make a game has been a dream ever since I as a child learned to write a “guess a number”-game on my Commodore 64. Now I’m trying to fulfill that dream. I’m the sole developer behind this project and I’m doing it as an sparetime project so please be patient. Status The main structure of the game and basic gameplay, based on placeholder graphics, is done and I’m currently switching between drawing assets and coding graphic effects like rain and lightning. News I’m quit often updating my dev blog with short posts about the progress I make. A post can contain a new animation, a sound effect, a code sample or something else related to the making of 13 RONIN. On this and other forums I will post updates, that are longer than those on my site, but not as often. To help and inspire the community I will share tools and parts of the code on my BitBucket-page. Goals My current goal is to get a demo finished and released. The demo will only contain 1 or maybe 2 different opponents but otherwise be a fully playable game. This version will be absolutely free. The full game will contain 13 levels, all with different enemies, backgrounds and background animations. This version will be priced as other games of similar scope. Currently I’m aiming for a PC release but other platforms might follow. Happy coding! /jan. https://www.eraserheadstudio.com/
  9. ERASERHEAD STUDIO

    13 RONIN

    Album for 13 RONIN
  • Advertisement
×

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!