Skip to main content

News

Topic: embedding sphere into a browser (Read 20971 times) previous topic - next topic

Re: embedding sphere into a browser
Reply #15
Hmm ok, another evening wasted playing around with sphere/html5. The webworker approach is doing well. But I learned that the canvas is a bit mean when it comes to pixel perfect rendering. While rectangles are okay, drawing a pixel perfect line without anti alias is somehow impossible in the context2d. The only option you have there is to implement those graphic primitves functions by manipulating a image data array. I don't think that the performance will be acceptable this way. The other option is webGL. I found that http://threejs.org/ could be a good layer for rendering. But fonts, audio and map engine would be still a huge problem.

There could be another option for porting sphere to a browser:
https://github.com/kripken/emscripten/wiki
This would actually compile the sphere engine itself to javascript. But I have not checked the details.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: embedding sphere into a browser
Reply #16
I have already mentioned https://github.com/GoodBoyDigital/pixi.js, it uses WebGL and I think can be used to great effect especially for 2D games. It boasts a really nice sprite batcher, which has some amazing performance benefits. If I were to start on a Web based Sphere, I'd really start there.
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 here
Sphere Studio editor here

Re: embedding sphere into a browser
Reply #17
Funny thing, I've heard of emscripten before.

While rectangles are okay, drawing a pixel perfect line without anti alias is somehow impossible in the context2d. The only option you have there is to implement those graphic primitves functions by manipulating a image data array. I don't think that the performance will be acceptable this way.


Conceptually, that's exactly how TurboSphere draws lines. And rectangles, and circles, and everything. It's actually faster when I need alpha.

Re: embedding sphere into a browser
Reply #18
Heh, I know that guy ;)

Hmm yeah, there are some good js libraries out there... For that primitive drawing I did a test once on a 640x480 canvas and it was a bit disappointing if I had to draw on the whole screen which is very common in games. Meh...

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: embedding sphere into a browser
Reply #19

Hmm ok, another evening wasted playing around with sphere/html5. The webworker approach is doing well. But I learned that the canvas is a bit mean when it comes to pixel perfect rendering. While rectangles are okay, drawing a pixel perfect line without anti alias is somehow impossible in the context2d.

Have you tried subtracting 0.5 pixels from your graphic positions? Canvas draws stuff in the middle, so drawing a 1 pixel line on for example an y axis of 0 will cause it to draw an antialiased grey line on the area surrounding it, instead.

Re: embedding sphere into a browser
Reply #20
yes, I knew about this trick. It did not fixed all my issues. A non-straight line would still be anti aliased. Some of us may think that this good, but I think it can destroy the look and feel of a game. Anyway, yesterday I did a webGL approach with three.js and got some very promising results. First I went for pixi.js but it is still in a very early stage and It did not offer the interface I would like to have. three.js instead gives me some good low level access to webGL but keeps it still simple enough. This low level access is very good if you go to implement the graphic primitives and want to get the best performance. I will play a bit more with it. Let's see where this leads to ^^

Re: embedding sphere into a browser
Reply #21

Not currently. Eggbert had a way of downloading games to play on your computer, but it was by no means an embedded Sphere engine. I was going to do this but never got around to it.

JavaSphere was originally intended to use Rhino to play Sphere games in the browser, with all of Sphere's functiosn emulated in Java. When that turned out to be way too difficult at the time (I could probably pull it off now, but I don't have the time and I admittedly haven't even been working with Sphere much lately) I turned it into the downloader, which was still pretty buggy. And the site it was on is down anyway.
  • Last Edit: April 26, 2013, 05:25:59 pm by Eggbert

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: embedding sphere into a browser
Reply #22
Have fun: http://radnen.tengudev.com/spheretest/

It's still in early alpha.
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 here
Sphere Studio editor here

Re: embedding sphere into a browser
Reply #23
Huh, doesn't seem to work for me. It just sits there loading, and then times out.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
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:
Code: (javascript) [Select]

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).
  • Last Edit: May 12, 2013, 03:38:42 am by Radnen
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 here
Sphere Studio editor here

Re: embedding sphere into a browser
Reply #25
Ah, yes it's working now.

Very nice.

Re: embedding sphere into a browser
Reply #26
Very nice!

I went for the graphic primitives approach using three.js. But currently I am stuck in implementing a bitmap font renderer ^^
I think we both went for the same approach filling a buffer and draw it on flip screen. I also do not support while(true) gameloops. I recommend putting everything into a web worker. I am still not sure if I will continue my approach, since you are also going to create a web version. Can you draw pixel perfect lines in pixi.js? I found that much easier in three.js. But the question is, do we want anti alias or not in a web sphere? For my three.js approach I probably wait until turbo sphere has a stable graphics open gl plugin and see if I can adapt the gl code there... if I will continue it at all.

Re: embedding sphere into a browser
Reply #27

Have fun: http://radnen.tengudev.com/spheretest/

It's still in early alpha.


wow super cool

what version of sphere is that?

ps. i know im just a junior script kid at best, but if there is anything anyone needs done to help any of their projects to move this forward, i would love to help, oh and btw it works fine on chrome
  • Last Edit: May 13, 2013, 09:00:33 am by ninjasword

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: embedding sphere into a browser
Reply #28

what version of sphere is that?

No version; just an implementation of some of Sphere's functions, as far as I can see. A good start!

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: embedding sphere into a browser
Reply #29

I went for the graphic primitives approach using three.js. But currently I am stuck in implementing a bitmap font renderer ^^
I think we both went for the same approach filling a buffer and draw it on flip screen. I also do not support while(true) gameloops. I recommend putting everything into a web worker. I am still not sure if I will continue my approach, since you are also going to create a web version. Can you draw pixel perfect lines in pixi.js? I found that much easier in three.js. But the question is, do we want anti alias or not in a web sphere? For my three.js approach I probably wait until turbo sphere has a stable graphics open gl plugin and see if I can adapt the gl code there... if I will continue it at all.


pixi.js supports bitmap fonts! But there are some things it can't do, and that would be graphics primitives. I'll have to find out how by hand... Pixi.js will soon have a rendertarget, maybe it will be possible to do some stuff there.

My greatest concern is trying to open binary filetypes. In JS you have a FileReader, which works great when trying to read a binary file. But now I need to strip embedded image data out of a window style so I can draw it to screen.
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 here
Sphere Studio editor here