davidelrizzo Posted August 15, 2015 Share Posted August 15, 2015 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. Quote Link to comment Share on other sites More sharing options...
BobF Posted August 18, 2015 Share Posted August 18, 2015 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. davidelrizzo 1 Quote Link to comment Share on other sites More sharing options...
mhcur Posted September 16, 2015 Share Posted September 16, 2015 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/ Quote Link to comment Share on other sites More sharing options...
przemoo83 Posted September 18, 2015 Share Posted September 18, 2015 I personally find it much easier to build UI outside canvas with HTML and CSS. However it gets more difficult when it comes to implement event listeners and so on and integrate them with Phaser. Quote Link to comment Share on other sites More sharing options...
AlanSmithee Posted September 22, 2015 Share Posted September 22, 2015 (edited) 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 February 21, 2016 by AlanSmithee Bad info Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.