Re: embedding sphere into a browser
Reply #24 –
What browser are you using, and what version? The shim I made for pixi.js is extremely lightweight, so this sounds really disturbing to me.
Edit:
Wait a minute... My entire tengudev web space is gone!
Edit:
It's back up, weird. Anyways, I've tested and it works in IE 8, Chrome v26.*, and Firefox "late enough one". the demo is a moving image, a static image, both at opacity 0.5, and if you hit the asterisk key on the num-pad you see the fps on the upper-left hand corner. And now you can move the image with the Sphere's mouse API, click anywhere and an image will be set to that location. Can't do right click, sadly.
Metallix you said this:
For performance reasons I want to use window.requestAnimationFrame(), but that stands against the way how sphere works with its FlipScreen() rendering...
But I was able to get around it. I fill a queue that emulates the blits to a backbuffer. Then when the animFrame is called it draws the items in the queue, removing each element along the way. This emulates the backbuffer/flipscreen calls we are used to in Sphere. take a look at the source for the above demo. It uses pixi.js for the webGL rendering.
The source for the above demo looks
exactly like sphere API:
image.blit(120 + j, 64);
image.blit(x, y);
if (IsMouseButtonPressed(MOUSE_LEFT)) {
x = GetMouseX();
y = GetMouseY();
}
j += up ? 1 : -1;
if (up && j == 64) up = false;
if (!up && j == 0) up = true;
if (IsKeyPressed(KEY_UP)) { y--; }
if (IsKeyPressed(KEY_DOWN)) { y++; }
if (IsKeyPressed(KEY_LEFT)) { x--; }
if (IsKeyPressed(KEY_RIGHT)) { x++; }
font.drawText(4, 270, "Mouse Click: Set image position.");
font.drawText(4, 285, "Arrow Keys: Move image around.");
One caveat: the game loop cannot be a
while(true). But so long as you manually change that and make sure other loops don't happen, then your game should port over perfectly (once I finish the API).
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.
Sphere-sfml
hereSphere Studio editor
here