HTML5/JS - A good game engine which doesn't rely on Canvas? - javascript

I'm looking to build an RTS game built mainly in HTML/CSS. There would be a map, but I am unsure if to build it in Canvas or some other way.
The map needs to stretch out for different window sizes, so I was thinking maybe SVG.
I've literally found a ton of game engines, but they seem to mainly rely on canvas.
I guess my main priorities are:
sound
frame limiting
time traversal
AI
I'm looking for a game engine library to use in Javascript that lets me render DOM elements and not just canvas elements.

Try Crafty game engine. It lets you choose between canvas and DOM rendering. And it got lots of other good stuff.

BabylonJS is the best gaming engine right now. It supports geometry instancing which provides good performance to render large amounts of units on screen. Plus it comes with its own physics engine, supports WebGL, imports Blender models and ton of other great features.
http://www.babylonjs.com/

Related

How to obtain good framerate using javascript?

I'm trying to apply filters to full-hd videos in javascript using pixel manipulation.
I created a demo using hidden canvases, web workers and transferables:
http://lab.jure.it/ww/ww.html
The result is that using web workers the browser's tab crashes in a short time, and the video has very low performances (~5fps).
If you select "Web workers: 0" ww are not used, the performance is better (~15fps) and the tab doesn't crash.
What can i do about it? The goal is to obtain a good framerate (~30fps) avoiding SVG or CSS filters.
Thanks.
Looping through all pixels and converting them on CPU is not a good idea. That's what GPUs are for. In past, that would mean you have to use something nasty, like Flash.
Fortunately, new technologies are emerging and graphic acceleration is available in most popular browsers. It's called WebGL and it allows you to make use of graphic card for these things.
Unless you want to learn all the internal secrets of WebGL (it's quite complicated), I advise you to use PixiJS framework, which is designed for 2D animation.
You can see their filtering demo here: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html
More demos and examples are here: https://pixijs.github.io/examples/#/basics/basic.js

Drawing a model from different viewpoints on HTML5 <canvas>

Well this is for a project I chose to do for my computer graphics class - drawing a grand piano that can be viewed from different angles.
I haven't yet begun the work, and I just completed lynda.com course on HTML5:Graphics and Animation with Canvas. I can see how one could make a cube, or a ball, those sorts of simple figures. But I don't know how I should proceed on my project. Defining each small surface one by one, sure will be very tedious. Should I learn some more? WebGL or something else? Or is the 'tedious' way an 'okay' way? What would you suggest?
"The different angles" implies that you want to model and render a three dimensional object.
Here is one recipe to success:
Design your model (grand piano) in any open source and free modelling application, like Blender
Then, learn basics of Three.js or similar WebGL framework which simplifies the complex process of rendering a 3D scene
Export your model from Blender and import it to your Three.js JavaScript.
It is possible to render objects to <canvas> on Three.js without WebGL, but using WebGL backend simplies the process a lot and I highly recommend sticking with WebGL.
Here are is one of Three.js examples showing some modeled cars from different angles (cameras).
HTML5 Canvas API is mostly useful for 2D graphics and does not suit for your purpose very well, as you have noticed with its limitations.
Use WebGL, Three.js aims to be very accessible. www.udacity.com have a course on 3d graphics that uses Three.js that is very good for beginning.
Real-time 3D graphics is basically about creating a 2d image that re-creates that effect of a 3d perspective and can be updated in real-time.
Going about this in a brute force way won't teach you anything about how this effect is achieved.

HTML5 Game, canvas or div?

I am planning on creating a real-time multiplayer platformer game in HTML5 using javascript. After searching about 4 hours on the webs, i couldn't find an up-to-date answer on the eternal question: rendering my game with DOM will be faster than rendering it inside a canvas? The game will be the whole document. 2/4 players will be jumping on the map and will shoot at each other, bombs will explode. So? What will it be. I remember I made 2 years ago a draw application with DOM and it worked kinda smoothly, but i guess canvas speed is better nowadays? Thank you guys.
P.S. I think of using Dart too.
I use canvas, and would say to do the same since it's a direct drawing mode. However, you should absolutely make sure it is forced into hardware acceleration wherever possible. You do this by setting the style of the <canvas> element into transform:translateZ(0); (or different browser interpretations of that, e.g. -webkit-transform:translateZ(0);). Manipulating the DOM can be slow now that canvas is closer and closer to native code, especially with simple methods to get the most performance out of it.
My games seem to do pretty well on different platforms with this - not universally well on every single platform (older Android OSes lag, but their JS & browser rendering engines weren't that fast to begin with), but quite well on many platforms.
Canvas is the best choice for the type of game you are describing, but some DOM elements are still very useful even using canvas, for example, asking the player's name, or creating a menĂº or profile section inside the game. You can render a div with absolute position on top of your canvas when you need to display DOM elements, and do all the "game stuff" like drawing and animate sprites in the canvas element.
The reason why Canvas is the best choice is simple. I'm pretty sure that you can't or it would be really hard to do things like this without the canvas element:
http://galloman.github.io/ss2d/samples/skeletons2.html
More at: http://ss2d.wordpress.com/support/

2D interactive animation engine in HTML5

I'm looking for a simple JavaScript library or framework to create interactive 2D animations in the browser. (Excuse the buzzword in the title, but I'm not set on any particular rendering technology like Canvas or SVG.)
This should make it simple to draw and animate arbitrary (though not very sophisticated) shapes on a canvas screen and allow users to select and move these shapes as objects (kind of like a very basic RTS game engine).
Ideally, the following features should be supported (directly or indirectly; I'd implement it myself if necessary):
panning
zooming
fisheye partial zooming
box selection (selecting multiple objects by drawing a box around them)
Not being familiar with such things yet, I find it tricky to research what's out there (e.g. regarding search terms). Also, I have no illusions about some magical package that doesn't require any effort on my part - indeed, I'd prefer simple and readable libraries so I can learn about the basics by reading the source.
If you like simple libraries, perhaps take a look at GameJS. It claims to be "a thin library on top of the HTML5 canvas element." It's a port of PyGame to JavaScript, which in my experience is a fairly nice abstraction layer that at the same time doesn't overdo it.
If that doesn't cut it, have a look at this list of JS game (and animation) engines.
You probably did make a search and found dozens of js game engines. I will just narrow it down for you. It is impossible to just spit out one single js game engine. Also, you might find some to be more appropriate than others based on the type of game you want to make. So here they are
LimeJS
Impact
Crafty

Javascript game framework or library for board games?

I am trying to build a card game in Javascript. Currently I am using Raphael to draw my graphics, but I'm bad at math, like really bad. I'm wondering if there is a library or framework out there that would allow me to build a card game in Javascript without having to manually figure out the x and y coordinates of every object I want to draw.
You could look into a Javascript Game Engine, depending on your exact requirements you should find one for you.
Usually a game engine include facilities to manage sprites, layers, and scene; handle events; easy animations; redrawing regions, detecting collisions, etc.
Render Engine is an open source game engine that seems pretty good.
Many more are available under a commercial license.
A list of both open source and commercial game engines is available here, with brief descriptions to allow you to quickly find your way (discarding the not-yet-mature engines and choosing based on features or focus).

Categories