NOTE: This is in very early stages
ABXPlay is a canvas that supports WebGL and falls back to the HTML5 canvas when WebGL is not supported in the browser.
Currently it can handle the following:
- primitives (lines, rects, circles, polygons,…)
- container objects that group primitives and other containers
- scale, alpha, rotation, position tweening for all containers
- dragging containers
Code looks line this:
Sub Initialized(GraphicsType as String)
' start the render
me.Start()
' add a graphics object to the canvas
dim g as new ABXPGraphics("graphics")
me.AddDisplayObject(g)
// set a fill and line style
g.beginFill(&cFF3300)
g.lineStyle(10, &cffd900, 255)
// draw a shape
g.moveTo(50,50)
g.lineTo(250, 50)
g.lineTo(100, 100)
g.lineTo(250, 220)
g.lineTo(50, 220)
g.lineTo(50, 50)
g.endFill()
// draw a rectangle
g.lineStyle(2, &c0000FF, 255)
g.drawRect(50, 250, 100, 100)
// set a fill and line style again
g.lineStyle(10, &cFF0000, 200)
g.beginFill(&cFF700B, 255)
// draw a shape
g.moveTo(210,300)
g.lineTo(450,320)
g.lineTo(570,350)
g.quadraticCurveTo(600, 0, 480,100)
g.lineTo(330,120)
g.lineTo(410,200)
g.lineTo(210,300)
g.endFill()
// draw a circle
g.lineStyle(0)
g.beginFill(&cFFFF0B, 128)
g.drawCircle(470, 200,100)
g.endFill()
g.lineStyle(20, &c628CEA)
g.moveTo(30,30)
g.lineTo(600, 300)
' create a container object
dim c1 as new ABXPContainer("first", 250,200, 50, 100, true, true,255,0,1,1)
' define a drag area as a rectangle
c1.DragArea = new ABXPDragArea(0,0,100,200)
me.AddDisplayObject(c1)
' add a graphics object
dim gc1 as new ABXPGraphics("graphics")
c1.AddDisplayObject(gc1)
' draw on the graphics Object
gc1.LineStyle(5, &c00FF00, 255)
gc1.BeginFill(&c00FF00, 128)
gc1.DrawRect(0,0,100,200)
' create a sub container that is attached to the first container
dim c2 as new ABXPContainer("second", 100,50, 125, 125, false, false,128,0,0.5,0.5)
c1.AddDisplayObject(c2)
' add a graphics object
dim gc2 as new ABXPGraphics("graphics")
c2.AddDisplayObject(gc2)
' tween scale + alpha + position
c2.TweenStart("Position2", ABXPTweenType.Position, ABXPTweenEasingType.easeLinear, 3000, ABXPTweenRepeatType.ReturnContinuous, 100,50,500,50)
c2.TweenStart("scale2", ABXPTweenType.Scale, ABXPTweenEasingType.easeLinear, 5000, ABXPTweenRepeatType.ReturnContinuous, 1,1,3,3)
c2.TweenStart("alpha2", ABXPTweenType.Alpha, ABXPTweenEasingType.easeLinear, 5000, ABXPTweenRepeatType.ReturnContinuous, 128,0,255,0)
' draw something on the graphics layer
gc2.LineStyle(5, &c0000FF, 255)
gc2.BeginFill(&c0000FF, 128)
gc2.drawCircle(25,25,25)
' create a third container
dim c3 as new ABXPContainer("third", 450,500, 50,50, true, true,255,0,1,1)
' define a drag area as a polygon
c3.DragArea = new ABXPDragArea(Array(5,0,100,95,95,100,0,5))
me.AddDisplayObject(c3)
' add a graphics object
dim gc3 as new ABXPGraphics("graphics")
c3.AddDisplayObject(gc3)
' draw something on it
gc3.LineStyle(5, &c00FF00, 255)
gc3.MoveTo(0,0)
gc3.LineTo(100,100)
' a forth container
dim c4 as new ABXPContainer("forth", 800,400, 200,200, false, false,255,0,1,1)
me.AddDisplayObject(c4)
' add a graphics object
dim gc4 as new ABXPGraphics("graphics")
c4.AddDisplayObject(gc4)
' tween rotate this object
gc4.TweenStart("rotate1", ABXPTweenType.Rotation, ABXPTweenEasingType.easeLinear, 10000, ABXPTweenRepeatType.RestartContinuous, 0,0,360,0)
' draw on the graphics Object
gc4.LineStyle(5, &cEA62C5, 255)
gc4.BeginFill(&cEA62C50, 128)
gc4.DrawRect(0,0,400,400)
' update all this info to the canvas
me.Update
End Sub
For a couple of hours the following link will be up to see it working: http://alwaysbusy.no-ip.org
You can drag the green objects around.
My benchmarks (some feedback from others on iPhone, iPad, native OSX would be nice)
Windows, Chrome, 60 FPS
Windows, Firefox, 25 FPS (but it’s known firefox has very bad support for WebGL)
Windows, Internet Explorer 11, 60 FPS
VMWare OSX Mavericks, Safari, 25 FPS
Android, Chrome, 60 FPS
Android, Firefox, 60FPS
Let me know if there is some interest in such a control. I will then continue working on it.