HTML 5 refers to new web technologies such as high performance JavaScript engines, canvas 2D and WebGL, video and audio tags.

learn more… | top users | synonyms

3
votes
1answer
1k views

Canvas tile grid, hover effects, single tilesheet, etc

I'm currently in the process of building both the client and server side of an HTML5, canvas, and WebSocket game. This is what I have thus far for the client: http://jsfiddle.net/dDmTf/20/ Current ...
3
votes
1answer
909 views

Converting cartesian geo-coordinates to isometric (real world map to game map)

I need to create an automated method to convert real cartesian, geo-coordinate data (such as roads and parks), into isometric coordinates as a game map view for use in HTML5 Canvas. Here is an image ...
3
votes
2answers
118 views

HTML5 game fps render lag

I am currently creating a flappyBird-like HTML5 game using Proccessing.js You can see current work here: http://files.tips4design.com/flappySlothRelease/ The problem is that even though the FPS is ...
3
votes
3answers
954 views

HTML5 Canvas Game Timer

How to create good timer for HTML5 Canvas games? I am using RequestAnimationFrame( http://paulirish.com/2011/requestanimationframe-for-smart-animating/ ) But object's move too fast. Something like ...
3
votes
1answer
536 views

HTML5 Canvas fillStyle as numbers not text

When drawing vector graphics in the canvas you set the fillStyle using an rgba string like this... context.fillStyle = "rgba(255, 223, 191, 1)"; Is it possible to feed in a javascript object ...
3
votes
2answers
858 views

HTML5/JS - Choppy Game Loop

I have been experimenting with HTML5/JS, trying to create a simple game when I hit a wall. My choice of game loop is too choppy to be actually of any use in a game. I'm trying for a fixed time step ...
3
votes
1answer
426 views

Is it possible to load local html pages into Gamemaker games?

I was just wondering if it would be possible somehow to load locally saved web pages into a game. My primary use for them would be as menus, helping to navigate between rooms. I know about the built ...
3
votes
1answer
354 views

How to compute the 2D equations of 3D circular arcs?

I'd like to obtain these equations for the ellipses produced by the perspective projections of (3-dimensionally transformed) circles. This is useful for rendering in 2D contexts which provide curve ...
3
votes
1answer
480 views

Animating DOM elements vs refreshing a single Canvas

A few years ago, when the HTML Canvas element was still kinda fresh, I wrote a small game in a rather "unusual" way: each game element had its own canvas, and frequently animated elements even had ...
3
votes
1answer
2k views

Optimizing HTML5 canvas transformed drawing in Javascript

I am trying to optimize my HTML5 game engine and have noticed that currently a majority of the time taken in the game loop can be taken when drawing transformed tiles. I think this is because each ...
3
votes
1answer
298 views

How do I show the current view from the viewport on my map?

I'm doing HTML5 Canvas development and currently have a large viewport (on the left) and a map (on the right). Like this: I need to show on the map what is currently being viewed in the left. And ...
3
votes
2answers
3k views

HTML5 canvas screen to isometric coordinate conversion

I am trying to create an isometric game using HTML5 canvas, but don't know how to convert HTML5 canvas screen coordinates to isometric coordinates. My code now is: var mouseX = 0; var mouseY = 0; ...
3
votes
0answers
124 views

How to run a Phaser engine without a window?

I'm currently creating a multiplayer game using the HTML5 framework Phaser. It's a game where zombies spawn on the map and players have to shoot them to kill them. The zombies target players that are ...
3
votes
0answers
112 views

Converting obj data to CSS3D

I found a ton of formulae and what not, but 3D isn't my forte so I'm at a loss of what specifically to use. My goal is to convert the data in an 3D .obj file (vertices, normals, faces) to CSS3D ...
3
votes
0answers
240 views

Choosing a (browser) game environment [closed]

I apologise in advance if this post is something you've heard a million times already or seems like a trolling attempt. I just want some advice and I'm coming up short with my own Google searches. ...
2
votes
3answers
401 views

Colouring greyscale images/sprites for HTML canvas

What is the best method to colour in sprites at runtime using the canvas element and javascript? I know there are various blending modes using globalCompositeOperation, but I don't know how best to ...
2
votes
2answers
856 views

HTML5 - Does it have the power to handle a large 2D game with a huge world? [closed]

I have been using XNA game studio, but due to private reasons (as well as the ability to publish anywhere & my heavy interest in isogenic engine), I would like to switch to HTML5. However, I have ...
2
votes
3answers
540 views

Issues with shooting in a HTML5 platformer game

I'm coding a 2D sidescroller using only JavaScript and HTML5 canvas, and in my game I have two problems with shooting: 1) Player shoots continous stream of bullets. I want that player can shoot only ...
2
votes
4answers
351 views

Can sprite sheet width and height affect performance?

Is there any performance difference in the way the images are placed inside a sprite sheet image (for the same total area)? For example, should I place 50 sprites (50x50 each) in a linear way ...
2
votes
4answers
505 views

Javascript Audio solution

still has issues. Flash works but... requires flash (an issue for iOS). What do you use in Javascript for audio?
2
votes
2answers
346 views

How to draw objects that have a smaller Y axis first?

In my game there is a large 2D map of various objects. Example. As you see, upon creation objects of the same type (trees for example) are placed correctly, but objects of another type (enemies) are ...
2
votes
3answers
2k views

How do I structure a 2D platform level?

I'm doing a 2D platformer but I don't know how they are usually built. The approach I'm looking at is making it tilebased, with ground tiles on bottom row, then platforms on some places in "mid-air" ...
2
votes
4answers
527 views

Play audio in javascript with a good performance

I'm developing a browser game where the player can shoot. Everytime he shoots it play a sound. Currently i'm using this code to play sounds in JavaScript: var audio = ...
2
votes
4answers
1k views

Cross platform development tool/platform for the modern indie game developer?

I'm a Flash developer, but I think it's time to think of other avenues. Ideally I want to be able to write once but be able to deploy to as many different platforms as possible, so iOS AND ...
2
votes
3answers
260 views

Do larger sprite sheets improve performance in html 5 games?

I know when I did some game development with XNA they recommended that we try to group are sprites into fewer sheets because the graphic card could process it faster. Does this also apply to web based ...
2
votes
3answers
172 views

Instantiate objects that share same variable

I'm just wondering how to instantiate the same objects that all share the same variables, except their positions. I'm basically working on the scene of my HTML5 game, and I've build a streetlamp post ...
2
votes
4answers
3k views

Dividing up spritesheet in Javascript

I would like to implement an object for my spritesheets in Javascript. I'm very new to this language and game-developement so I dont really know how to do it. My guess is I set spritesize to 16, use ...
2
votes
1answer
572 views

Converting Doom maps to JSON

This is a really cool demo of a Canvas Doom Engine made back in 2006: http://canvex.lazyilluminati.com/84/play.xhtml Here is the e1m1 map in JSON format: http://canvex.lazyilluminati.com/84/map1.js ...
2
votes
2answers
150 views

Testing HTML5 canvas games on low resource computers

I've made a game in HTML5 & JS and want to test it on varying types of user setups as I've heard it doesn't perform too well on older MacBooks. How can I accomplish this? I'm thinking of ...
2
votes
3answers
85 views

HTML5 tags on my website? [closed]

I'm not here to ask about the merits of HTML 5, CSS 3, Javascript, etc. as game development tools. Lord knows how many people have asked about that already. No, what I'm curious about is what kind ...
2
votes
1answer
233 views

mat3x4 in webGL shaders

I am porting the IQM bone animation format to Javascript and have run into a problem... The vertex shader is failing to compile and the only error message I get out is 'mat3x4' : syntax error on the ...
2
votes
2answers
1k views

Efficient collision detection - tile based HTML5/Javascript game

I'm building a basic RPG game and I'm looking at collisions/pickups etc now. It's tile based and I'm using HTML5 and Javascript. I use a 2D array to create my tilemap. I'm currently using a switch ...
2
votes
2answers
284 views

For timed levels, how do you determine time steps that are less than 1/(frames per second)?

I have made a simple HTML5 racing game. The laps are timed. I am running the game are 40 frames per second, each frame represents 40 milliseconds. There for my timer will increase in 0.025 ...
2
votes
1answer
200 views

Optimising out tiles outside of viewport

I am playing around with the HTML5 canvas and have begun implementing a tile engine. However, it's currently very inefficient: I have a 100x100 2D array and my code loops through the whole thing ...
2
votes
2answers
779 views

Receiving keyboard events on a canvas in Javascript

I need to receive keyboard events in a canvas element. Click events are received but key presses aren't. Here is my code which doesn't handle key events: var canvasElm = $('canvas'); ...
2
votes
1answer
334 views

Customize Colors for Sprites in Web Game

So I'm working on an html5/javascript/css3-based game. Without going into too much detail, I'm thinking of having the characters be simple 8 or 16-bit style sprites, but I'd like to allow the user to ...
2
votes
1answer
2k views

Game 30% done on HTML5. Maybe it was a bad idea. Should I change to Unity3d?

I'm creating a 3d game on HTML5. It's 30% complete and the hard part is already coded. The server is on node.js.Now I'm realizing that maybe it was not a wise choice. This is because I realized: ...
2
votes
3answers
145 views

Is it more efficient to encode rotation in a spritesheet or rotate at runtime?

I'm developing a game with JavaScript and HTML5 and I'm wondering about the performance implications of sprite rotations. There are two ways that I know to rotate a sprite: Rotate the actual sprite ...
2
votes
2answers
1k views

ImpactJS and Construct 2

I'm interested in HTML5 game development and I found about this 2 game engines, I already know ImpactJS requires more programming experience and that Construct 2 has its own event and action system ...
2
votes
1answer
266 views

Box2D: Asteroids-Like Spaceship Physics

I'm new to Box2D (JavaScript) (and the world of physics/mathematics) so I'm having a hard time working out the methods I need to use to make a spaceship act like it does in the classic arcade game ...
2
votes
2answers
237 views

Stop a rotating object at a specified angle?

I'm working in JavaScript with HTML5 and the canvas. I have an object which is rotating at a certain speed, and I need the object's rotation to slow down gradually and the front of the object to stop ...
2
votes
2answers
376 views

Help w/ iPad 1 performance for tile-based DOM Javascript game

I've made a 2D tile-based game with DOM/Javascript. For each level, the map data is loaded and parsed, then lots of tiles ( elements) are drawn onto a larger "map" element. The map is inside of a ...
2
votes
1answer
154 views

How can I clear explosions in my function?

Hi I have a function to place bombs, and a for loop that places explosions on the tiles where possible. My problem is that I can't remove the explosions after a while. I've tried everything I can ...
2
votes
2answers
1k views

Drawing isometric map in canvas / javascript

I have a problem with my map design for my tiles. I set player position which is meant to be the middle tile that the canvas is looking at. How ever the calculation to put them in x:y pixel location ...
2
votes
3answers
680 views

Is there a HTML/JS game engine/library that deals with things (HUD, menus, accounts, etc) other than the core gameplay?

I've been looking through the many HTML/Javascript game engines/libraries out there (many of which are found here https://github.com/bebraw/jswiki/wiki/Game-Engines). Most of them seem fairly ...
2
votes
4answers
1k views

Serverside libs/examples for html5 WebSocket in .net?

Hey guys, I wanted to know what libraries or examples exist for WebSockets in .NET
2
votes
1answer
31 views

How do I use createPattern with a spritesheet?

Say that I have a spritesheet like this And I want to use the dirt tile at (1, 1). I know that I can repeat an entire image using createPattern but how do I create the pattern from just the tile ...
2
votes
2answers
131 views

Glitch-free cross-fades in HTML5

In my HTML5 canvas game, I need to cross-fade two sprites which have some glow around them. (Glow is backed into sprites.) Initially, the first sprite is visible. During the cross-fade the first ...
2
votes
3answers
448 views

How do I represent walls in a 2D tile based map?

I'm trying to create a simple 3D(2D) Dungeon Crawler but I am going to be using simple flat images to show the user they are in a "3D" world. Now what I mean is something like Sword and Serpents on ...
2
votes
1answer
118 views

How do I generate paylines and pay dots for a slot game?

I'm working on a HTML5 slot game and am completely stuck on the pay lines and the dots that produce the lines from 1 end to the other. What's the logic behind generating a random number of dots ...