It seems in IE the fps dom object jumps behind the canvas so I’ve updated it to respect the ratio like the other demos. Fps should (in most cases) be visible again. But thanks for bringing this to my attention as on IE this means a WebGL canvas gets priority over other dom objects. I have to take this into account when e.g. I’ll start using editfields on the canvas.
Amazing! Smooth and nice effects!
60 fps Safari (7.0.1) MacAir mid 2012
Still looking good, running 58-60 fps on Safari (7.0.3). I noticed the dragging of characters is glitchy and not super smooth, however. They almost seem to get stuck when I drag them around. Maybe its because I’m still using a 2010 MacBook?
A Solid 60 fps here on both Safari and Chrome for Mac OS X 10.9.5.
@Jason King Weird. Even on my Firefox with only 25FPS dragging is smooth. Handeling the mouse (bubbling) on nested containers is rather complicated but I’ll look into it.
I just reloaded it and now it seems fine. So I’m not sure what the problem was…
Exceptional work Alain. I’m forwarding your link to some colleagues to demonstrate to them the possibilities of Xojo.
@Alwyn Bester Actually, the real credit goes to Javascript and HTML5 
In fact, it’s quite a hassle to get to use it in Xojo. Not Xojo’s fault as Xojo Web it is more like a PHP server solution than a browser solution. It’s going to be a challenge to get the program logic from Xojo to this object. Somehow I need to push the logic written in Xojo to the browser, because it does not work if it has to make the roundtrip to Xojo every time something happens.
Makes sense that one wants to avoid the roundtrip, and only transport the essential data between the server and browser. This sure is an ambitious goal, but should be very useful when building advanced graphical web applications.
Thanks for the tests! Demo is off line now. The plan for the next steps is the following:
- Clean up the code, especially the tweening part in Xojo
- Clicking on the background has some issues (sometimes canvas dissapears from screen, no errors visible, will be a though one)
- Setting up a framework similar as what already is used in Xojo in the SetupJavascriptFramework String? (will require good knowledge of Javascript from the developer, and the underlying ABXPlay framework). Or using another way? (getting this right will have a huge impact on if this control will ever see the daylight)
- Adding support van text (normal fonts, google fonts, bitmap fonts)
- Adding support for other events as hover to switch textures
- Adding support for other DOM elements? (like an editfield and let it act as any other DisplayObject and being able to use tweens like rotates, scaling, etc on it)
You’ll notice a lot of question marks, but I’ll have to adapt stuff depending on the walls I walk into
Ok, here is an update with demo 3 (Text). Not so exciting as the previous ones, but a lot has happened!
- Tween code is completely rewritten so its much clearer now
- Preloading of the assets (bitmaps, fonts)
- Clicking on the background should be solved
- Added text support (normal web fonts, google fonts and bitmap fonts.) Just like any other object on the canvas, the text can use tweens to animate them.
Link is the same as above, again up for a couple of hours.
Code for this project:
Sub Initialized(GraphicsType as String)
' add all assets to preload
ABXPlay1.LoadAssetTexture("comicguy", "comicguy.png")
ABXPlay1.LoadAssetBitmapFont("desyrel", "desyrel.png", "desyrel.xml")
' start loading the assets
ABXPlay1.PreloadAssets
End Sub
Sub PreloadComplete()
' do the actual drawing
'create a sprite
dim comicguy as new ABXPSprite("comicguy", "comicguy", 0,0, 255, 0, 1,1)
ABXPlay1.AddDisplayObject(comicguy)
' create a style
dim style1 as new ABXPTextStyle
Style1.FillColor = &c000000
Style1.Font = "Arial"
Style1.Size = 50
Style1.Bold = true
Style1.Align = ABXPTextAlign.Center
Style1.DropShadow = true
Style1.DropShadowColor = &cFFFFFF
' create a text display object
dim text1 as new ABXPText("text1", "WORST\
FONT DEMO\
EVER", 160,30, 64, 0, 1, 1, style1, ABXPFontType.RealFont)
ABXPlay1.AddDisplayObject(text1)
' alpha tween
text1.TweenStartAlpha("alpha", ABXPTweenEasingType.easeLinear, ABXPTweenRepeatType.ReturnContinuous, 3000, 64,255)
' create a bitmap text display object
dim style2 as new ABXPTextStyle
style2.Font = "Desyrel" ' mind the case! It has to be the same as in the XML file
style2.Size = 20
' create a text display object
dim text2 as new ABXPText("text2", "Bitmap font - Click Counter: 0", 320,600, 255, 0, 1, 1, style2, ABXPFontType.BitmapFont)
ABXPlay1.AddDisplayObject(text2)
' tween scale it
Text2.TweenStartScale("scaleText1",ABXPTweenEasingType.easeLinear, ABXPTweenRepeatType.ReturnContinuous, 3000, 1,1,3,3)
' create a google font style
dim style3 as new ABXPTextStyle
Style3.FillColor = &cFF0000
style3.Font = "Aclonica"
style3.Size = 14
style3.WordWrap = true
style3.WordWrapWidth = 200
' create a text display object
dim text3 as new ABXPText("text3", "This text should be in the Google font called 'Aclonica'", 160,300, 255, 0, 1, 1, style3, ABXPFontType.RealFont)
ABXPlay1.AddDisplayObject(text3)
' create a google font style
dim style4 as new ABXPTextStyle
style4.Font = "Acme"
style4.WordWrap = true
style4.WordWrapWidth = 200
' create a text display object
dim text4 as new ABXPText("text4", "In Google font called 'Acme'", 160,450, 255, 0, 1, 1, style4, ABXPFontType.RealFont)
ABXPlay1.AddDisplayObject(text4)
Text4.TweenStartRotation("rotate", ABXPTweenEasingType.easeLinear, ABXPTweenRepeatType.RestartContinuous,6000, 0,360)
' update all this info to the canvas
ABXPlay1.Update()
End SubI’m feeling confident I will be able to put out a beta in a couple of weeks. If you’re interested, PM me.
Oh yes, and in the demo you can click the canvas to demonstrate updating text documents (the counter)
Again, sustaining 60 FPS on Safari and Chrome on OS X.
It caught the clicks as fast as I could click and no drop in framerate when handling them.
full 60 FPS on FF, IE and Chrome, all three together.
IE starts with 62 FPS.
Resizing the browsers:
IE keeps showing constant 60 FPS only ‘problem’ is still the disappearing of the FPS control behind the picture.
FF FPS drops to 32 while fast resizing
Chrome FPS drops to 38 while fast resizing.
Sharpest picture on IE.
Conclusion (again):
The winner: Internet Explorer
Clicks just as with Tim’s test, i didn’t see any missed click, even the doubleclick with the middle mousebutton was registered correctly.
@Alain Bailleul Very cool. I’m also getting 60FPS.
Feedback was great as always! I’m going to work on the Xojo Web <- > browser communication next. But first I have to undergo some minor surgery removing the gallbladder, so there may be some time until the next update. Gives me some time to think on a system
Again … impressive !
I wish you a quick and healthy recovery!
First some good news! Just talked to my doctor and it seems we’ll wait to do the surgery. May still be possible if the situation gets worse. But thanks everyone for the encouraging words!
Ok , back to business. And more good news!
It looks like Kenny has enchanted our South Park friends. If Stan says something, it starts to rain and if Eric speaks, the rain stops again
So what’s new:
- Audio engine should be build in (background music, effects) (supporting all browsers is hell, so please report if any device/browser combo does not work)
- a particle emitter system! With this part of the engine you can generate effects like smoke, fire, rain etc with literally thousands of sprites. In the demo every rain drop and every kenny is a sprite.
Demo is the same link as in post 1 and will be up again a couple of hours.
What can you do in the demo:
- in the background the South Park theme song should play
- click on the background to generate a kenny emitter (every click will generate a lot of kennys for 5 seconds)
- click on Stan to let it rain (he speaks also)
- click on Eric to stop the rain (speaks also)
- Eric and Stan are still draggable
The code snippets:
[code]Sub PreloadAssetsEmitter()
’ load assets
ABXPlay1.LoadAssetTexture(“background”, “background.png”)
ABXPlay1.LoadAssetTexture(“kenny”, “kenny.png”)
ABXPlay1.LoadAssetTexture(“stan”, “stan.png”)
ABXPlay1.LoadAssetTexture(“eric”, “eric.png”)
ABXPlay1.LoadAssetTexture(“snow”, “Snow.png”)
ABXPlay1.LoadAssetTexture(“rain”, “Rain.png”)
ABXPlay1.LoadAssetAudio(“themesong”, “ThemeSong.mp3”)
ABXPlay1.LoadAssetAudio(“ohmygod”, “OhMyGodTheyKilledKenny.mp3”)
ABXPlay1.LoadAssetAudio(“crap”, “YouPieceOfCrap.mp3”)
End Sub
Sub DrawEmitter()
’ create a sprite
dim bg as new ABXPSprite(“background”, “background”, 0,0, 255, 0, 1,1)
ABXPlay1.AddDisplayObject(bg)
’ add the other draggable chars
’ create a container with a sprite so we can move it
dim Stan as ABXPAsset = ABXPlay1.getAsset(“stan”)
dim cStan as new ABXPContainer(“containerStan”, 250, 625, Stan.Width/2, Stan.Height/2,255,0,1,1,new ABXPDragArea(0,0,Stan.Width,Stan.Height))
ABXPlay1.AddDisplayObject(cStan)
dim St as new ABXPSprite(“stan”, “stan”, 0,0, 255, 0, 1,1)
cStan.AddDisplayObject(st)
dim Eric as ABXPAsset = ABXPlay1.getAsset(“eric”)
dim cEric as new ABXPContainer(“containerEric”, 400, 635, Eric.Width/2, Eric.Height/2,255,0,1,1,new ABXPDragArea(0,0,Eric.Width,Eric.Height))
ABXPlay1.AddDisplayObject(cEric)
dim er as new ABXPSprite(“eric”, “eric”, 0,0, 255, 0, 1,1)
cEric.AddDisplayObject(er)
’ add continious playing theme song
dim themesong as new ABXPAudioObject(“themesong”, “themesong”)
ABXPlay1.AddAudioObject(themesong)
’ and play it in a loop
themesong.Play(30,true)
’ add the voice of stan
dim ohmygod as new ABXPAudioObject(“ohmygod”, “ohmygod”)
ABXPlay1.AddAudioObject(ohmygod)
’ add the voice of eric
dim crap as new ABXPAudioObject(“crap”, “crap”)
ABXPlay1.AddAudioObject(crap)
’ create an emitter for kenny’s when clicking the background
dim emit as new ABXPParticleEmitter(“kennyemit”)
emit.SetParticleTextures(Array(“kenny”))
emit.SetParticleAlpha(128, 50)
emit.SetParticleScale(0.25,0.75,0.5)
emit.SetParticleSpeed(200,50)
emit.SetParticleStartRotation(0,360)
emit.SetParticleRotationSpeed(0,10)
emit.SetParticleLifetime(4,4)
emit.SetEmitterSpawnFrequency(0.016)
emit.SetEmitterMaxParticles(500)
emit.SetEmitterLifetime(5)
ABXPlay1.LoadParticleEmitter(emit)
’ create a rain effect when clicked on stan
dim rain as new ABXPParticleEmitter(“rainemit”)
rain.SetParticleTextures(Array(“rain”))
rain.SetParticleAlpha(128,128)
rain.SetParticleScale(1,1,1)
rain.SetParticleSpeed(3000,3000)
rain.SetParticleStartRotation(65,65)
rain.SetParticleRotationSpeed(0,0)
rain.SetParticleLifetime(0.81,0.81)
rain.SetEmitterSpawnFrequency(0.004)
rain.SetEmitterMaxParticles(1000)
rain.SetEmitterAsRectSpawn(0,0,-600,-460,1880,20)
ABXPlay1.LoadParticleEmitter(rain)
End Sub
Sub ClickedSelf(ClickAreaName as String, x as integer, y as Integer)
’ start a new emitter with every click
EmitCounter = Emitcounter + 1
ABXPlay1.StartParticleEmitter(“kennyEmit” + str(Emitcounter), “kennyemit”,x,y)
’ update the new state
ABXPlay1.Update()
End Sub
Sub Clicked(Container as ABXPContainer, ClickAreaName as String, x as integer, y as Integer)
select case Container.Name
case “ContainerStan”
’ get the audo object
dim o2 as ABXPAudioObject = ABXPlay1.InternalObjects.Lookup(“ohmygod”, nil)
if o2 <> nil then
o2.Play(60,false)
end if
’ start the rain
ABXPlay1.StartParticleEmitter(“rainEmitter”, “rainemit”,x,y)
case “ContainerEric”
’ get the audo object
dim o2 as ABXPAudioObject = ABXPlay1.InternalObjects.Lookup(“crap”, nil)
if o2 <> nil then
o2.Play(60,false)
end if
’ stop the rain (if running)
ABXPlay1.StopParticleEmitter(“rainEmitter”)
end select
’ and update the new info to the canvas
ABXPlay1.Update
End Sub
[/code]
Update: It looks like HTML5 audio support on Safari for iOS and OSX is very limited compared to all the other browsers.
I let the demo up as is and tomorrow night I set it up without audio for those users. Looks like a lot more time will get into the audio layer because of one darn browser 
if you are using Safari, there is a possibility it will simply not load, and if it loads, the Stan click to start the rain will probably not work to generate rain as playing a second audio file in Safari fails. And from what I read on the net the workarounds are ridiculous.