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; }
mushrombrother.jpg's 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 ...
Philipp's user avatar
  • 119k
5 votes
Accepted

Would it be possible to make a Game Genie like program in Javascript?

What exactly do you want to replicate from a Game Genie code? The format of the original can be found in the docs here, but fundamentally they identified a part of the memory to change and the type of ...
Basic's user avatar
  • 1,267
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 ...
Philipp's user avatar
  • 119k
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 ...
Zibelas's user avatar
  • 4,291
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 ...
Philipp's user avatar
  • 119k
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 ...
CobaltHex's user avatar
  • 2,238
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 ...
GameAlchemist's 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 ...
XNargaHuntress's 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 ...
drhayes's user avatar
  • 3,912
3 votes
Accepted

How to draw an image on canvas without html

Philip's suggested improvement to DMGregory's answer is important. ...
Jose_X's user avatar
  • 146
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 ...
Wojtek Marczenko's user avatar
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 ...
Cynthia's user avatar
  • 21
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 ...
Bartvbl's user avatar
  • 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 ...
dnk drone.vs.drones's user avatar
2 votes
Accepted

Center of Image whose height, width and position are known

If the (X,Y) is at the top-left corner of the rectangle as you have drawn in the picture in your question, then the center is simply: ...
MAnd's user avatar
  • 4,887
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 ...
clabe45's user avatar
  • 408
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 ...
Domagoj's user avatar
  • 216
2 votes
Accepted

HTML canvas, Node WebSocket and multiplayer game like slither.io. How to send visual data over websockets?

When you have a massive multiplayer game, then giving everyone information about everyone is often overkill (upload bandwidth on the server would increase quadratic with the number of players). In ...
Philipp's user avatar
  • 119k
2 votes
Accepted

Infinite space 2d map - how to implement in js

Simple Implementation ...
KareemElashmawy's user avatar
2 votes

How to make space invaders destructible scenery and conform it to a shape?

I believe your image holds a clue as to how this could be done in a more efficient way. Note how the damage on both of those objects results in the same pixels being destroyed. To achieve a similar ...
JonBee's user avatar
  • 659
2 votes

2d Tile Movement and Camera

So I've answered your question by creating this repo on GitHub. You can play the game here. Use cursor Edit:It had a bug, fixed it. Thank GOD! Added code explanation below So the game works like this ...
Kitanga Nday's user avatar
2 votes
Accepted

Perlin noise terrain issue when scrolling

You seem to be adding and removing points with inconsistent logic. At first, you create 1 point per step in your loop (because there is room left in the points array). Then you wait for point removals ...
rcpinto's user avatar
  • 305
2 votes

Camera movement, Draw grid

A question similar to this was answered here. But I'll repost my answer here as well. So I've answered your question by creating this repo on GitHub. You can play the game here. Use cursor Edit:It ...
Kitanga Nday's user avatar
2 votes
Accepted

A logic error. canvas: balls physics, bounce

To figure out what is going on, I started looking at the code that moves the balls. In this case it is physics (fisicas). I see ...
Theraot's user avatar
  • 26.7k
2 votes
Accepted

Lighting in 2d isometric games

A better, yet very similar approach, would be applying the light matrix during the sprite rendering, tinting it with overlay blending using the sampled position of the tile it belongs to. That way, ...
Kroltan's user avatar
  • 396
2 votes
Accepted

How do I handle player collision with corners of a wall

I saw a couple problems in your checkWalls function: Once lineIntersection triggers for one wall, you ...
Christoph's user avatar
  • 241
2 votes
Accepted

Why are my shapes teleporting to the center of the map?

It turns out, I was calling this.xvel and this.yvel, when I defined them as this.velx and <...
Priswall's user avatar
2 votes
Accepted

Extract formula from vector drawing

A number of vector drawing tools like Illustrator or Gimp will allow you to export to a format called SVG, or Scalable Vector Graphics. This is a reasonably human-readable-ish XML specification for ...
DMGregory's user avatar
  • 134k
2 votes

HTML canvas how to create big game world and show only a part of it on canvas?

The easiest way to implement this is to loop through the map and draw the images (like you're doing), but offset everything by a certain value so that your main character will stay in the middle. ...
pledab's user avatar
  • 21

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