A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.
35
votes
7answers
2k views
Managing text-maps in a 2D array on to be painted on HTML5 Canvas
So, I'm making a HTML5 RPG just for fun. The map is a <canvas> (512px width, 352px height | 16 tiles across, 11 tiles top to bottom). I want to know if there's a more efficient way to paint the ...
21
votes
3answers
5k views
Double buffering on HTML5 Canvas game?
My simple canvas game seems to work fine on Chrome and FF on Mac/Linux. I haven't had chance to test it on smart phones or Windows environments yet. It doesn't use double buffering but I have seen ...
19
votes
7answers
7k views
HTML5 Game (Canvas) - UI Techniques?
I'm in the process of building a JavaScript / HTML5 game (using Canvas) for mobile (Android / iPhone/ WebOS) with PhoneGap. I'm currently trying to design out how the UI and playing board should be ...
18
votes
2answers
805 views
My game is just about finished! What do I do now?
I have an HTML5/canvas game just about finished and ready to launch. It's a 2d game in which you explore and disrupt a procedurally-generated landscape, crafting items and structures to survive. I ...
14
votes
6answers
4k views
Are there any alternative JS ports of Box2D?
I have been thinking about creating a top down 2D car game for HTML5. For my first game I wrote the physics and collisions my self but for this one I would like to use some ready made library.
I ...
13
votes
8answers
4k views
How should I sort images in an isometric game so that they appear in the correct order?
This seems like a rather simple problem but I am having a lot of difficulty with it.
What should I do to properly sort images in an isometric game?
In a normal 2d top-down game one could use the ...
12
votes
4answers
1k views
Should actors in a game be responsible for drawing themselves?
I am very new to game development, but not to programming.
I am (again) playing around with a Pong type game using JavaScript's canvas element.
I have created a Paddle object which has the following ...
11
votes
2answers
9k views
Multiplayer HTML5, Node.js, Socket.IO
I trying create simple Multi-player with HTML5 Canvas, JavaScript(too using John Resig simple Inheritance library) and Node.js with Socket.IO.
My client code:
var canvas = ...
10
votes
2answers
504 views
Dirty 2D map rendering
I keep hearing people talk about "dirty rendering" when it comes to map rendering for HTML5. I've Googled and searched the GameDev about it but there isn't much about it.
What exactly is it?
How to ...
10
votes
2answers
380 views
How should I handling clipping vertices that are closer to the eye than the near clip plane?
I'm rolling my own 3D engine in Javascript and using only canvas drawing, no WebGL. This is another Minecraft clone, I love boxes, don't judge me.
So far everything works wonderfully, except for one ...
9
votes
1answer
388 views
How to create 2D shadows
I'd like to create lights and shadows in a 2D environment, like in the image below:
I did several searches but got no results. Do you have any hint?
8
votes
5answers
388 views
What implications does JIT (javascript/canvas) vs. AOT (Flash) have in terms of browser based game performance?
In my experience, even till this day, I still see more of a visual lag in entity movement / animation in JavaScript (Canvas) based games than I do in Flash based games.
Why is this - what exactly is ...
8
votes
2answers
2k views
Free movement in a tile-based isometric game
Is there a reasonable easy way to implement free movement in a tile-based isometric game? Meaning that the player wouldn't just instantly jump from one tile to another or not be "snapped" to the grid ...
7
votes
2answers
711 views
How to scroll hex tiles?
I don't seem to be able to find an answer to this one. I have a map of hex tiles. I wish to implement scrolling.
Code at present:
drawTilemap = function() {
actualX = Math.floor(viewportX / ...
6
votes
5answers
382 views
Good technological solutions to build an ascii map and moving characters in a browser (like dwarf fortress)?
I'd like to build a webapp for my game website that involves using text characters to represent animals and people, and have them move around on map squares with independent (server driven) AI.
So ...
6
votes
3answers
446 views
Basic isometric projection in Javascript
I've been working on porting an old closed source game to Javascript with Canvas and I've come to a slight problem.
Right now, to display the land, I just have a pretty basic loop that just draws the ...
6
votes
1answer
671 views
Set sprite to face direction of mouse
I'm building a html5 canvas game and I need a way to get my sprite to face the mouse cursor. I have the X and Y co-ordinates for the sprite, and also the X and Y co-ordinates of the pointer. All I'm ...
5
votes
4answers
966 views
Defining the track in a 2D racing game
I am designing a top-down racing game using canvas (html5) which takes a lot of inspiration from Micro Machines. In MM, cars can move off the track, but they are reset/destroyed if they go too far.
...
5
votes
2answers
552 views
android multitouch problem
Im aware that there a a couple of posts on this matter, but Ive tried all of them and none of them gets rid of my problem.
Im starting to get close to the end of my game so I bought a cabel to try it ...
5
votes
1answer
303 views
Jump handling and gravity
I'm new to game development and am looking for some help on improving my jump handling for a simple side scrolling game I've made. I would like to make the jump last longer if the key is held down ...
5
votes
1answer
753 views
HTML5 Canvas Converting between cartesian and isometric coordinates
I'm having issues wrapping my head around the Cartesian to Isometric coordinate conversion in HTML5 canvas. As I understand it, the process is two fold:
(1) Scale down the y-axis by 0.5, i.e. ...
5
votes
1answer
313 views
Canvas animation drops to 30fps every 3-4 seconds
Ok! I solved the problem.
Chapter One - Multiple Canvases
I started to make pong utilizing requestAnimationFrame and I noticed that the ball was stuttering and slowing down every 3-4 seconds. So I ...
5
votes
2answers
1k views
How to efficiently store and display a tile map on the web?
About
These are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying ...
5
votes
1answer
462 views
Javascript Canvas Drawing Efficiency
I have just recently started some experiments with game development in Javascript/HTML5, and so far it has been going pretty well. I have a simple test scene running with some basic input handling, ...
5
votes
1answer
2k views
How do I implement side scrolling in a javascript platformer?
I'm building a side scrolling platformer with Javascript and the canvas element for a school project. I have the character all sorted out. He runs left and right, and has a different sprite set for ...
4
votes
3answers
2k views
Chrome Angry Birds engine?
Was Chrome AngryBirds game made using html5 canvas? And if yes: what kind of engine did they use?
4
votes
2answers
726 views
Calculating the angular direction from velocity
I'm trying to calculate the angular direction of a projectile, knowing it's X and Y velocity I can find the magnitude of its movement, but I'm having a hard time wrapping my mind around getting the ...
4
votes
1answer
641 views
What's the difference between Canvas and WebGL?
I'm thinking about using CAAT as a part of a HTML5 game engine. One of it's features is the ability to render to Canvas and WebGL without changing anything in the client code. That is a good thing, ...
4
votes
4answers
830 views
Making a startscreen for an HTML5 game?
How would I make a start screen for a game using HTML5 canvas?
I'm not looking for something advanced, just the new game button and highscore link etc. The question might be stupid, but I've never ...
4
votes
2answers
503 views
HTML5 multi-player game data/event validation best practices
I'll start by saying that I am fully aware that this question might seem subjective at first, but I'll try and provide a specific test case scenario for it to be a clear question about validating the ...
3
votes
4answers
713 views
What would be a good way to implement/render a 2D tiled map for a browser game?
I've made this little RPG Ruby game I did while learning and now I'd like to make it into a browser game. I've already set up Sinatra framework to serve it, so what I am looking for, before everything ...
3
votes
2answers
2k views
Smooth animation on a persistently refreshing canvas
Yo everyone!
I have been working on an Isometric Tile Game Engine in HTML5/Canvas for a little while now and I have a complete working game. Earlier today I looked back over my code and thought: ...
3
votes
4answers
496 views
Why wouldn't one use Canvas for HTML 5 game development?
I'm just getting into the HTML 5 game development. I've discovered that some games seem to be created using just JS/CSS/HTML instead of the canvas.
Since canvas seems to enjoy good browser ...
3
votes
3answers
620 views
HTML5 game programming style [closed]
I am currently trying learn javascript in form of HTML5 games. Stuff that I've done so far isn't too fancy since I'm still a beginner. My biggest concern so far has been that I don't really know what ...
3
votes
2answers
229 views
Client Side Logic vs Server Side Logic for HTML5 Game
I'm writing an HTML5 game that takes place in a single screen and does not have any data that would need to be saved (except for a score). I am writing all of my canvas logic on the front end. because ...
3
votes
2answers
545 views
how to solve ArrayList outOfBoundsExeption?
Im getting:
09-02 17:15:39.140: E/AndroidRuntime(533): java.lang.IndexOutOfBoundsException: Invalid index 1, size is 1
09-02 17:15:39.140: E/AndroidRuntime(533): at ...
3
votes
3answers
337 views
Commonizing cycle time across different browsers for HTML5
Is there a good (accepted) method for "fixing" the cycle time within an HTML5 canvas game implementation?
The game that I have been working on runs far quicker in Google Chrome than in other browsers ...
3
votes
2answers
549 views
canvas ball physics animation
I want to animate ball in html canvas like this.
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
start position is left top corner and ball's maximum ...
3
votes
2answers
145 views
Deactivate keyboard input on collision
I'm creating an online-canvas-game with a tank as player object.
Now I have several structures in my canvas, that shouldn't be able to be overdriven by the tank...
My solution is to detect the ...
3
votes
1answer
434 views
Best resources for Canvas Html 5 development
I am at a competition at work for who can make the best canvas game. Theme is a top down shooter... Winner gets dinner for free.
Anyways I have been looking around looking for some good resources on ...
3
votes
2answers
154 views
Android Array Lag?
I am making a platform game for Android. It is sort of a tile based game. I added bullets and enemies with AI and a bunch of tile types.
I created a simple map with no Enemies. Everything was running ...
3
votes
1answer
805 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
622 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
3answers
723 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
457 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
1k 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
3answers
2k 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
221 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
4answers
1k views
Are there any good html 5 mmo design tutorials?
Hey all. I got a rather inspired after playing gaia online's zOMG and wanted to revive an old project idea I've had laying around for a few years now.
I'm looking to work with html5 (ie canvas, svg ...
2
votes
2answers
315 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 ...
