The South Stream: html5

Saturday, November 27, 2010

HTML5 Gaming Library Ideas

At Øredev this year and I went to a presentation on Cocos2d for Iphone, "a framework for building 2D games, demos, and other graphical/interactive applications on the Iphone". Since I have been working with HTML5 this gave me an idea that there should be a similar library for HTML5.

This is some of the main features that I think need to be a part of it:

Scene
The Scene object should automaticaly cover the entire canvas/screen.
Holds a list of Nodes
Can hold a list of Layers
An Application can have many Scenes.
- A pause scene
- Main menu scene
- Game scene
It should be possible to have transistions between Scenes

Layers
This is an invisible container for nodes. It can be used to create layered effects such as a background layer and a front layer.

Nodes
Nodes are the objects.
Attributes
-position ( in relation to their parent node, scene or layer )
Should the position be midpoint or left corner. I think both should be possible and can be set depending on what kind of object it is we are working with. E.g. Tile(left corner), Bullet(midpoint)
Methods
-Move To
-Move
-Scale
-Rotate
-RegisterEvent

Sprite
A sprite is a type of node that has an image
Used for images and textures.

Label
A sprite is a type of node that has text
Attributes:
-Text
-Font
-Size
Methods
-Update Text

Prebuilt Nodes Structures
To make it easy for people there should be inbuilt node structures.
E.g.
Menu
-Has menu items

Node Factory
There should be a node factory that creates nodes. Similary to Strophe and Jquery
The factory could be accessed through any other node or scene to create a child node
$scene.cnode(parameters);
$node.cnode(parameters);

Identification
Should use Jquery like identification
I am using the JQuery operator $ in my example but likely it would need to be something else.
$('#apa') - Find object with Id 'apa'
$('node') - All nodes
$('.sprite') - All nodes of class sprite (and it should be possible to create your own classes.

Sequence of Actions
Like JQuery and Strophe objects (nodes,scenes,layers) should return them self if nothing else is returned. This makes it possible to to sequences.
$('#apa').rotate(5).scale(-1).move(150)
$(this).cnode(parameters).move(150).up().scale(160)

Schedule
There should be schedule methods to do time based gaming.

Physics
Could be joined with BOX2DJS for 2d physics

Director
Should be a director that controls the flow of things.

Sound
Background Music
Effects

Particle System
It would be coold to have particle system to create fire and stuff like that.

Tuesday, October 19, 2010

Multiple Binds/Triggers in JQuery

Today I experimented with Multiple binds/triggers in Jquery. What I wanted to do what to raise an event, lets say "Add Contact" and have multiple other elements react on that. Well, it wasn't as smooth as I expected since you have to trigger an event on a specified element and only that element or a parent element can bind to it.

Example:
Take this very simple webpage. The scenario is that I wan't to trigger an event when clicking on "Add Contact" and on that event something should happen with both my contact list and my twitter widget.

...
<body>
<div id="main">
  <button id="add_contact">Add Contact </button>
  <div id="contact_list">Contact List: </div>
  <div id="twitter_widget">Twitter Widget: </div>
</div>
</body>
...

So if I want to trigger an event on the button you have to trigger it on some element. If I trigger it on contact_list then only that element can bind to it, and if I trigger it twitter_widget then contact_list can't bind to it. So the solution is to bind it to both elements.

We'll have to image that I have a variable with the contact object

$('#add_contact').click(function() {
$('#contact_list, #twitter_widget').trigger('add_contact', contact );
})

And then add binds to both your elements.

$('#contact_list').bind('add_contact', function(e, contact) {
$(this).append('* ' + contact.name + '
');
});

$('#twitter_widget').bind('add_contact', function(e, contact) {
$(this).append('> Tweeted: I added ' + contact.name + ' to my contact list, I think this is the beginning of a beautiful friendship.
');
});

I want to finish this post with a lengthy example where I use this technique and also the reverse. Where I have two buttons that trigger the same event on another element. Great for logging. And also an example where one button click triggers more than one event. It know it looks messy in a this post so just copy-paste it to your favorite editor, save as .html and open in a browser and you will see the magic.

Enjoy!

<html>
<head>
  <title>Welcome to Jquery Multiple Bind Example!</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
</head>
<body bgcolor="white" text="black">
  <center><h1>Welcome to Jquery Multiple Bind Example!</h1></center>

  <p id="add_contact" style="background:#faa; width:300px;">
   <b>Add Contact</b><br/>
   <input id="name"/><br/>
   <button id="add">Add Contact</button><br/>
   <script>
    $('#add').click(function() {
     $('#contact_list, #twitter_widget').trigger('add_contact', $('#name').val() );
     $('#log').trigger('log', 'Contact Added: ' + $('#name').val() );
    })
   </script>
  </p>

  <p id="connect_div" style="background:#faa; width:300px;">
   <b>Connect To Server</b><br/>
   <button id="connect">Connect</button><br/>
   <script>
    $('#connect').click(function() {
     $('#log').trigger('log', 'Connected to the server.' );
    })
   </script>
  </p>

  <p id="contact_list" style="background:#faa; width:300px;">
   <b>Contact List</b><br/>
   <script>
    $('#contact_list').bind('add_contact', function(e, name) {
     $(this).append('* ' + name + '<br>');
    });
   </script>
  </p>

  <p id="twitter_widget" style="background:#faa; width:1000px;">
   <b>Twitter Widget</b><br/>
   <script>
    $('#twitter_widget').bind('add_contact', function(e, name) {
     $(this).append('> Tweeted: I added ' + name + ' to my contact list, I think this is the beginning of a beautiful friendship.<br>');
    });
   </script>
  </p>

  <p id="log" style="background:#faa; width:1000px;">
   <b>Log</b><br/>
   <script>
    $('#log').bind('log', function(e, name) {
     $(this).append(new Date().getTime() + ':' + name + '<br>');
    });
   </script>
  </p>
</body>
</html>