Tag Info

Hot answers tagged

24

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


15

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

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

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/


13

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.


13

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


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


11

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


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

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)


8

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 =]


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

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


8

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


7

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


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

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


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


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


6

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


6

It probably was not done by hand, but as the WAD file format is pretty well documented it was probably relatively easy to write a one-off tool to perform the conversion. It's possible one of the WAD editors floating around have the functionality buried away, but I suspect that the author used a tool he wrote himself (and has not released) in this case. The ...


6

Rendering in most games takes place within a loop (the game loop) and in each iteration of the game loop the entire backbuffer is cleared (in this case your canvas) and redrawn from scratch. The term dirty rendering is referring to a technique where instead of clearing the entire canvas every frame, you only clear it on demand (i.e. only when something ...


6

OK, I figured it out. Almost. It's actually quite obvious, and I feel a bit dumb for not noticing this right away. When you call drawImage(src, 0, 0) without specifying width/height it draws the entire src region, which in this case is much larger (the canvas is 320x420 versus the img at 185x70). So in the canvas case the browser is doing much more work, ...


6

Many games do use an array of arrays to represent a level. It's possible that you could have poor performance with massive or infinite maps of open worlds if the entire map is in memory; a solution for that is to keep only some portion of the map in memory and load/unload map portions as the player(s) move around. If you're just beginning to write small 2D ...



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