Tag Info

Hot answers tagged

27

Having actors draw themselves is not a good design, for two main reasons: 1) it violates the single responsibility principle, as those actors presumably had another job to do before you shoved render code into them. 2) it makes extension difficult; if every actor type implements its own drawing, and you need to change the way you draw in general, you may ...


16

Both solutions (drawing on your canvas VS. traditional HTML/CSS) are totally valid and will work just fine. Some things to consider: If you're already using a canvas-based library, your code may be cleaner/more organized by continuing to use canvas instead of having additional (DOM-based) methods for UI. If your UI is extremely text-heavy (with dialogs ...


15

Double buffering a canvas based game will certainly be a performance hit. You'd be drawing an extra amount of pixels equal to your canvas size every frame. In canvas based games drawing to a canvas is the biggest bottleneck in most cases and you want to limit that as much as possible, especially on mobile devices. Chrome has GPU acceleration (as of the ...


15

There's box2dweb, which is a much newer port and has a lot fewer issues than box2djs. I highly recommend it. http://code.google.com/p/box2dweb/


15

I have created a framework specifically for creating HTML5 realtime multiplayer games, based on the Client/Server model. In this model, players send only input to the server (keys being pressed) - and the game occurs on the server. The server sends timed world-snapshots to all clients, and clients render themselves say 75 ms back in time from the current ...


15

Get a couple of friends and make them go through bugs and check all game assets. Think of ways of monetizing it, like implementing the Kongregate API or so.


15

I agree with Ef Es, get a couple of people, parents/friends whoever, and watch them play through it. It's the worse to launch a game only to find it really hard because you were use to the game mechanics. I suggest maybe making a blog of the launch of your game, just go over the details, any updates can be listed there as well. If money isn't a concern, ...


14

Yes. ForPlay. WebGL and Canvas 2D code paths exist for maximum performance and platform support respectively. The ForPlay GWT library helps with the abstraction. See the Google IO presentation Kick-Ass Game Programming with Google Web Toolkit for details.


12

This means that when the background is drawn, not all of it is redrawn every frame. When something on the map moves, the area it used to occupy gets marked as dirty. Then when drawing, you know you only need to redraw that portion of the background. This is beneficial because then you only need to redraw the areas that weren't shown before. So this is ...


12

Let's start with the array. Don't think about it as tridimensional. Indeed, if you want to have stackable units there, it makes sense at first sight: first dimension is collumns of rows of tiles second dimension is rows of tiles third dimensions is tiles, i.e. arrays of units. But this third dimension won't be consistent, as you will store there not only ...


11

About DOM DOM works pretty well for old-school 2D, that means using no image rotation or scaling. There are actually tools for both of these jobs, but you can't count on them performing well. For a game you should rely on the browser layout engine as little as possible, that means use position:absolute to place objects. Try as far as possible not to create ...


10

Canvas and DOM aren't mutually exclusive, although they are fairly separate. One good approach would be to render the main game area (eg. the falling pieces in Tetris) using Canvas, and do all the UI (eg. score display) with DOM elements that are overlapping the canvas element. That said, such an approach isn't really necessary for a primitive game like ...


9

read the following page you have to use atan2 : http://www.w3schools.com/jsref/jsref_atan.asp so angle = atan2 (vy,vx); and speed = sqrt(vy*vy + vx * vx)


9

What I always do in this case is store a frameTime variable and store the last update time variable inside my animation class. Then I only update the frame if the currentTime - lastUpdateTime > frameTime, in which case I also set last update time to currentTime. Huzzah for animation =]


9

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


9

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


8

You can animate your character by interpolating from the initial position to the target position. You would have to update the position of the player inside your gameUpdate method, before calling drawMap();. To avoid strange movements, you'll have to lock/ignore player input for that period of time. This can be done easily by setting a flag isAnimating to ...


8

Isometric games are functionally 3D, so internally, you should be storing the 3D coordinates for each entity in the game. The actual coordinates you pick are arbitrary, but let's say X and Y are the two on-the-ground axes, and Z is off the ground up into the air. The renderer then needs to project that into 2D to draw stuff on screen. "Isometric" is one ...


8

The Visitor Pattern can be useful here. What you can do is have a Renderer interface that knows how to draw each object and a "draw yourself" method in each actor that determines which (specific) renderer method to call, e.g. interface Renderer { void drawPaddle(Player owner, Rectangle position); // Note: the Renderer chooses the Color based on ...


8

Not knowing the API's at your disposal, here's the basic math behind getting an angle in degrees: angle = math.atan2(y2 - y1, x2 - x1) * 180 / math.pi; The * 180 / math.pi; converts it from radians to degrees.


8

Delta Time is used to make your game speed constant, independently of framerate. If your game starts to get "heavier", it will start to slow down in framerate on less powerful android systems. For example, if you made it to run on 60 FPS, an Android cellphone that can run it at 30FPS will have the game slowed down by 50%! By including the DeltaTime in the ...


8

First of all I suggest that you change directions from: W - up-left S - down-right A - down-left D - top-right into more intuitive: W - up S - down A - left D - right As for your concern, I suggest that you make two functions, one translating isometric tile coordinates into grid coordinates, and second the other way around. That way you could simply ...


8

Framerate varies by browser. A few still do not support accelerated canvas rendering, others don't support WebGL at all. Best bet is to profile actual code on actual target hardware/browsers to determine which performs best for your specific needs and user demographics. WebGL is only supported on IE in version 11+ but canvas has been supported for several ...


7

Box2D has a kind of maintained version on github: https://github.com/thinkpixellab/box2d Microsoft is using it for at least on of their IE9 test drive demos.


7

I'm just going out on a limb here and assuming that your drawing is painter style, in that something drawing first will show up behind something drawn after it. If that's the case, it's simply a matter of sorting your entities by y position before you draw. I'm assuming you have some mechanism of iterating through all of your entities. You'll have to sort ...


7

As thedaian mentioned in his comment, converting the magenta pixels to transparent in JavaScript is going to be slow. You should convert your images to a suitable format beforehand. ImageMagick can be really useful for this kind of tasks. Converting your tile with magenta background to an image with transparency is as simple as this: convert ...


7

Here's how I would suggest handling it: First, have your Player class store a variable, jumpForce, which is a 2D-vector similar to velocity and gravity. Now, also have a constant, initialJumpForce, which is the immediate force that will be exerted on your player when the jump key is first pressed. When the jump key is pressed, and the player is grounded ...


7

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


6

There is no need to double buffer html5 games. The browser already handles this for you by only updating the canvas object after your script has run. http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html



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