In a place where your fantasy can roam free, there won't be any boundaries to what your imagination can create.
Misha’s Tech Playground
graphics, fun and code play
I'm crazy - but who cares? My ideas are constantly dwelling and this is the place for them to pour out and form into something good. Only active participation will ultimately make this place come to life.
Cool Javascript Mario Games
Yesterday at work I got these links from a colleague. There really is a guy that takes JavaScript development to the top. He made a fine little Mario Land clone, having all the music and sprites coded in JavaScript. No sound files, no images, no plugins - just pure Javascript and use of Canvas. Though the script has a fallback to semantic html sprites when canvas isn’t available.
I’d say, great kudos to CupBoy.
Go check it out at his blog:
14KiB Javascript Super Mario
… and then there was this other guy 
sorry, couldn’t resist this cheesy line…
There was a response to this blog entry from Myles Eftos who had been cooking something similar with just semantic html. So these sprites are all divs and spans. Sure this is much slower than canvas but it’s impressive nonetheless.
See the blog entry here:
Swing Your Hands From Side to Side - How to Abuse Javascript
Tags: code performance, Games, JavaScript, tile graphics
Choosing the right Graphics Technique for a Browser Based Game
Whether if you are doing a puzzle game, a tricky jump ‘n run or a full fledged mmorpg, be it a simply casual or a long term persistent browser based game, you’ll certainly need one thing: images and animations.
As mentioned in last weeks article, you have the choice of implementing the right drawing technique. However, there are vast performance differences. So there is no technique that fits them all, merely you’ll need to decide on a case by case basis what you are going to use.
Since trying out everything only to realize that there were some tiny details you weren’t aware of in the first place isn’t actually fun, I am providing an in depth review of each technique.
We’ll go into detail about each techniques pro’s and con’s and you’ll learn how you would go about animating your game graphics in the technique of your choice.
At the end of this article you’ll also find a matrix containing the most important facts from this review.
A Short side-note for Those Looking to Create Flash Games:
This article won’t include information about Flash or Actionscript. There are already a lot of really great tutorials and articles on this topic out there. I don’t think I need to be making another tutorial containing the same information. Have a look at GotoAndPlay.it which is an awesome source for anyone interested in making Flash games.
Tags: code performance, game engine, Games, JavaScript Library, tile graphics
Performance comparison between HTML, SVG and Canvas
I already found out that using scroll properties is good for fast map scrolling. I extended the concept, and after posting my code to animate sprites via a containers scroll properties I thought hey, why not just check if there’s anything better. The following article provides a short overview and a sample for each technique. There is a zip file containing the full sources as well
(more…)
Tags: code performance, Firefox, Games, JavaScript, Opera, Safari, SVG
Animating with Scroll Properties, A view on Performance
Having had some time to polish up the AnimSprite Object of the game engine I had a chance to make a small performance test. I decided to give some insights on ow this style of animation works and to post the code that goes along with it for your personal joy.
The following html is generated by the script for each sprite that is placed on the stage.
Of course there is a stylesheet having defined the sprite class:
-
.CGE_sprite {
-
overflow: hidden;
-
position: absolute;
-
}
Utilizing the ScrollTop and ScrollLeft properties of the sprite box (the surrounding div) I can display 50 animated sprites @ 25fps on a page using Firefox 3 Beta 4 with a processor load of about 98% on my MBP 2.16GHz Core Duo.
Safari on the other hand is quite fast and has only 19% processor load for 50 sprites.
Having 100 sprites lets Firefox peak out at 100.9% load and slows down the animation to about 50% speed.
I'd say this is still not optimum, but it's quite a good start.
Here's my JS code for the sprites.
-
var CGE = {
-
// globals attributes
-
LEFT: 3,
-
TOP: 0,
-
RIGHT: 1,
-
BOTTOM: 2,
-
-
HEIGHT: 1,
-
WIDTH: 0,
-
-
X: 0,
-
Y: 1,
-
Z: 2,
-
-
STYLE_SPRITE: "CGE_sprite",
-
-
// the game instance if needed
-
game: null,
-
};
-
-
CGE.Game = new AJS.Class({
-
animSprites: [],
-
init: function (keys) {
-
for (var i=0; i <50; i++) {
-
this.animSprites[i] = new CGE.MirroredAnimSprite("_img/jumping_shadow.png", [Math.random()*300,Math.random()*250], [32,32], AJS.$("map"), true);
-
};
-
-
this.run(this);
-
},
-
-
run: function (game) {
-
game.hero.move(CGE.moveDir);
-
for(var i = 0; i <game.animSprites.length; ++i) {
-
game.animSprites[i].next();
-
}
-
game.mainLoop = window.setTimeout(function(){game.run(game)}, 40); //25fps
-
}
-
});
-
-
CGE.Sprite = new AJS.Class({
-
box: null, // for tiles this is the tile container, pos is relative to it
-
img: null,
-
spriteH: 0,
-
spriteW: 0,
-
// get x and y directly from object, faster for anim
-
z: 0,
-
-
frames: null,
-
-
init: function(url, pos, size, parent, useBox) {
-
this.img = AJS.IMG({src: url});
-
if(useBox)
-
this.box = AJS.DIV({className: CGE.STYLE_SPRITE}, this.img);
-
-
if(pos)
-
this.setPos(pos);
-
-
if(size)
-
this.setSize(size);
-
-
if(parent)
-
AJS.ACN(parent, this.box);
-
},
-
-
get: function() {
-
return this.img.src;
-
},
-
-
set: function(url, size) {
-
this.img.src = url;
-
},
-
-
getPos: function() {
-
return [this.box.offsetLeft, this.box.offsetTop];
-
},
-
-
setFrame: function(name, n) {
-
this.box.scrollTop = this.frames[name][n][CGE.Y];
-
this.box.scrollLeft = this.frames[name][n][CGE.X];
-
},
-
-
setPos: function(pos) {
-
AJS.setLeft(this.box, pos[CGE.X]);
-
AJS.setTop(this.box, pos[CGE.Y]);
-
},
-
-
setSize: function(size) {
-
this.spriteH = size[CGE.HEIGHT];
-
this.spriteW = size[CGE.WIDTH];
-
AJS.setHeight(this.box, this.spriteH);
-
AJS.setWidth(this.box, this.spriteW);
-
}
-
});
-
-
CGE.AnimSprite = CGE.Sprite.extend({
-
isPlaying: false,
-
isMirrored: true,
-
sign: true, // true=add, false = substract
-
-
frames: null,
-
key: null,
-
-
init: function(url, pos, size, parent, isPlaying) {
-
this.parent(url, pos, size, parent, true);
-
this.key = {name: "base",num: 0}
-
this.isPlaying = (isPlaying);
-
-
this.frames = {base: [[0,0],[32,0],[64,0],[96,0],[128,0],[160,0]]};
-
},
-
-
getFrame: function() {
-
return this.key;
-
},
-
-
setFrame: function(name, n) {
-
if(n>= this.frames[name].length)
-
n = 0;
-
this.parent(name, n)
-
this.key = {name: name, num: n};
-
},
-
-
next: function() {
-
if(this.isPlaying)
-
this.setFrame(this.key.name, ++this.key.num);
-
},
-
-
pause: function() {
-
this.isPlaying = false;
-
},
-
play: function(name) {
-
if(name)
-
this.key.name = name;
-
-
this.isPlaying = true;
-
},
-
stop: function() {
-
this.pause();
-
this.setFrame("base", 0);
-
}
-
});
-
-
CGE.MirroredAnimSprite = CGE.AnimSprite.extend({
-
sign: true, // true=add, false = substract
-
-
setFrame: function(name, n) {
-
switch(n) {
-
case this.frames[name].length-1:
-
this.sign = false;
-
break;
-
case 0:
-
this.sign = true;
-
};
-
(this.sign) ? ++n : --n;
-
-
this.parent(name, n);
-
},
-
-
next: function() {
-
if(this.isPlaying)
-
this.setFrame(this.key.name, this.key.num);
-
},
-
});
-
-
function init() {
-
CGE.game = new CGE.Game();
-
}
-
-
AJS.AEV(window, 'load', init);
As you can see, I make extensive use of AJS. You can get the stock version of it at the official website: AJS JavaScript Library.
The code shown here should be fully functional. I just removed the methods and members which aren't used in this example. And as a little caveat, there is no depth management as of yet.
The image I used in my code is the same as in the Javascript Sprite Animation post.
The classes to use would be:
- CGE.Sprite - which is a single not animated sprite
- CGE.AnimSprite - which is an animated sprite running in a loop
- CGE.MirroredAnimSprite - which is an animated sprite that plays in reverse when it's last/first frame is reached
- CGE.Game - which coordinates the loop in which all animations are run
Have fun 
Tags: code performance, Firefox, Games, JavaScript Library, pbbg, Safari, tile graphics
Game Engine Preview
Since the class hierarchy is almost finalized I thought I post a little sneak peek of what is to be expected.
Not everything shown here will make it into the first release, unfortunately. But be assured that development is in progress...
You might notice that this looks a lot like pseudo code, but I just don't want to throw around pieces that aren't finalized yet.
So without further ado, here's some code to stick your nose in...
Tags: code performance, Games, JavaScript Library, pbbg, tile graphics
Having a busy animation in Javascript
Looking into my logs recently I noticed that lots of people come here to find out how they can add an animated ellipsis or a spinning circle animation to show that their script is busy. Although I already showed how to do Progress monitoring with JavaScript on a more advanced level, I'll try to show how to do the very basic task of showing that your script is currently working. Keep in mind, if you know how much your script has to do (e.g. how many iterations) always aim to give the user accurate feedback about the current process.
(more...)
Tags: code performance
Fast map scrolling with Javascript
Chatting about moving objects around on an html page with Xalthorn the other day we came to an interesting conclusion. There is indeed a method available that works (almost) independently of the number of objects to be moved around. There are certain restrictions to this method however.
This article aims to provide a short overview over the pros and cons of using an elements scroll property rather than its children's style attribute. (more...)
Tags: code performance, Games, tile graphics
Is JavaScript enough for browser based games
Most Browsergames these days are done with Flash. Sure, Flash is a nice technology and it has lots of benefits over X3D, Quicktime, Silverlight and others. The main reason Flash is used for games though is because it has a huge market penetration. Somewhere around 98% if you believe in Adobe's statistics.
That there is another, mostly underestimated player is a fact that this article want's to shed some light on. (more...)
Tags: code performance, pbbg
Safari wins , Opera lost (real life JS performance)
To check performance on large maps in my level editor I included a little function that generates a map of a given size filled with random tiles. I am lazy I know, but try to click your way through a 200 x 200 (40000 tiles) map and you know what I am talking about
So while testing I found out that there are vast performance differences between the various browsers on my system[1]. I also rectified en Error with Event handling in Opera 9.5* while I was at it.
The test I ran was pretty simple, I used all three browsers to create a random 100 x 100 map and took the time before the function started and after it finished. The difference was output in an alert which you see here. (more...)
Tags: code performance, Firefox, Opera, Safari
Progress monitoring with JavaScript
If you ever happen do develop a web application using Javascript you might stumble upon the occasion where a process might take a fair amount of time to calculate.
The Problem
If your script needs more than a couple of seconds, most likely this fact will result in a message like this:
Okay, you might think just drop in some code to output something while your script processes an array with say... 40k Elements (200 x 200). The issue we face is that JavaScript in Browsers is single threaded.
So the output code you have in your processing loop will be stored in a queue until the processing is done. This of course looks like your browser is stalled until suddenly there is a huge amount of data on your page.
Several JavaScript applications offer an approach that is not very user friendly. Until the script is finished you'll see an animated gif of a spinning circle or a phrase like waiting... (usually with an animated ellipsis). The real solution is only slightly more complicated but gives far more feedback to the user.
Real Progress Bars (or other shapes) are something all modern desktop applications offer. Web Applications made with Flash or other Technologies offer this as well.
How to do this in JavaScript is what we look at next … (more...)
Tags: code performance
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.