Looking for a simple generic game framework not tied to Canvas

[Nicolas Hoizey]

Hi there,

 

I already told you about my HTML/SVG game called esviji a while ago in the Game Shocase threads.

 

This first verson works pretty well, but it's only a pet project I developed on my spare time (not a lot), and the JavaScript source code is pretty ugly IMHO.

 

I would like to start working on a second version that would be much better, and try to stop reinventing the wheel.

 

The issue I'm facing is that almost all HTML5 game developement frameworks are closely tied to Canvas, which most games use indeed. But I don't use Canvas at all.

 

My v1 game interface was almost only one single SVG element with sub-elements shown or hidden according to game states/screens (welcome screen, playing, pause, scores, settings, etc.).

 

The v2 interface I'm currently working on mixes plain HTML for most screens, and only the SVG for the "active" part of the game (board and balls). I did this because I want it to be truely responsive, working as well on portrait and landscape, on any device ratio, from 9/16 to 16/9 at least but even more "extreme".

 

So, I'm looking for a framework, or at least a code template/boilerplate, that would help me create a better JavaScript architecture, including:

• modularity
• game states/screens
• game loop
• etc.

 

Any advice or comment?

[alex_h]

I want it to be truely responsive, working as well on portrait and landscape, on any device ratio, from 9/16 to 16/9 at least but even more "extreme".

 

This is perfectly achievable with canvas.

[Nicolas Hoizey]

This is perfectly achievable with canvas.

 

I know, but I don't want to use Canvas, so it doesn't answer my question... ;-)

[lane]

Is there something particular about canvas you don't want to use or is it because you want to use svg for the scalability? I'm a huge fan of svg myself and looked into the options a while back. You could go the route of dom/html/svg and use css/javascript animation frameworks like svg.js, snap.js, etc, but the problem you'll run into is that the dom is extremely slow and well documented in being the main bottleneck for most web applications.

 

If you're just attached to svg like I am, and it's not really the issue of canvas itself, the only other option I've found is Easeljs using its SpriteSheetBuilder (http://www.createjs.com/Docs/EaselJS/classes/SpriteSheetBuilder.html) feature which allows you to push vector assets and build sprite sheets on the fly. What drew me to this was the efficiency of file size and scalability. You can still use your single vector file as the source, then render it as a sprite sheet, or even on the fly directly to the canvas allowing you to take advantage of the gpu increases and interaction that it provides.

 

If its just canvas in general, another option is to look into something like d3.js which doesn't incorporate the canvas at all, yet still allows interaction (even touch for mobile), and tightly coupled with just plain svg and javascript.

[lane]

Looks like someone even tried out using d3.js for a game which is pretty interesting: http://d3shooter.herokuapp.com

[Nicolas Hoizey]

Is there something particular about canvas you don't want to use or is it because you want to use svg for the scalability?

 

I wanted to use SVG to learn it. The game's name comes from this.

 

I agree with others saying it is possible to build a responsive web designed game with Canvas, but I feel it is simpler with SVG.

 

I'm a huge fan of svg myself and looked into the options a while back. You could go the route of dom/html/svg and use css/javascript animation frameworks like svg.js, snap.js, etc, but the problem you'll run into is that the dom is extremely slow and well documented in being the main bottleneck for most web applications.

 

I'm already planning to replace native SMIL animations with Snap.svg because I want to be compatible with IE9+ and I don't like FakeSmile.

 

I still have to make some tests for the speed/smooth animations issue, you're right.

 

But it doesn't answer my need for a boilerplate/template/framework… ;-)

 

If you're just attached to svg like I am, and it's not really the issue of canvas itself, the only other option I've found is Easeljs using its SpriteSheetBuilder (http://www.createjs.com/Docs/EaselJS/classes/SpriteSheetBuilder.html) feature which allows you to push vector assets and build sprite sheets on the fly. What drew me to this was the efficiency of file size and scalability. You can still use your single vector file as the source, then render it as a sprite sheet, or even on the fly directly to the canvas allowing you to take advantage of the gpu increases and interaction that it provides.

I'll look into this option, thanks. Do you have anything online I could see?

 

If its just canvas in general, another option is to look into something like d3.js which doesn't incorporate the canvas at all, yet still allows interaction (even touch for mobile), and tightly coupled with just plain svg and javascript.

I don't know d3.js very well, but I don't think it answers my need expressed in the first message of the topic.

[Nicolas Hoizey]

Looks like someone even tried out using d3.js for a game which is pretty interesting: http://d3shooter.herokuapp.com

I already knew this game, but I don't plan to use d3.js.

Anyway, the source code of the game if really interesting, so thanks a lot! ;-)

[lane]

I was working with a medical startup (neuroscience in games), part of the requirements was being cross platform and able to run on iPads, and on the web, so doctors could give tests for potentially catching symptoms early to some diseases. We knew it had to be html5, but it also had to be performant, so using vector for the artwork and delivery was ideal due to scalability to different devices and smaller file sizes. We went with Easeljs because of this, but also it didn't throw on additional "framework" baggage allowing us to code the functionality we wanted (i.e. metrics played a large part since we were measuring reaction times on certain brain function tasks).

 

An initial screen is at https://www.behance.net/gallery/14170549/UIUX but it's just the start screen (MOES). Basically it was just a wack-a-mole concept with a very specific timer that increased in speed, we then measured the response times over multiple tries. The screen below that one was another concept for measuring whether someone could follow a path (and how accurate). The prototypes were presented at Stanford for StartX Med in 2013, but the main focus was the metrics.

 

The images are not much to go by, but I can tell you the workflow: I created all the artwork in vector (Illustrator) which was my source, but I used Flash (editor) and Toolkit for CreativeJS plugin to export svg data that was coded for quick integration into the project, he's an example of one of the vector pieces:

(lib.MoesHeart = function() {	this.initialize();	// Layer 1	this.shape_33 = new cjs.Shape();	this.shape_33.graphics.f("#F495BF").s().p("AA8hAQgYgKgTAKQgHADgJAOIgFAOQgLgXgLgHQgJgGgTAFQgTAFgFAKQgIANACASQACARAHAKQAKAPAZARQAeAVAHAIQAJgLAcgKQAagKALgNQAQgSgCgdQgDgigWgJIAAAA").cp();	this.addChild(this.shape_33);}).prototype = p = new cjs.Container();p.nominalBounds = new cjs.Rectangle(-8.5,-6.9,17.2,14.1);

Note that we weren't utilizing the Sprite Sheet Builder feature for this since we had a controlled environment, and tbh, we were just trying to get concepts out so I was looking for an extremely fast pipeline. The nice thing about all of this was that it labeled each element within code so I could reference it by the names of the layers I set up within Flash. We then drew the board from one source file that defined the vector shapes:

function JSWhackAMoleBoard(theCanvas) {	// trees-upsidedown	var instance_26 = new lib.TreesDown();	instance_26.setTransform(512.7,345.2,1,1,0,0,0,-0.1,0.2);	// trees-blue	var instance_27 = new lib.TreesUp();	instance_27.setTransform(514,226,1,1,0,0,0,-0.1,-0.1);	// Lickety-small	var instance_28 = new lib.Lickety();	instance_28.setTransform(342.6,274.9);	// Ion-small	var instance_29 = new lib.Ion();	instance_29.setTransform(747.3,258.4);	// foreground	var instance_30 = new lib.Foreground();	instance_30.setTransform(516.8,770.9);	// BackSketches	var instance_30a= new lib.BackSketches();	instance_30a.setTransform(514.2,152,1,1,0,0,0,0.2,0);	// ground	var instance_31 = new lib.Ground();	instance_31.setTransform(516.2,559);	// kiaora	var instance_32 = new lib.Kiaora();	instance_32.setTransform(550.2,295.5);	// pillow	var instance_33 = new lib.Pillow();	instance_33.setTransform(536,215.5);	// sky	var instance_34 = new lib.Sky();	instance_34.setTransform(510.8,163.3);	// TODO: Put all configuration options into one huge JSON object. 	this.my_countdown_obj= new lib.ReadySteadyGo(0, 0, true);	this.my_countdown_obj.x=theCanvas.width/2;	this.my_countdown_obj.y=theCanvas.height*2/3;	this.my_moes_big_set=[ new lib.MoesEvil01(), new lib.MoesEvil02(), new lib.MoesHappy01(), new lib.MoesHappy02(), new lib.MoesHappy03() ];	this.my_moes_is_good_set=[false, false, true, true, true];		this.my_moes_vec_evil_set=[ new lib.MoesEvil01(), new lib.MoesEvil02(), new lib.MoesEvil03(), new lib.MoesEvil04(), new lib.MoesEvil05()];	this.my_moes_vec_good_set=[ new lib.MoesHappy01(), new lib.MoesHappy02(), new lib.MoesHappy03(), new lib.MoesHappy04(), new lib.MoesHappy05() ];	this.my_moes_vec_all_set=this.my_moes_vec_evil_set+this.my_moes_vec_good_set;		// Need to figure out how to scale these suckers.	for(var i=0;i<this.my_moes_vec_all_set.length;i++) {	//	this.centerJSAsset(this.my_moes_vec_all_set[i]);	};

Anyhow, I no longer use Adobe CC, got tired of the subscription model, so I'm not sure what the alternative to the Flash -> code from Toolkit for CreativeJS is, or whether you can reference the svg stuff directly, although I'm interesting in knowing so may play around with it in upcoming month.

[IamThatGuy]

All real-time HTML5 games use canvas?

[lane]

All real-time HTML5 games use canvas?

 

 

You can use canvas or DOM. DOM is a bit harder and generally has performance issues; I only know of Crafty ( http://craftyjs.com ) and d3.js ( http://d3js.org ) as a decent option of this. Canvas has actually been around for a while, thus why there is really good browser support: http://caniuse.com/#search=canvas . Most of the time when you see canvas engines, its in reference to canvas 2d, but there's also webgl, which actually runs *in* canvas, but adds language in form of a 2d api to do 3d graphics within the canvas. 

 

WebGL is getting popular, but you have to factor in device support: http://caniuse.com/#search=webgl Pixi.js, three.js, phaser.js, asm.js have really been impressive in pushing this. But in the end, html5 games does (mostly) revolve around canvas.

[Nicolas Hoizey]

I was working with a medical startup (neuroscience in games), part of the requirements was being cross platform and able to run on iPads, and on the web, so doctors could give tests for potentially catching symptoms early to some diseases. We knew it had to be html5, but it also had to be performant, so using vector for the artwork and delivery was ideal due to scalability to different devices and smaller file sizes. We went with Easeljs because of this, but also it didn't throw on additional "framework" baggage allowing us to code the functionality we wanted (i.e. metrics played a large part since we were measuring reaction times on certain brain function tasks).

[…]

All of this is really interesting, thank you for the detailed answer, but once again, it shows more how to deal with vector graphics, not really how to design the game base logic.

All real-time HTML5 games use canvas?

Not all, but almost.