tag:blogger.com,1999:blog-80104500569844943972024-03-13T05:43:49.362-07:00JSFighterBlog dedicated for the development of browser based fighting games in HTML5
Unni Manahttp://www.blogger.com/profile/06675207800694410397noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-8010450056984494397.post-60581740545936288232014-12-22T20:38:00.001-08:002015-03-16T20:51:18.589-07:00Sprite Sheets - Browser Based 2D fighting game - Part 5<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
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.....)<br />
<br />
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:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDgkkFYxlAikIXmn1cmOrb6-LbhA6hRD3lzPbeD1lW3xHkm9ntJLeelVAgtMVOQ_-caMdJsTG6ce3l4OU7mBNGfbqBO8ogljgW_gVZLoKo5PstKXqd4diVUPH6VoeMTjbVtbPmrIeybmnr/s1600/billylee.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Fighters" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDgkkFYxlAikIXmn1cmOrb6-LbhA6hRD3lzPbeD1lW3xHkm9ntJLeelVAgtMVOQ_-caMdJsTG6ce3l4OU7mBNGfbqBO8ogljgW_gVZLoKo5PstKXqd4diVUPH6VoeMTjbVtbPmrIeybmnr/s1600/billylee.png" height="106" title="Fighters" width="400" /></a></div>
<br />
<br />
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 <b>ms-paint </b>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.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/O9PvFMhhyhU/0.jpg" frameborder="0" height="266" src="http://www.youtube.com/embed/O9PvFMhhyhU?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/1p82NCYbIPE?feature=player_embedded' frameborder='0'></iframe> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Games -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9673535204310554"
data-ad-slot="4826100804"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Unni Manahttp://www.blogger.com/profile/06675207800694410397noreply@blogger.com1tag:blogger.com,1999:blog-8010450056984494397.post-55100912143589637172014-12-07T20:18:00.003-08:002014-12-14T21:21:26.968-08:00Started working Again !!!<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="color: #a64d79;">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.</span><br />
<span style="color: #a64d79;"><br /></span>
<span style="color: #a64d79;">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.</span><br />
<span style="color: #a64d79;"><br /></span>
<span style="color: #a64d79;">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.</span><br />
<br />
<br /></div>
Unni Manahttp://www.blogger.com/profile/06675207800694410397noreply@blogger.com0tag:blogger.com,1999:blog-8010450056984494397.post-87726428524218111902012-02-05T02:07:00.000-08:002012-07-15T02:22:21.465-07:00Browser Based 2D fighting game - Part 4<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
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 <b>aseprite </b>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.<br />
<br />
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.<br />
<br />
I think I am able to show you some kind of preview down the line.<br />
<br />
<br /></div>
Unni Manahttp://www.blogger.com/profile/06675207800694410397noreply@blogger.com3tag:blogger.com,1999:blog-8010450056984494397.post-21282547331203004772011-06-12T22:10:00.000-07:002012-07-15T02:22:21.401-07:00Browser Based 2D fighting game - Part 3<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
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.<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<br />
<b>$.gameQuery.ANIMATION_CALLBACK</b>;<br />
<br />
The callback method will be fired when animation sequence completes.So using this, you can control animations.This is a nice feature.</div>
Unni Manahttp://www.blogger.com/profile/06675207800694410397noreply@blogger.com0tag:blogger.com,1999:blog-8010450056984494397.post-36535901725612862792010-12-27T21:57:00.000-08:002012-07-15T02:22:21.413-07:00Browser Based 2D fighting game - Part 2<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
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.<br />
<br />
<div style="background-color: #3d85c6;">
var abobo = {</div>
<div style="background-color: #3d85c6;">
currentState : IDLE,</div>
<div style="background-color: #3d85c6;">
oldState:0, <span><span style="background-color: white;"></span></span></div>
<div style="background-color: #3d85c6;">
position: 400,</div>
<div style="background-color: #3d85c6;">
adversary: "#cvs",</div>
<div style="background-color: #3d85c6;">
animations: [ </div>
<div style="background-color: #3d85c6;">
{animation: new $.gameQuery.Animation({ imageURL: "./img/forgame/14657-14670-idle.png",</div>
<div style="background-color: #3d85c6;">
numberOfFrame: 13, delta: 368, rate: 250,</div>
<div style="background-color: #3d85c6;">
type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}),</div>
<div style="background-color: #3d85c6;">
deltaX: 0, deltaY: 0, width: 468, height: 240}]};</div>
<br />
The only thing you need to know is some background about sprite based animations and what are these parameters related to.<br />
<span><span style="background-color: #9fc5e8;"><span style="background-color: #76a5af;"><span style="background-color: white;"></span></span></span></span></div>
Unni Manahttp://www.blogger.com/profile/06675207800694410397noreply@blogger.com0tag:blogger.com,1999:blog-8010450056984494397.post-26330153776523945412010-05-14T21:33:00.000-07:002012-07-15T02:22:21.409-07:00Browser Based 2D fighting game - Part 1<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
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.<br />
<br />
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhQSaDUqpoPkj5bKf-9jtEX7nF5wFbUOXh1xNl6QbUhWyWd0jql8pj1Z9OQABmCdz5IpB2aDIoDKLcnGFx1d5D1b_4x3kuQD4vqYZcavhpPiHYyYa_YFu5ckJCyLKv0vufuL05jS93N-u/s1600/zzzBmp.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhQSaDUqpoPkj5bKf-9jtEX7nF5wFbUOXh1xNl6QbUhWyWd0jql8pj1Z9OQABmCdz5IpB2aDIoDKLcnGFx1d5D1b_4x3kuQD4vqYZcavhpPiHYyYa_YFu5ckJCyLKv0vufuL05jS93N-u/s320/zzzBmp.bmp" width="320" /></a></div>
<br /></div>Unni Manahttp://www.blogger.com/profile/06675207800694410397noreply@blogger.com0