Scripted Image Mosaics

Here’s another useful tidbit.

I already wrote a lot of posts about Javascript Sprites, how to animate them and how they perform. What I neglected so far is how they actually get on the stage or the page to use the correct term. Another fact is also that most people won’t have flashy Scripted animations all over their page – for those people utilizing one of my sprite classes is not just impractical, it’s also a waste of bandwith.

What it will do

To give those people some JavaScript love too I quickly coded a Mosaic Object this morning. It will basically look up a particular piece of your image and return:

• a canvas element which you can draw into a canvas or attach to another element
• or a div element, perfectly sized to fit the mosaic piece with background and background position set apropriately

(more…)

Tags: Games, JavaScript, tile graphics

Your Own JavaScript Data Structures

Some Data Goodies

To keep one or the other occupied I thought why not give away some insights on how to implement advanced data structures in JavaScript. Read on to learn how to use Stacks, Vectors and various types of linked lists in your JavaScript Application - complete with Source code.

The Problem

Beside primitive types, Javascript has only built in Objects and Arrays (which themselves are Objects internally as well). While this is a convenience drawback, this also results in a great flexibility. This article will show you how to implement your own data structures utilizing JavaScript object’s prototype property to create your own data types. I’ve added all objects to my global Object CGE, you might need to adjust that to fit your code.

Although not necessary for these Objects to work, I’ll also provide a version of each Object that was made utilizing the AJS.Class constructor, thus only working when the AJS Library is present.
(more…)

Tags: JavaScript, oop

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.

(more…)

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:

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.

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:

1. CGE.Sprite - which is a single not animated sprite
2. CGE.AnimSprite - which is an animated sprite running in a loop
3. CGE.MirroredAnimSprite - which is an animated sprite that plays in reverse when it's last/first frame is reached
4. 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...

(more...)

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

Thoughts about OOP advantage

Having recently refactored my JavaScript Game Engine (or what it will eventually become one) and the associated Level Editor to use OOP techniques I noticed that this has some issues besides the obvious advantages.

Using OOP can save disk space

In one particular case I read about memory requirements of large tile maps on Xalthorn's Blog. A commenter (horRAiN) mentioned that his map used up about 5 MiB if he saved it to a text file using the php serialize command on the server.

Due to it's nature the serialize command has a serious overhead which can in some cases be between 30% – 50%, even more so if you just serialize an array containing objects and / or a huge number of duplicate objects.

The serialize command is useful, no question, but for things like saving a game level or map it is just a huge waste of space, even though it is the easiest and fastest solution (in the short term).

In the long run it is better to make use of Objects and Object references. Saving an array of 200 x 200 Map Elements containing just references and a description of each object obviously saves loads of space and troubles in the long run.

A randomly created map with 40.000 reference numbers and the 18 used objects, formatted as xml takes up  128 KiB.

Using OOP frees up your namespace

Creating an application requires a substantial amount of variables to hold all the data you'll need at runtime. Using objects will most likely save you from overwriting one or the other variable you need at a certain point.

Especially in Javascript wrapping your variables and functions into an object means that you'll save the Interpreter a lot of work at runtime.

You have to access any variable or function directly.

Java(Script) example:

You might not see the immediate benefit in this, but here are some (some can be translated to php as well):

• Your variables are isolated and can't conflict with reserved variables or functions.
• Your code is more reusable because you can use the same vars and functions on multiple objects (myEventObject.add, myDomElement.add, myOtheObject.add)
  without having to to think about naming conflicts
• The interpreter is able to look up your variables faster because the global object doesn't grow as much (each variable and function call starts looking in the global object and digs down)

OOP needs more discipline

What I noticed coding on the game engine and the editor was that using objects literally  enforces a disciplined usage of coding conventions.

Because you can use object variables,  object functions, local functions and local variables it is important to keep an overview of what you have defined.  Variables should be declared at first in a function or object to make it more clear what variables are used inside this statement.

Objects can be costly

If you use Classes to define new Objects, any object you create needs memory.  Think first if you really need an object to perform a certain task or if it is enough to call the functions from a static context.

In Java and PHP you would call functions and variables by prepending the class name (without the need to instantiating an object first:
PHP

Java / JavaScript

However, at this point there is a little trick that JavaScript provides to make this somewhat easier.

JavaScript has something called JSON (JavaScript Object Notation), which basically lets you define an object structure that won't be able to have instances. This has the advantage that you don't need the longish prototype notation to declare the objects. But to explain this to you I'll hand over to the excellent tutorial by  Dustin Diaz – JSON for the masses.

Tags: oop