B4J Library [ABMaterial] New in 2.00 preview

Scoop! ABMaterial has proven to be an excellent asset in creating WebApps in B4J. For version 2.0, I'm trying to do the same for WebGames. Integrated in ABMaterial, there will be a complete new framework that will allow you to make games using the excellent PIXI library. This is the fastest WebGL renderder on the planet and is used by other frameworks like Phaser. And from ABMaterial 2.0 on, you will be able to do it in your favorite B4J tool!

This is in the early stages, so an alpha will only be available to donators in a couple of weeks, but I couldn't resist showing you what it already can do. Plans are adding Box2D to it too. But as the ABMaterial game engine is huge, it will take some time to make it a full blown tool for your WebGames.

Note: The nice part is that you can still use all the other ABMaterial objects too on a page. In the demo, I've put the WebGL canvas in a cell, but there is no reason you couldn't use the whole page. And you can use it in your existing ABMaterial WebApps to add nice animations to make it more attractive.

Screenshot:

This is a live demo on my private server, so be gentle. Use the hamburger menu on top to go to another demo. And try clicking, dragging etc.

NOTE: Do NOT use the CLOSE button when you look at the modal form with the source code. There is a bug in it that does not always removes the 'overlay'. Click outside the form to close it instead.

Online demo: http://81.165.232.188:8083/xplaydemo
Cheers,

Alwaysbusy

 

[Erel]

Amazing!

Will be interesting to hear how does it work. What runs on the server and what runs on the client?

 

[somed3v3loper]

Great development .
I tested the demo and there is about 1 second delay for actions

 

[alwaysbusy]

The trick is indeed to run as much as possible on the client. The server generates a buch of 'commands' that are send to the client. In the browser, they are parsed and execute the needed javascript. A lot is done with predefined scripts. (e.g. the background scrolling is send only once from the server) There, a script takes care of it. I'm still looking how to do more.

e.g.

' runs on every frame refresh
ground.AddUpdateCommand(ABM.XP.PROPERTY_TILEPOSITIONX, "", 0, "-=", 2)

I have already position, alpha, rotation and scale. Or a user can send over a custom Javascript, but then a good knowledge of Pixi.js is needed and I would like to avoid this.

e.g.

ground.SetUpdateJavascript("myself.tilePosition.x+=-2;")

At the current time most click and the key events have to make a round-trip but I want to find something for that too. (I haven't seen a 1 second delay yet, but the demo does run on a slow, old pc). In my browser it is instant but I'm also located in the same country as my server.

Most of the automatic running stuff is already done in the browser. Time will tell if it will work for games, but at the very least it will be a great addition to add interactive animations to a WebApp.

 

[alwaysbusy]

Update:

1. Rewrote the mouse/touch events. There was a bug so only 1 in 3/4 events was processed. This may have caused the perception of the 1 second delay. You can see this best in the first demo (SpriteSheets & Spine) when you click to generate explosions.
2. Used another audio engine (howler 2.0), so now audio should also works on iPad/iPhone. Note that Apple does not allow you to autoplay sounds so you must touch the screen to activate it. (In a real world game you would have a start button or so anyway).
3. Drastically decreased the code you need to write:

e.g.

Dim St As ABMXPSprite
St.Initialize(Xplay, "stan", "stan", 200,600, 255, 0, 1,1)
St.IsClickable = True  
St.IsDraggable = True
Xplay.AddDisplayObject(St)

does now the same as previously:

Dim Stan As ABMXPAsset = Xplay.getTextureAsset("stan")
Dim StanHit As ABMXPHitArea
StanHit.InitializeRectangle(0,0,Stan.Width,Stan.Height)
Dim cStan As ABMXPDisplayContainer
cStan.Initialize3(Xplay, "containerStan", 200, 600, (Stan.Width/2), (Stan.Height/2),255,0,1,1,StanHit, True, True)
Xplay.AddDisplayObject(cStan)
Dim St As ABMXPSprite
St.Initialize("stan", "stan", 0,0, 255, 0, 1,1)
cStan.AddDisplayObject(St)

4. MovieClips (like SpineBoy) can now also receive touch events.
5. Bug fixes all around: e.g. in the Primitives Demo there was a bug with the alpha fill

Next would be the Text object!

 

[JakeBullet70]

Incredible!!!

 

[alwaysbusy]

Added a new demo (first in the series on Box2D). Same url as in the first post, pick in menu 'Box2D Demo 1'. Drag Eric around. Kenny is attached to him and you can swirl him around. All objects collide with each other and feel forces like gravity and elasticity. Also , check out the source code (with the blue button).

 

[Erel]

Great example. Note that the first example no longer responds to mouse clicks.

 

[alwaysbusy]

Note that the first example no longer responds to mouse clicks

mmm, it should (and does in my chrome, PC). Can you try refreshing it.? It may be some old javascript files are still in the cache.

 

[Erel]

It may be some old javascript files are still in the cache.

You are of course correct. It now works properly.

 

[ilan]

wow this is amazing!

can you share the project of those demos?

 

[alwaysbusy]

Not yet ready for a release. I'm hoping to be able to release an alpha in a couple of weeks to the donators. You can use the 'blue' button in the demo to see most of the source code needed to write it.