10 votes
Accepted

Why would it be faster to render using multiple canvas elements?

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. ...
user avatar
  • 431
6 votes
Accepted

Roguelike 2D Collision Detection

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- ...
user avatar
6 votes
Accepted

Completely Pixelated Font in JavaScript Canvas?

In the css, you need to disable font smoothing for canvas: canvas{ font-smooth: never; -webkit-font-smoothing : none; }
user avatar
6 votes
Accepted

What is the "Unity" way to approach tech design for a 2D game like this?

How do you approach Canvases in Unity? It's possible to use more than one screen-space canvas in Unity, but it's uncommon. There is usually no reason to do that, unless you want different UI elements ...
user avatar
  • 112k
4 votes
Accepted

How can I create 2D, sprite-based reflections in HTML5 Canvas?

Draw the water Draw your sprites, flipped upside-down about the water level, and with some effects Draw the ground (this covers the reflection and water) Draw everything else normally http://...
user avatar
  • 14.6k
4 votes

JS Canvas - Creating 2D Game lighting effect like Terraria

One way to apply light effects with the Context2D is to use the composite operation 'lighter' (globalCompositeOperation='ligther'...
user avatar
4 votes

javascript game camera that follows my player

A quick way to implement camera scrolling on a canvas is by using context.translate. It changes the origin-point of the canvas for future draw calls. So when you ...
user avatar
  • 112k
4 votes

What is the "Unity" way to approach tech design for a 2D game like this?

You would usually use the canvas for UI elements. You can anchor your elements relative to positions and it should take care of your scaling for different dimensions if done correctly. A gameobject ...
user avatar
  • 2,350
3 votes
Accepted

Rotate arrow on canvas

You got it wrong in your draw code : once you translated the context to a given point, you shouldn't use any more the point coordinates : the 'zero' is now at the translation point. So to draw your ...
user avatar
3 votes

Android: Improving surfaceView?

System.currentTimeMillis() should be changed to System.nanoTime() / 1000000; currentTimeMillis has an issue in it that sometimes comes back with a weird number and in games causes twitching in ...
user avatar
  • 31
3 votes
Accepted

How do I check if one square is overlapping another in HTML5 canvas

You can check whether one rectangle overlaps another rectangle by checking their edges; if we have two rectangles a and b, and ...
user avatar
3 votes
Accepted

HTML Canvas Makes Everything Bolder On Right Side

context.clearRect() has a method signature of: context.clearRect(x, y, width, height) In your code, however, you are passing ...
user avatar
3 votes
Accepted

How should I efficiently clear and redraw my canvas with lots of animated sprites?

The first thing you should do is figure out if you actually have a problem. Is the way you're clearing the canvas now slow? Are you dropping frames because of how you clear the canvas? Regardless of ...
user avatar
  • 3,922
3 votes
Accepted

Canvas slowly degrades in performance after a while

You are using rect to draw the background of the bars, but you forgot the beginPath. So the rect calls pile up and make the ...
user avatar
3 votes
Accepted

How do I make an HTML5 canvas tiled map with tiles which have other than squared edges?

You need to create some transitional tiles like these: Image source: http://opengameart.org/content/lpc-more-water-transitions (licensed under CC-BY-SA 3.0) As you can see there are tiles in this ...
user avatar
  • 112k
3 votes
Accepted

JavaScript - Updating a canvas real-time... from server-side or client-side

You should keep a copy of the map on both the client and the server. Send updates from the server that propagate to the client. But trying to send a chunk of the map every frame is a recipe for ...
user avatar
  • 2,198
3 votes
Accepted

How to draw an image on canvas without html

Philip's suggested improvement to DMGregory's answer is important. ...
user avatar
  • 146
2 votes

How should I handling clipping vertices that are closer to the eye than the near clip plane?

I know this is probably a bit late, but I have a solution to this. The transformation from world coordinates to points on a screen involves multiple parts, which involve subtracting the camera's ...
user avatar
  • 21
2 votes

Poor performance in android when running APK, runs fine in browser

The Chromium-based WebView causing this issue was eventually updated in KitKat version 4.4.3/4.4.4 in mid 2014, but that is cold comfort considering some vendors have made some seemingly arbitrary ...
user avatar
2 votes
Accepted

Procedurally Generated Top View 2D RPG Map Generation

The question appears to be about how to go about selecting the correct tiles after generating a map, so that is what I'll answer. What you are talking about is called "autotiling" or "auto tiling" (...
user avatar
2 votes
Accepted

Removing a previously rendered image on a canvas

The HTML5 canvas works... well... like a canvas. It is a collection of RGBA pixels. When you draw something, it replaces whatever was there before. There is no "undo" functionality. The usual ...
user avatar
  • 112k
2 votes
Accepted

Map scrolling around the world

Hex grids can be treated as square grids with an offset every other column/row (depending on orientation), which means your map can be a 2D array instead of a linked graph of hex cells, then you just ...
user avatar
  • 444
2 votes
Accepted

What is the difference between a Facebook Canvas and Facebook Web project?

Facebook Canvas app are apps that live inside the facebook eco-system. This is done by Facebook creating an iFrame to the canvas URL you supply. The authentication system is a POST variable sent one ...
user avatar
2 votes

How to draw small sprite bigger?

Draw the bitmap using a Matrix. ...
user avatar
  • 1,196
2 votes

Initial force to achieve orbital velocity

I know this is gamedev not game playing, but the Kerbal Space Program wiki has all the math and then some. More importantly, it explains it quite nicely in "plain English" if you drill down. Here's ...
user avatar
  • 326
2 votes
Accepted

Rectangles clear each other when moving on canvas

Clearing the screen is only one half of the puzzle. I'm going to bet you also only re-draw the rectangles if/when they move. To confirm, you could make the red cube continue to move across the screen, ...
user avatar
2 votes

How do I correctly make character sprite direction match player inputs?

Similar to RDeving's answer, here's my usual code: ...
user avatar
2 votes
Accepted

Why can't CSS Sprites handle vectors?

If you’re familiar with CSS spriting,it can be done the same way with SVGs. Unlike the icon fonts technique, you’re not bound to one color. You can use gradients, clipping masks, and transparencies ...
user avatar
  • 136
2 votes
Accepted

Tiled - move all tiles

You can choose the selection tool at the top, select all the tiles you want to move then press ctrl + x to cut and press ctrl + v to paste it where you want.
user avatar
2 votes
Accepted

android canvas rope swing

You can use pendulum physic to approximate your rope swing. Calculate the fluctuation period (this is true for small fluctuations) T = 2*PI*SQRT(L/g) where: <...
user avatar

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