Canvas how manage UI and scrollable texts

[Arrowbaz]

Hi !

 

We are making a game with huge amount text. The UI are in HTML/CSS, and when the player need to move, it's in a canvas.

 

https://www.youtube.com/watch?v=r0iQfDo5U-A

 

At this moment, I use CSS media queries and zoom property to scale the game. It's work pretty fine on Webkit browser, but Firefox pixelise the game (and i don't know how this perform in mobile webview).

 

I want to migrate into full canvas game, because it's easier to scale all the game and switch to differents scenes, but how do you handle the UI ? 

 

 

I have two questions :

 

- I want to be able to have a hover on image menu, but do I need to redraw all the time the scene ?

- How manage scrollbar for long text ?

 

 

Are there a framework not collision oriented, but more on UI ?

[harrywatson]

Are there a framework not collision oriented, but more on UI ?

 

Yes and no.

 

http://www.createjs.com/#!/CreateJS

 

is good on canvas display. (UI)

 

- I want to be able to have a hover on image menu, but do I need to redraw all the time the scene ?

 

You could create an 'off screen' canvas and let it do all the work..

 

http://www.informit.com/articles/article.aspx?p=1903884&seqNum=10

 

Or you could 'layer' a canvas to do the text...

 

http://www.ibm.com/developerworks/library/wa-canvashtml5layering/

 

When you load the game include your 'text' as images or use......

 

https://www.google.com/fonts 

 

these links might also help with regard to UI

 

http://corehtml5canvas.com/code-live/ch04/example-4.22/example.html

 

http://corehtml5canvas.com/code-live/ch05/example-5.18/example.html

 

I haven't had much experience, but If I wanted to scroll a lot of text, I would

use an event listener to 'tween' an 'offscreen' image or container on 'click' or on

'mouseover'.

 

All the best - good luck 

[Arrowbaz]

Thanks for the links !

 

Layer are a good solution.

 

 

In my questions, I mean, they are no easy way to manage ui like css do, many framework solved the same problems, sprite, tilemap, perfs, ... but no one are very easy for automatically manage a text center in a button or basics things (it's juste an example), you always need to calculate all coordinates.