Forums » Help » Ejecta Gui?

I am currently working on a game using just ejecta. No impact.
How should I go about creating a gui/hud for options, and settings.
I'm quite familiar with web design and development, so something like phonegap would make it a lot easier, but i have not seen any tutorials or examples on how to do so.
If someone could point me in the right direction I'd really appreciate it.

For instance, loading up a phonegap wrapped project, then on game start load up the ejecta app.

Ejecta doesn't work the same way as phone gap, even though they are similar. Phoegap allows you access to native api while writing a html page.

Ejecta is basically just a canvas and js runtime environment. There is no real dom or html elements to use.

Ejecta works well with other JS HTML game engines, like construct, melon, and create, but they mostly depend on canvas to render their games.

How are you writing your game? If you are doing the game as mostly html5 dom objects, then there are better alternatives then ejecta as it is mostly just for JS and Canvas games

Im using pure javascript. no DOM.
The only other library Im using is three.js. Hence my need for ejecta.
I actually tried prototyping in 2d canvas, but it proved impossible.
Since I have a lot of entities rotating around an axis, and rotations in 2d canvas are difficult. So I got three.js and orbit the entities around an axis, and it works flawlessly.

So would it be easier to create a native obj c view?
I just need a way to toggle settings and display relevant information.
Such as high score, change difficulty, in app purchases, a menu to start the game, 'Game Over' and it brings you back to the main menu. So on and so forth.
I do a bit of web design and development so using those technologies would make it easier and faster. But I feel competent I could figure out how to do it natively.

bumping cuz Im still lost, and hoping someone could point me in the right direction.

I tried using something similar to this but no dice.
ejecta is missing certain features.
So then I actually tried using cocoonjs, and it almost works, but not quite.
cocoonjs is just really confusing to begin with.

would it be possible to create a uiwebview and interface that with ejecta?

Ok. So i think I know what I can do.
draw text on the canvas to certain x and y position
Using this:

document.addEventListener( 'touchstart', function( ev ) {
    var xPos = ev.touches[0].pageX
   var yPos = ev.touches[0].pageY 
}, false );

check to see if the x and y positions match that of the text and if so call the required function.
I'll give it a shot.

I'm just going to throw this out there, but it should be possible to use an all canvas based GUI library for GUI-heavy games with Ejecta. For games distributed on the web or using node-webkit, using a DOM overlay would be best, but if a rich GUI is mandatory, then you could give Zebra a try

Quote from lTyl
I'm just going to throw this out there, but it should be possible to use an all canvas based GUI library for GUI-heavy games with Ejecta. For games distributed on the web or using node-webkit, using a DOM overlay would be best, but if a rich GUI is mandatory, then you could give Zebra a try

thanks, I'll try it out and report back my findings.
the main problem Im running into is using three.js the renderer takes up the entire window. and to draw anything to the screen, it has to be drawn using three.js. Such as a counter I have in the top left corner. Its a 2d canvas texture applied to a three.js mesh and moved to the correct position in '3d' space. I'll experiment.
But it looks like zebra would be useful for the gui and settings, outside the actual game runtime.
Thanks again.

Playing around with the example page looks promising. I tested it on my iphone and it worked well enough.
I noticed a couple drawbacks to running it in mobile safari, but im confident they wont be an issue running in ejecta. the page scrolls when trying to drag a slider for instance, and on taps the whole canvas gets highlighted, and an accidental double tap zooms in or out to the canvas.
But all in all im impressed and it should come in handy.

Quote from dwightdoane
Playing around with the example page looks promising. I tested it on my iphone and it worked well enough.
I noticed a couple drawbacks to running it in mobile safari, but im confident they wont be an issue running in ejecta. the page scrolls when trying to drag a slider for instance, and on taps the whole canvas gets highlighted, and an accidental double tap zooms in or out to the canvas.
But all in all im impressed and it should come in handy.

There are a lot of negative drawbacks using an all canvas GUI library, but if you have no DOM to fallback on I don't really see much of a choice. Either way, good luck in your future tests :)

Quote from lTyl
There are a lot of negative drawbacks using an all canvas GUI library, but if you have no DOM to fallback on I don't really see much of a choice. Either way, good luck in your future tests :)

Well, this library isn't of use to me.
Certain regular browser javascript functions getelementbyid and window.location are used in it, and these aren't supported in ejecta.
so its back to square 1.
I appreciate you trying to help.
But the quickest and easiest way of doing it that i can think of is drawing 'button.png' or similar to the canvas, and checking to see if a touch event is over it.
I can write a small script to create new buttons and drawImage them to the canvas instead of trying to make them out of canvas' built in fillRect or fillText.
Thanks again!

I have another problem now. When I enter the game state and load up three.js how do i exit it?
I can clear all objects from the scene, but the renderer is still running.
I tried making a canvas2 and passing that to the renderer, but how do i leave three.js and go back to the main canvas?

If worse comes to worse i can just draw all my ui inside the 3d renderer over the game and show/hide things as needed.
Which could also be kinda cool.

If its not one thing its another.

So I made a script to create a new uiComponent();
and this creates a canvas, i draw the text or image to it, then use it to apply a texture and material to a threejs planegeometry.
then add it to the scene.
the only annoying problem with that is the xyz coordinates of that do not equal x and y of a 2d canvas.
for instance
uiComponent at (0, 0, 100) puts it in the center of the window
which is actually canvas.width/ 2 and canvas.height/2
so now its figuring out how to check if a touchevent is over the created uielement and not around it or near, but inside of it.
which is proving more difficult than it should.

So i figured that out.
I successfully mapped 2d positioning
ig: (x: canvaswidth/2, y:0canvasheight/2)
to be:
threejs's (x: 0, y: 0, z:1)
So now I can position elements anywhere relative to the screen's position in 2d space, just like i would if i were just drawing rects and images to a normal canvas.
Which helps when I have touch events.
touchX and touchY inside of an element are correctly listened for.
touches are bound inside of an elements width, height and position.

This of course depends on threejs's origin (x: 0, y:0, z:0) being the center of the screen.
Which for my application it is.

Hello DwigthDoane,

I fell into the same problem as you, as I am trying to develop a WebGl / Three.js app that targets iOS. So far, the result with Ejecta are quite satisfactory : the WebGL side is quite fast and seems stable.

However, I also would need to have a kind of HUD with some button / labels and sliders. After a quite long search on the web, I did not find any solution, other than your post.

So I have a question for you ; did you succeed in your development of a gui? If so, would you accepts to share some of your results?

I am in a bit of a dead end now, and I am considering to use alternatives like unity3d, but I really do like the idea of using Ejecta.

No obligation, I'm just asking,
Regards