15

Let's start with the array. Don't think about it as tridimensional. Indeed, if you want to have stackable units there, it makes sense at first sight: first dimension is collumns of rows of tiles second dimension is rows of tiles third dimensions is tiles, i.e. arrays of units. But this third dimension won't be consistent, as you will store there not only ...


11

1) Lack of knowledge. Developing for Canvas might be well beyond some web developers who are very accustomed to manipulating DOM. 2) Lack of a scene graph. The DOM is (in game engine terms) a scene graph, permitting strong querying and manipulation of DOM nodes. Writing a game using Canvas requires the developer to "reinvent" that part of the wheel. 3) ...


10

First of all I suggest that you change directions from: W - up-left S - down-right A - down-left D - top-right into more intuitive: W - up S - down A - left D - right As for your concern, I suggest that you make two functions, one translating isometric tile coordinates into grid coordinates, and second the other way around. That way you could simply ...


10

Framerate varies by browser. A few still do not support accelerated canvas rendering, others don't support WebGL at all. Best bet is to profile actual code on actual target hardware/browsers to determine which performs best for your specific needs and user demographics. WebGL is only supported on IE in version 11+ but canvas has been supported for several ...


10

It’s important to note that changing the co-ordinate system with rotate and translate do not affect anything that’s currently drawn into the canvas. It only affects subsequent drawing actions. var TO_RADIANS = Math.PI/180; function drawRotatedImage(image, x, y, angle) { // save the current co-ordinate system // before we screw with it ...


10

Multiple canvases can help in some cases. Just as a quick example - say you have 2 layers (canvases) to your game. The background of your game is not going to change very frequently, for example. So one canvas will be dedicated to just rendering the background of your game. This means you only have to render the background once, and only re-render it ...


9

OK, I figured it out. Almost. It's actually quite obvious, and I feel a bit dumb for not noticing this right away. When you call drawImage(src, 0, 0) without specifying width/height it draws the entire src region, which in this case is much larger (the canvas is 320x420 versus the img at 185x70). So in the canvas case the browser is doing much more work, ...


8

I have a good feeling that getHP() and getMaxHP() are returning integral values (int, short, long, byte, etc). If so, they should be cast to floating point numbers (float or double) before dividing otherwise integer division will take place, causing the health scale to be either 1 or 0 and nothing in between. This also goes for this: 120 * (int)healthScale. ...


8

Delta Time is used to make your game speed constant, independently of framerate. If your game starts to get "heavier", it will start to slow down in framerate on less powerful android systems. For example, if you made it to run on 60 FPS, an Android cellphone that can run it at 30FPS will have the game slowed down by 50%! By including the DeltaTime in the ...


8

Renderer apart, consider reading the following articles to understand how older systems implemented optimal tile-based map traversal: Tile-Based Games FAQ version 1.2, and Tile Graphics Techniques 1.0 They're indispensable guides for implementing tile based games on systems which may have limited resources. In terms of today's technology, HTML5-based ...


7

Here's how I would suggest handling it: First, have your Player class store a variable, jumpForce, which is a 2D-vector similar to velocity and gravity. Now, also have a constant, initialJumpForce, which is the immediate force that will be exerted on your player when the jump key is first pressed. When the jump key is pressed, and the player is grounded (...


7

Generally, this advice is given not because of abstraction or code cleanliness but rather because gameplay logic that is sensitive must be simulated by an authorative server to prevent cheating and hacking. Long story short: If you don't particularly care about players hacking their score - don't bother. If your game is multiplayer, then you should looking ...


7

This page contains an excellent list of optimizations that can be made to canvas. In the section labeled "Use multiple layered canvases for complex scenes" it describes why having multiple canvas objects is actually better in many cases because you don't have to redraw large expensive objects (background images) as frequently as smaller, fast moving ones (...


6

Many games do use an array of arrays to represent a level. It's possible that you could have poor performance with massive or infinite maps of open worlds if the entire map is in memory; a solution for that is to keep only some portion of the map in memory and load/unload map portions as the player(s) move around. If you're just beginning to write small 2D ...


6

2D tile maps are exactly how they sound, imagine something like this: 1,1,1,1,1 1,0,0,0,1 1,0,2,0,1 1,0,0,0,1 1,1,0,1,1 This the design of our map and if we take 0 = floor 1 = wall 2 = chest Then you can see that our map is a room with an entrance and a chest in the middle of the room our data structure for this could be like @georgeK said an Array of ...


6

As far as 1) you'll need to use a toggle state. Fire ONLY if the user did not click the previous tick, and is registered as clicking this tick. This can be thought of as the rising edge of the click state. here should the fire logic be called ^ clicked ___ not clicked ___| For 2) it seems that your update() ...


6

An FPS counter doesn't do much for you if you're using requestAnimationFrame. If you go over the 60 FPS budget, the browser might drop you straight to 30 FPS because it's trying to vsynch. You can check your frame budget in Chrome in the Timeline tab of the Developer Tools. There's plenty of tutorials for that, so i won't go into detail. I can see that most ...


6

It is not possible to apply an affine transformation to the tile and get the result you want, because affine transformations preserve coplanarity, whereas the shape you need is not flat in the 3D world. Even if you got the outline to match (which can be done), the texturing would be all wrong and cause seams at the junctions. I suggest splitting the tile in ...


6

I don't know what you think is wrong with those two approaches - both seem fine to me. The only thing you have to watch out for is that you don't draw your whole world offscreen. Drawing offscreen is relatively cheap in most canvas implementations, but iterating completely through your data structure which stores the world data likely isn't. So before you ...


6

I think the most effective way would be just to fake it. Rendering to some target element using your own built in sprite font as if you're rendering a normal 2D screen. This approach makes sure no strange stuff happens when people are missing fonts, or are using a very different language (Chinese, Russian). Fonts and texts are one of the most difficult ...


6

Instead of using an ImageView and transparent GLSurfaceView you should instead render your background using a fullscreen quad (just like you do with your sprites, but sized to fit the entire screen). Render this fullscreen background first (very important) and then also remove the gl.glClear(GL10.GL_COLOR_BUFFER_BIT); call in from onDrawFrame. You no longer ...


6

Instead of testing the collisions ON the player, you should testing them AHEAD, to check whether there's a wall where the player WILL be walking. To do that, you'll only need to change 2 things: 1- Your player.collision function should accept two arguments: an x and y offset. You should add them to your collision checking algoythm too. 2- When calling ...


5

There is no need to double buffer html5 games. The browser already handles this for you by only updating the canvas object after your script has run. http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html


5

It really depends on what you want your game to "feel" like. You could go with the Micro Machines method of using a tilemap to generate the track. However, if I were you I'd go with the "cool" solution: a spline. First, you should realize that a spline is nothing but a set of points. It has a beginning and an end. A straight line is a form of spline. ...


5

I was working on something similar, in which balls will be colliding and rebounding at different angles and velocities. I found the solution in a book for ActionScript animation. Explaining it will take a lot of time and effort and honestly I cant really explain this since I've myself forgotten how most of this works. Please try your best to understand what ...


5

Edit: Just saw that my answer was based on your code but didn't actually answer your question. I kept the old answer in case you can use that information. Edit 2: I have fixed 2 issues with the original code: - The +1 addition in the calculation of end x and y was by mistake inside the brackets, but it needs to be added after the division. - I forgot to ...


5

Your code is only looking at the Single Touch portion of the event. You will only ever receive information about the first finger to hit the screen. If you lift that finger, your event will jump over to the second finger that is down, right? You need to implement MotionEvent.ACTION_MASK to get the multi-touch parts. Something like: int action = ...


5

In JavaScript, functions can imitate classes. In my opinion, they're more logical than classes too. To have a function imitate a class (be a constructor function), you need to use the this and new keywords. this refers to the object being created by the function, so if you write this.a = 5 inside the function, your newly created object will have a property ...


5

I'm not particularly sure where that 2.35 value is coming from, which could be adding artifacts to your code, so I've removed it from my answers. That being said, your basic intuition seems to be correct, however you have your sin and cos switched. Also, I'd wager that since you're already taking the difference between two (X,Y) coordinates, that you do not ...


5

I have actually made a character display library for the web, Unicodetiles.js, which I have not only spent some time optimizing, but it also explores different ways of presenting the text; it has three renderers: DOM, which uses a matrix of <div> elements to render each glyph with a customizable foreground and background colors. Canvas, which draws ...


Only top voted, non community-wiki answers of a minimum length are eligible