ABXPlay (WebGL/HTML5 canvas) progress update 6 (SpriteSheets and Spine animations)

There is something brewing in the woods this morning…

Click here for the demo (up for a couple of hours)

What’s new:

  • Support for spriteSheets. They can be build with tools like TexturePacker. The explosions are SpriteSheets.

  • Support of Spine! Spine animations are state-of-the-art when it comes to 2D animations. You can use a ‘skeleton’ on your figurine and then start moving arms, legs, etc. All you need to make characters jump, shoot, fall. The animations are much more natural then with spritesheets. The boy is a Spine figurine.

  • Scripting basics. Just like in Xojo’s HTMLHeader, you can push javascript to the browser. Work in development and will need a good knowledge of the pixi framework of the programmer.

What can you do in the demo:

  • Jump by tapping the Space key (jump happens when the key is ‘up’)
  • Click everywhere to create explosions (they are multi user again!)

The code for this demo:

Sub PreloadAssetsMovieClip()
  ' load assets
  ABXPlay1.LoadAssetTexture("background", "iP4_BGtile.jpg", 1286, 640)
  ABXPlay1.LoadAssetTexture("ground", "iP4_ground.png",1286,179)
  ABXPlay1.LoadAssetMovieClip("explosion", "SpriteSheet.png", "SpriteSheet.json")
  ABXPlay1.LoadAssetMovieClip("boy", "spineboy.png", "spineboy.json", "spineboySpineData.json")
  ABXPlay1.LoadAssetAudio("bomb-explode", Array("bomb-explode.mp3", "bomb-explode.ogg"))
  ABXPlay1.LoadAssetAudio("morning", Array("morning.mp3", "morning.ogg"))  
End Sub

Sub DrawMovieClip()
  ' create a tiled sprite 
  dim bg as new ABXPSprite("background", "background", 0,0, 255, 0, 1,1,0,0,1,1)
  ABXPlay1.AddDisplayObject(bg)
  
  ' javascript update script for the background
  dim s() as String
  s.Append "myself.tilePosition.x-=0.5;"
  bg.SetUpdateScript(join(s,""))
  
  ' create a spine movieclip
  dim boy as new ABXPMovieClip("boy", ABXPMovieType.aSpineMovie, "boy", 580, 640-145,255,0,0.75,0.75)
  ' set the mix modes
  boy.SpineAddMix("walk", "jump", 0.2)
  boy.SpineAddMix("jump", "walk", 0.4)
  ABXPlay1.AddDisplayObject(boy)
  ' start walking
  boy.SpineSetAnimation("walk", true)
  
  ' create a tiled sprite
  dim ground as new ABXPSprite("ground", "ground", 0,640-179, 255, 0, 1,1,0,0,1,1)
  ABXPlay1.AddDisplayObject(ground)
  
  ' javascript update script for the ground
  redim s(-1)
  s.Append "myself.tilePosition.x-=2;"
  ground.SetUpdateScript(join(s,""))
  
  ' add continious playing morning song
  dim morning as new ABXPAudioObject("morning", "morning")
  ABXPlay1.AddAudioObject(morning)
  ' and play it in a loop
  morning.Play(30,true)  
  
  ' add the bomb sound
  dim bombexplode as new ABXPAudioObject("bomb-explode", "bomb-explode")
  ABXPlay1.AddAudioObject(bombexplode)  
End Sub

exCounter = excounter + 1
  dim Scale as Double = rnd*2+0.75
  dim explosion as new ABXPMovieClip("explosion" + str(excounter), ABXPMovieType.aSpriteSheetMovie, "explosion", x, y,255,rnd*360,scale,scale)
  ABXPlay1.AddDisplayObject(explosion)
  explosion.MoviePlay(false, 0.5)
  
  dim o2 as ABXPAudioObject = ABXPlay1.InternalObjects.Lookup("bomb-explode", nil)
  if o2 <> nil then
    o2.Play(60,false)
  end if
  
  ' update the new state
  ABXPlay1.Update(true)

I think the next evenings will be filled with documenting the framework. Once that is finished, I’ll release an Alpha.

Cheers,

Alain

This is as charming and peaceful as an Itchy & Scratchy episode. :smiley:
Brillant again, Alain! Worst framerate was 59(!) on Safari, Mac OS X 10.10.
You know we’ll want that engine for Desktop too, don’t you?

Would be nice, but not doable I think as it powered with javascript engines like pixi. (maybe with HTMLViewer?)
All the speed is credit to this engine. My framework is an entry point to this lib with a lot of Xojo specific optimisations. Xojo web can be compared to PHP as it is a server like engine. My job is giving it a fast and easy way towards the browser with Xojo code we are all familiar with.

Amazing stuff Alain. You have a knack for pushing the envelope :slight_smile:

Realy unbelievable Alain what you are showing us here!
Scores:
Internet Explorer 52 - 61 FPS
Firefox 48 - 61 FPS
Chrome 33 - 60 FPS
Opera 32 - 60 FPS
Safari 2 - 25 FPS (no mistake, it’s realy that bad!)
Safari on Windows is so slow that when all other browsers don’t show any explosions anymore, it takes Safari sometimes about 10 seconds before all explosions are over.

That’s probable pre-WebGL? If so, it needs to fall back on HTML5 (just like the Xojo web canvas I think), and because the demo is using a rather big resolution, that may mean trouble. But in my view, WebGL is the only valid way to do good graphics on the web.

Safari for Windows version 5.1.7, couldn’t find anything about WebGL-support.

+1 for WebGL :slight_smile:

Just glad Microsoft eventually decided to support WebGL in their browser after years of resistance.