Jump to content

Building HTML5 game interfaces with CSS


davidelrizzo
 Share

Recommended Posts

Hi, I was looking for some advice from the game dev community.

 

I am an experienced front-end developer and have been making and designing web interface for 10+ years. I have always had a passion for playing and editing games and recently I have decided to try to build a HTML5 game, mostly as a fun personal project and to improve my JS development skills. The game will be a 2D roguelike board game port which I will be happy to get working on modern desktop and device browsers.

 

My question is: Are all my skills with HTML, CSS, responsive, cross browser etc stuff relevant in making an HTML5 game? All the examples and tutorials I see use canvas for everything including the interface. Is there any reason game developers do not build interfaces with CSS? It makes sense to me to use it considering CSS is now quite good at responsive, cross browser/device interactions and can even do most simple animations.

Link to comment
Share on other sites

It makes sense to me to use it considering CSS is now quite good at responsive, cross browser/device interactions and can even do most simple animations.

 

It makes sense to me too. I'm currently well into porting a game to HTML5 and I'm using Google's Polymer to help create a nice looking UI. Only the game elements are rendered in the canvas. I'm implementing as much of the UI as makes sense in Polymer/CSS. It's working out great. I would not want to trudge through creating a nice UI using only the canvas.

Link to comment
Share on other sites

  • 4 weeks later...

Hey! I have build my first game with css/html5/angularjs, as I wanted to learn a bit more than just to make sense and after reading a bit on CSS it did make sense.

I used flexbox/vmins/vmax. It does work and was pretty responsive.

Yet, I do not know what to to with it (I have published it on android using cordova/crosswalk in the end), as most distributing chains use canvas. I wanted to send it to clay.io, as they seem to publish css games, but I got no answer.

I am writing a bit longer post for showcase, but I have installed it on my server for the html5 community to check out:

http://squaredlines.com/stratagemone/

Link to comment
Share on other sites

Yes, HTML + CSS (and JS for event handling) is a very good tech stack for buildings UI:s, since that is pretty much what it is designed for. It doesn't really mather if it's a HTML5 game UI or a regular webpage UI.

If you are rendering your game with the canvas element, be sure to make all your UI elements descendants of the canvas so that they stay visible in fullscreen mode.

EDIT: I realised the info I posted above is wrong. All descendants of a canvas element will only be rendered if the browsers doesn't support the canvas element. So, instead you should have another HTML element, like a div, overlaying the canvas and put all UI elements within that instead.

Edited by AlanSmithee
Bad info
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...