7
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;
}
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- ...
- 1,544
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 ...
- 115k
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'...
- 1,413
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://...
- 14.8k
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 ...
- 115k
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 ...
- 2,655
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 ...
- 1,413
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 ...
- 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 ...
- 21.3k
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 ...
- 743
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 ...
- 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 ...
- 1,413
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 ...
- 115k
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 ...
- 2,218
3
votes
Accepted
How to draw an image on canvas without html
Philip's suggested improvement to DMGregory's answer is important.
...
- 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 ...
- 21
2
votes
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 ...
- 121
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, ...
- 6,716
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:
<...
- 3,450
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.
- 308
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 ...
- 136
2
votes
How do I correctly make character sprite direction match player inputs?
Similar to RDeving's answer, here's my usual code:
...
- 121
2
votes
Fixed Time Step Flutter
The solution provided in the Blog post you mentionned is not that good, even if you follow it to its end, that is to say if you interpolate.
Because you won't be able to escape the case when the error ...
- 1,413
2
votes
How to display a lot of small objects using WebGL?
There are several ways to approach this problem. When it comes to WebGL performance the key is to: (a) reduce number of drawcalls, (b) reduce gpu overdraw (fill-rate) and vertices. (c) reduce buffer ...
2
votes
Fastest way to render isometric world with moving entities?
From my own experience, I've found that using the sum of components (x + y + z) is a very good measure for sorting entities in an isometric scene. It doesn't perfectly represent the distance your ...
- 121
2
votes
Accepted
Simulating elastic ball collisions quickly escalates to disaster
First , your
polarToComponent(magnitude, angle) {
return {
x: magnitude * Math.cos(angle),
y: magnitude * Math.sin(angle)
};
Called for each ...
- 3,450
2
votes
Object have the same "speed" all time JavaScript
I'm happy you figured it out, and I find it really cool that you managed to do it in your own way. But yours is a specific solution for a specific occurrence of a very general problem.
I would like ...
- 216
2
votes
Javascript canvas rotating single sprite instead of entire context
You should load your image during initiation, not in the draw function. The draw function should be run over and over again, every "tick" of the game. The problem with your loading algorithm is that ...
- 408
Only top scored, non community-wiki answers of a minimum length are eligible