Sprite Sheets - Browser Based 2D fighting game - Part 5

The most difficult part of the animation in any framework, is develop a good sprite sheet for your game. This is most challenging part of the development work. For me , it is bit daunting, not challenging.....)

I am not following mugen fighting engine standard at this moment. because it is very detailed. So my spritesheet will not follow mugen standard as well. Currently I am working on sample sprite sheet something like this:

These animations I have modified though ,from original sprite sheet.  I would like to add more animations as well. These animations have been added manually by using ms-paint tool. Personally I like that tool because of its simplicity. One of the important thing to note here is that I have to align the individual sprites equally, else the animation will not work as expected.

                                                                            

 

Started working Again !!!

For a very long time, I was not working on this item at all because of busy schedule. Now planning to start all over again. This time, I am planning to use phaser.js, which is easy and amazing , 2d game development framework. The over all learning curve is very little.

Phaser.js has all the features to develop a HTML5 game. Also, it supports, WebGL as well. If the browser is not compatible with Webgl, then it will fall back to Canvas mode. So for my game, I need such type of framework as I need to render heavy operations. Remeber, HTML5 is now rendered directly on graphics card, ie on GPU.

My first point of action is to develop a demo using phaser.js for  which  I need to design Finite State Machine in javascript. This API  can control the state of the enemy player(s) in the game play.

Browser Based 2D fighting game - Part 4

There are some improvements on this.At least I was able to produce some animation movements like, IDLE, WALK, PUNCH and KICK etc. I have a set of  mugen based individual images.Every mugen sprite image has certain number by which we can identify which category this image belongs to.But it was very difficult to compile all these animation sequences into single one for viewing. Here aseprite helped me really well. The real advantage of this tool is you can view animations.It will load all associated  images for a single image.I think this is working if the image name is a MUGEN based number.

With the help of this tool, I was able to create few more animation sequences that can be used in game.With all these ingredients, slowly my game is getting shaped up.I was able to load an enemy fighter with the above animation sequences.

I think I am able to show you some kind of preview down the line.

Browser Based 2D fighting game - Part 3

As I am not expert in Gimp, Adobe Photoshop, I had to use third party sprites which were freely distributed.If you are expert in pixel drawing, you can get away with this.Anyway I downloaded some well-known fighting characters  from some other framework and started working on it.
Currently I am planning to roll out a single player fighting game with CPU as the second player.I have a plan to support for two-users as well.

There were some features lacking in framework. Mainly for stopping and starting animation. I had  requested author  to incorporate these two features.The framework in other words, looks very impressing and promising. Still I think, there are more features yet to be added into this.Let us wait for that.

Some noticeable features of this framework are hide and show animation sequences along with user defined method for animation callback support.You can register an animation callback like this:

$.gameQuery.ANIMATION_CALLBACK;

The callback method will be fired when animation sequence completes.So using this, you can control animations.This is a nice feature.

Browser Based 2D fighting game - Part 2

Things getting developed much more as I started digging into this framework. The framework is pretty easy to handle.When you define an animation and register it, it will start animation when you load it in Browser.Another beauty of this framework is , you do not have to write lot of code to initialize and register an animation. A small piece of code like this will kick of animation!. This was pretty easy.

var abobo = {

        currentState : IDLE,

        oldState:0,

        position: 400,

        adversary: "#cvs",

        animations: [

        {animation: new $.gameQuery.Animation({    imageURL: "./img/forgame/14657-14670-idle.png",

                                    numberOfFrame: 13, delta: 368, rate: 250,

                type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}),

                  deltaX: 0, deltaY: 0, width: 468, height: 240}]};

The only thing you need to know is some background about sprite based animations and what are these parameters related to.

Browser Based 2D fighting game - Part 1

I was thinking about writing a browser based 2d fighting game sometime back.It was just inspirational one as I had seen and played 2d fighting games in PS2 and PC.Also, I had seen the real Mugen fighting engine written in C and later it was ported to Java as well.All these works really deserve salute to its developers as it was an outstanding piece of work.Thinking that , I want to develop a small 2d fighting game written in Javascript.I started my journey some time back.But writing such a game is not trivial job, as it requires good framework support and understanding in scripting languages and last not but the least, experience in developing browser based games.Today, I think I do not have any of these.But I really wanted to develop such a game for the users who depend heavily on browser based game.So I decided to experiment with.

The framework I am going to use is GameQuery.This is a jQuery plug-in developed by Salim Arsever.The advantages of this plug-in are many.I could not delve much into this as I am not an expert.I am slowly digging this framework.To get more inspirational support, I saw one demo of fighting game on GameQuery site.This lead to me right direction what is to be done and how is to be done.So finally I was able to do something like this seen below.