People who code: we want your input. Take the Survey
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

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


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

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

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

Issue 1: Headless avatar This issue is caused by the draw order of the layers. From your pasted code, the draw order is: Draw the background and objects in the collision grid (ie: the bottom half of the sign) Call finn.movement() which I assume is when the character is drawn Draw the remaining object layers, in this case the top half of the sign. I have ...


4

There's a few options you have, since your question is fairly high level, I'll provide these high level suggestions: Create a grid in code, and overlay the image on it Using the color of your path, assign the grid spaces that match "path color" as walkable. Use A* to find a path from start to finish. There's some tweaking you can do with this one, altering ...


4

In enlImg, you're creating a new image every frame and copy 100*(width*x * height*x) pixels. Instead, you should generate the scaled images only once and reuse them every frame. Basically, you'd make a list or array (or whatever data structure fits your needs) of BufferedImages: LinkedList<BufferedImage> enlargedImages; This should be a member ...


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

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

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

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

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


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

If I understand your question correctly, you're looking for a damped harmonic function which would be something along the lines of . In this function x would be time and it would give you the vertical acceleration of the bounce. An example of an optimized version of the function to your situation might be (replaced x with t for time) which would result in ...


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

A common approach to this problem, and many others, is to define "attachment points" (also called "hard points" or "nodes" or a million other things) to your model/sprite definitions. These are artist-defined locations on the model such as "left foot" or "head" or such. They are usually attached to the skeleton or other animation data (each frame for ...


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

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

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 data transfers. Because you're filling the screen at most once and scene complexity is low, we can totally ignore (b). (c) is a bit more complex and I'll get ...


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


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