![]() ![]() There’s also a bit to be gained if you only set the style properties of the strips when they actually change. Firefox appears to do much better with the large, monolithic texture image, so I’ll keep that functionality and automatically toggle it with a bit of dirty browser sniffing. The original Wolfenstein 3D textures used only 16 colors each so we’ve got more than enough now. By cutting up the texture in smaller images you can also get prettier textures for Opera without exceeding the 19 colors limit that I talked about in the first article, since the textures don’t have to share the same few colors anymore. I’ll add a flag for toggling between using a single large texture image and using separate images. Some browsers (Opera) will also perform a bit better if I cut the big texture image into smaller images, each containing one wall texture. If I use CSS clipping instead, I can get rid of those extra div elements, in which case I only have to manipulate half as many DOM elements in each rendering cycle. For each vertical strip, I’m currently using div elements with overflow:hidden to hide the parts of the texture image that don’t need to be displayed at each point. Next I’ll optimize the rendering process a bit. Check the sample code to see this function. Since the gameCycle function now only takes care of game logic (for now, only moving the player), a new renderCycle function has been made with the same time managing measures. Note that one drawback of this approach is that if there’s enough lag, there is a risk that the player will be able to walk through a wall, unless we either get better collision detection or change the gameCycle so move is called several times, chipping away at the lag. If you multiply movement and rotation by this factor, the player will move at a steady speed even if the game isn’t running at a perfect 30 fps. I can now use the timeDelta time to determine how much time has passed compared to how much should have passed. Player.rot = player.rotDeg * Math.PI / 180 Player.rotDeg = Math.round(player.rotDeg / 90) * 90 Player.rotDeg += mul * player.dir * player.rotSpeed Add rotation if player is rotating (player.dir != 0) Var moveStep = mul * player.speed * player.moveSpeed movement to ensure game speed is constant so calculate how much we should multiply our We should have moved after time gameCycleDelay, Time timeDelta has passed since we moved last time. I’ll try to ensure that both of them keep to a rate of 30 frames per second. The gameCycle could for instance run at a fixed number of times per second while the rendering cycle just runs as often as it can. The heavy work is done during the rendering and will always affect the game speed but if I split them up I can at least get a bit better control over the speed at which these two components run and, if desired, let them run at different frame rates. That means pulling the raycasting and rendering out of the gameCycle function and creating a new renderCycle. The first thing I’ll do is split that into two. In the first article, rendering and game logic was tied together in the same timer for the sake of simplicity. Splitting the rendering and the game logic Without further ado, let’s get on with optimizing the existing code base. The full (MIT licensed) sample code is available for download here. The final game example looks like this: Figure 1: The finished example, as built up throughout the rest of this article In the second half, I’ll implement static sprites to give the castle a bit of atmosphere and finally add an enemy or two. In this article I’m first going to improve on the codebase I’ve already built, optimizing the rendering process to gain better performance and making the collision detection between the player and the walls better. In the first article, I created a basic map for the player to walk around in and a pseudo-3D rendering of the game world using raycasting techniques. This is my second article about creating Wolfenstein-like games with JavaScript, DOM and HTML 5 the techniques discussed are similar to those used in my WolfenFlickr project. Previous article: Creating Pseudo 3D Games with HTML 5 Canvas and Raycasting - Part 1 Introduction
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |