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 ...


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

The simplest way to get such an effect is to literally blink the sprite: Just don't draw it half the time. var frequency = 200; if (! blinking || Math.floor(Date.now() / frequency) % 2) { ctx.drawImage(...); } The idea is that when blinking is set to true, the sprite will flash at the given frequency.


5

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


5

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 to use different basic canvas settings. If you want your game to support multiple resolutions, then you want to avoid absolute positioning. You usually anchor ...


4

No, platformers do not have to be tile based. You can do "free placement" of sprites as well. See these related questions to learn more: Recommended method towards making custom maps for a 2d game? How can I get textures on edge of walls like in Super Metroid and Aquaria? I'll also add the link Seth shared because it's an excellent resource.


4

setTrasnform(a, b, c, d, e, f) has six parameters: a Scales the drawings horizontally b Skew the the drawings horizontally c Skew the the drawings vertically d Scales the drawings vertically e Moves the the drawings horizontally f Moves the the drawings vertically It scales and skews the whole canvas. Imagine you are drawing on ...


4

You could use virtual machines. With a virtualization software like VirtualBox or VMWare you can simulate a computer inside a computer. You can install any operating system in them and you can artificially restrict the amount of hardware and CPU power the virtual machines have available. This is of course not nearly as conclusive as testing on real ...


4

requestAnimationFrame implementation depends on browser solely. Browser will try to reduce framing if it "believes" that it will be better for user, and usually does it "smoothly" from 60 to 30. But that shift is obviously easy to see. As well once it is some time in 30fps state, it then usually shifts back to 60. The problem here is that this shifting is ...


4

Well fine, after 4 days and 62 views and only ONE comment (thanks @Anko), I managed to do the formula on my own. I don't know if it's as optimized as it should be, but who cares anyways? I can't believe that out of 62 views I only got one user interested in helping...very disappointing. Anyways, here are the formulas for those interested (ix/iy = absolute ...


4

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://jsfiddle.net/cgzrwhpn/


4

One way to apply light effects with the Context2D is to use the composite operation 'lighter' (globalCompositeOperation='ligther'), and adjust the alpha (globalAlpha= 0.0 to 1.0). Then you can either : • Draw the shape of the light with several geometric drawings that create a simple shade to get a cartoonish light effect. • Define gradients to get a ...


4

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 call `context.translate(100, 200), for example, everything drawn afterwards will be moved 100 pixels to the left and 200 pixels up. So to always keep the player in the center, call context.save(); ...


4

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 and prefab are almost the same. A gameobject basically is a container of something. It can hold multiple scripts, your sprites, colliders, etc. Take a look at ...


3

My understanding is that Mobile Safari enables JIT compilation of JavaScript which is a pretty significant performance boost. Due to security reasons, the JIT compilation is not available to a UIWebView within native apps, such as PhoneGap wrapped applications. It seems that homescreen apps also run inside of the non-JIT UIWebView, although I read a few ...


3

The computer graphics term for what you're trying to do is picking. The issue with picking from an HTML canvas is that the canvas doesn't understand anything about sprites -- all it knows about is pixels. In more general terms, canvas is a purely graphical representation -- it stores no semantic information. It has no idea what you wanted those pixels to ...


3

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 animations and graphics


3

You can check whether one rectangle overlaps another rectangle by checking their edges; if we have two rectangles a and b, and if the two rectangles aren't intersecting, then evaluate the following four statements: a's left edge is to the right of b's right edge a's top edge is beneath b's bottom edge a's right edge is to the left of b's left edge a's ...


3

context.clearRect() has a method signature of: context.clearRect(x, y, width, height) In your code, however, you are passing the height and width in the incorrect positions. Changing your call to context.clearRect(0, 0, canvas.width, canvas.height) fixes the issue. MDN clearRect() documentation.


3

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 how it looks (for now), remove the call that clears the canvas and measure again. Are your paint cycles a lot faster now? Basically, I wouldn't worry about ...


3

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 drawings slower and slower each frame. To explain a bit further, each non-direct draw command (arc, rect, lineTo, XXXTo) is used to build the current path. If you never use beginPath to reset the current path, the next frame will ...


3

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 to explain what exactly happened and why it happened. Just in case others stumble upon this answer, sooner or later, with their own specific occurrence of the ...


3

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: (X + W*0.5 , Y - H*0.5 ) Note that it is always a good practice to multiply by 0.5 instead of dividing by 2, since multiplications are much less computationaly expensive than divisions.


3

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 set which are half deep-water and half shallow-water. This allows you to design the transition from one texture to another in your image editor. The same ...


3

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 many cases it is completely sufficient to only send updates about those players which are close enough to appear on the player's screen and omit updates for those ...


3

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 disaster. Drawing should be handled client side and logic handled mostly server side. You could certainly stream in data, but you should not do it once every frame, ...


3

Philip's suggested improvement to DMGregory's answer is important. //Create Image object var image2 = new Image(); //Get context ready var canvas2 = document.getElementById('mycanvasid'); var ctx2 = canvas2.getContext('2d'); //Now, set .onload with function(s) that require a loaded image, before setting .src image2.onload = function () { var x = 0, y =...


2

Simple answer: WebGL with canvas fallback. Nuanced answer: If your game has a lot of text, overlay an HTML text layer. Pixi.js is a battle-hardened display framework with some useful extras that works well for this.


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