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
 
Last edited:
Click to expand...

alwaysbusy

Expert
Licensed User
Longtime User
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.

B4X: 
' 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.

B4X: 
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.
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
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.

B4X: 
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:

B4X: 
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!
 

alwaysbusy

Expert
Licensed User
Longtime User
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).

 
You must log in or register to reply here.

Similar Threads

Games What's the latest?
Replies
6
Views
1K
ilan
  • Article
B4J Tutorial [ABMaterial/ABMServer] Mini Template for absolute beginners (update 2024/05/17)
2 3
Replies
46
Views
22K
alwaysbusy
N
  • Question
B4J Question ABMaterial, How can i run it on my Webspace
Replies
6
Views
2K
alwaysbusy
  • Article
Share My Creation [ABMaterial] Project.Show
Replies
6
Views
3K
MathiasM
M
  • Article
B4J Library [ABMaterial Poll] What to do next?
2
Replies
29
Views
6K
techknight
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…