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

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

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


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.


12

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

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

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

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

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


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

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


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

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


6

I have a good feeling that getHP() and getMaxHP() are returning integral values (int, short, long, byte, etc). If so, they should be cast to floating point numbers (float or double) before dividing otherwise integer division will take place, causing the health scale to be either 1 or 0 and nothing in between. This also goes for this: 120 * (int)healthScale. ...


6

Renderer apart, consider reading the following articles to understand how older systems implemented optimal tile-based map traversal: Tile-Based Games FAQ version 1.2, and Tile Graphics Techniques 1.0 They're indispensable guides for implementing tile based games on systems which may have limited resources. In terms of today's technology, HTML5-based ...


6

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

As far as 1) you'll need to use a toggle state. Fire ONLY if the user did not click the previous tick, and is registered as clicking this tick. This can be thought of as the rising edge of the click state. here should the fire logic be called ^ clicked ___ not clicked ___| For 2) it seems that your update() ...


6

Generally, this advice is given not because of abstraction or code cleanliness but rather because gameplay logic that is sensitive must be simulated by an authorative server to prevent cheating and hacking. Long story short: If you don't particularly care about players hacking their score - don't bother. If your game is multiplayer, then you should looking ...


6

I think the most effective way would be just to fake it. Rendering to some target element using your own built in sprite font as if you're rendering a normal 2D screen. This approach makes sure no strange stuff happens when people are missing fonts, or are using a very different language (Chinese, Russian). Fonts and texts are one of the most difficult ...


5

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


5

The core problem in your code is probably that you pass in 0, 0 as the pivot point to rotate about in your rotate call. For a more robust way of expressing your transformation, in linear algebra the way to rotate about an arbitrary point is to translate the world in such a way that the point is at the origin, rotate, and then translate back. That is, ...


5

I've been using easeljs for my canvas interaction. It's pretty good and facilitates solid design. One of the key features that made me choose it was the facility to sync the position of your canvas objects and dom elements. This makes it easy to do CSS speach bubbles and static UI elements like the hud frame and that kind of thing. The advantage this has ...


5

Since your goal is to experiment with Javascript, I suggest you to take a look on Node.js for the server side. It's well suited for what you're trying to do because you can build a realtime server through websocket quite easily and stay DRY. Your backgammon logic will be wrote only one time and shared both client and server side (for anti-cheating / game ...



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