General Gameplay: Online Queville Map

Posted: 10‑25‑2012 21:00


Ghost Grabber
617 posts
Over the past few days, I've been working on something that will be beneficial for all. A world map! Not just any world map, the updated world map that is "actual size" as well bigger to see made using HTML5, JavaScript, and love.

Link is at the bottom but you can continue reading to better understand this.

Sadly, however, it's missing a few things. Let me explain.

Queville has a few layers. The main layer is the tiles. The ground we walk on. Then there is the objects layer. The layer we interact with. That is why you do not see buildings, piers, caves, some trees and the like.

These objects are on a new layer and cannot be added onto the map because they do not follow the 32x32 tile-system Queville's grounds follows.

Secondly, the map in-game will not resemble the map on this site. The map in-game is not smooth. For example, rock edges on one screen are not properly aligned on screen two. A river is not aligned the right way in another dual-screen shot. Things like these ruin the "map as a whole." So what I did, was smoothed the whole map out. Thus this is not a 100% accurate description of Queville but a darn-near close one!

That being said, this provides a clean map. A map without any hazards or anything else to obstruct your view.

Now, why didn't I just make one big image? Well, first of all, I know some people are still on the lower-scale of things and thus need time to load images.

Now here comes the technical part or how I'm going to explain how I did this.

The map is on <canvas>, an HTML5 element. The tile images are preloaded. Queville uses separate images. I use one. This one to be exact. In Queville, every image is a request. That slows your browser down. So, what I did was take the tiles, put them in one image and then split them and assigned them to an array on the page.
    imageObj = new Image();
imageObj.src = "tile2/all_tiles.png";
imageObj.onload = function() {

// draw the image to canvas so you can get the pixels
context.drawImage(imageObj, 0, 0);

tilesX = ImageWidth / tileWidth;
tilesY = ImageHeight / tileHeight;
totalTiles = tilesX * tilesY; // 480+ tiles

// Reset the map
context.fillStyle = "rgba(255,255,255,1)";
context.fillRect(0,0,canvas.width, canvas.height);

// Load the map into 2D array
board = loadMap(1);

// Everything good to go? We draw the map.

The map itself uses procedural generation. Wikipedia refers this as content created "on-the-fly" instead of "preloaded". This is generated through algorithmic means instead of of manually.

When you enter the webpage, you are assigned an "invisible" player (that you can't see) and a fixed viewport. As you move using the arrow keys, your viewport is fixated on the player, being center of the map, as you move through the map.

The map itself is mapped through simple 2D arrays. A number per array and a big array, too. That's what the board[] tile is for.

So when you move, your viewport changes until you get the edge. When you get the edge, you cannot go any further.

When your viewport changes, the whole map "redraws" itself. Since you already loaded the whole image and the tiles are split up -- it loads instantly while making one request.
        vX = playerX - Math.floor(0.5 * vWidth);
if (vX < 0) vX = 0;
if (vX+vWidth > worldWidth) vX = worldWidth - vWidth;

vY = playerY - Math.floor(0.5 * vHeight);
if (vY < 0) vY = 0;
if (vY+vHeight > worldHeight) vY = worldHeight - vHeight;

You can see the viewports stay 0. That's for when the "player" gets close to the edge. The viewport is measured by adding world width or height minus the viewport width or height. Then we measure to see if the viewport coordinate plus viewport fixed width or height is more than its world height or weight.

Then we re-draw the map.

All of this from pressing the button to drawing the tiles happens in less than a second.

Isn't technology great?

Anyway, I tried to explain it to the best of my ability. English is not my first language -- sorry.

Here you go. I hope Joe is fine with me using the graphics. I linked back to Queville on the site.


[.:. View Queville Map .:.]

1st in Smithing and Mining
Online Queville Map


Hunt food, smith weapons, and prepare for battle! Can you stop
the Evil Que from taking over the entire game? Browser based multi-player
fantasy role-playing game that requires no downloads or plug-ins! Free to play forever!

By being at, you agree to our Terms of Service.