• ### Announcements

• entries
6
3
• views
7574

A journal about my journeys in game development

## Ludum Dare 26

So I decided to challenge my self this weekend and actually finish a game. So, Ludum dare :P

I'll use this post to post builds to be tested/played :)

I am also live streaming the whole thing here: www.twitch.tv/sparkedstudios

Good luck to all others who are taking part, im sure a few people on here are ;)

Hey guys, been a while since I posted here.

The reason behind this post is that I decided to challenge myself to implement a system similar to GLSL into my engine. Dont know why, but it seemed like a good idea at the time!

So, as many of you will know, I am working on Beyond The Light. One of the things I try to constantly do is to look at successful games, and see what I can learn from them. One of these games was in the Ludum Dare. Funnily enough, the game won LD25.

The game is called Atomic Creep Spawner, and it is a fantastic game. However, i was not very interested in the game mechanics, more the graphics.

The first thing that popped into my head as I watched this game being developed was: "I need to learn how to make that effect.

Good news! The game released it's source code!

After ~30 minutes of searching for the effect, I finally found it!

The code for the effect is below.

public static function makeMosaic(wid:Float, ?white=1.0, ?black=1.0) {
var wid = Std.int(wid);
var bd = new BitmapData(wid,wid, true, 0x808080);

bd.setPixel32(0, 0, w);
bd.setPixel32(wid-1, wid-1, b);
for(x in 1...wid-1) {
bd.setPixel32(x, 0, w);
//bd.setPixel32(x, 1, 0xffffff);
bd.setPixel32(x, wid-1, b);
}
for(y in 1...wid-1) {
bd.setPixel32(0, y, w);
bd.setPixel32(wid-1, y, b);
}
return bd;
}

If you are like me, the first time you see that you will think it is very confusing. I started to peel away at the layers, and looked at what each bit did. Now this particular method will scale the images by UPSCALE, and then perform the mosaic effect, which in reality is far simpler than it looks.

What the effect actually does, is it makes the top left pixel, top, and left pixels brighter (ignoring top right and bottom left pixels), and the bottom right, right, and bottom (again, ignoring top right and bottom left pixels) a bit darker.

Once I figures this out, I started to experiment. The first 3-4 attempts were pathetic, and failed miserably. What I was trying to do was convert from HAXE to AS3 to Java. This was just crazy, as HAXE was using features AS3 doesnt have, and AS3 was using features Java doesnt have.

So, I started from scratch. What I actually did to generate the following images is to print the image to a file after the function has been performed. This allowed me to rapidly update and keep track of them.

So, heres a little blog of the development of the shader

The base image, scaled up by 3.

First iteration, I had no Idea what the maths was doing, I was just chucking in random equations.

This, this went horribly:

Removed the last change and updated the bitshifting.

Lets atleast attempt to optimise it:

More bitshifting attempts:

It is worth noting that at this point I gave up, and started again. I had a far simpler idea this time, why not use HSL/HSB and change the lightness/brightness?

Seem familiar? This was the output.

Time for take 3. This time I took some time to trawl through the internet looking for ways people had done it. What I found was on Cocos2D and iOS, someone had made a very similar effect, and said just multiply and divide the colour values by a common factor. Then use max/min on the values to get the required result.

Surely it isnt that simple?

Attempt 1, I was getting somewhere!

Attempt 2, Adding in the second line of lighter pixels!

Attempt 3, Seems I forgot all about the alpha channel here!

Attempt 4, Looks just how I wanted it to!

YAY!

Well, that took 4 long and frustrating hours in total! And personally, I like the effect. It adds depth to a much lower resolution image. So what the plan is now, is I shall make a duplicate of BTL's code and just see what its like If I scale everything down

If you are interested in the code, its below!

package com.sparkedstudios.beyondthelight.graphics; public class Shader { public int w, h; public int scale; public Sprite sb; public double FACTOR = 0.7; public Sprite addAlpha(Sprite s) { Sprite result = new Sprite(s.width, s.height); for (int i = 0; i < result.pixels.length; i++) { result.pixels = ((255 >> 24) & 0xff) | s.pixels; } return result; } public Sprite scale(Sprite s, int scale) { Sprite result = new Sprite(s.width * scale, s.height * scale); for (int x = 0; x < result.width; x++) { for (int y = 0; y < result.height; y++) { int col = s.pixels[(x / scale) + (y / scale) * s.width]; result.setPixel(x, y, col); } } return result; } public Sprite mosaic(Sprite s, int scale) { Sprite result = s; for (int x = 0; x < s.width / scale; x++) { for (int y = 0; y < s.height / scale; y++) { int col = s.getPixel(x * scale, y * scale); if (col > 0) continue; int brighter = brighter(col); int darker = darker(col); for (int i = 0; i < scale - 1; i++) { result.setPixel((x * scale) + i, y * scale, brighter); result.setPixel((x * scale), (y * scale) + i, brighter); result.setPixel((x * scale) + scale - 1, (y * scale) + i, darker); result.setPixel((x * scale) + i, (y * scale) + scale - 1, darker); } } } return result; } public int brighter(int col) { int r = getRed(col); int g = getGreen(col); int b = getBlue(col); int alpha = getAlpha(col); int i = (int) (1.0 / (1.0 - FACTOR)); if (r == 0 && g == 0 && b == 0) { return toInt(i, i, i, alpha); } if (r > 0 && r < i) r = i; if (g > 0 && g < i) g = i; if (b > 0 && b < i) b = i; return toInt(Math.min((int) (r / FACTOR), 255), Math.min((int) (g / FACTOR), 255), Math.min((int) (b / FACTOR), 255), alpha); } public int darker(int col) { return toInt(Math.max((int) (getRed(col) * FACTOR), 0), Math.max((int) (getGreen(col) * FACTOR), 0), Math.max((int) (getBlue(col) * FACTOR), 0), getAlpha(col)); } public int toInt(int r, int g, int b, int a) { return ((a & 0xFF) << 24) | ((r & 0xFF) << 16) | ((g & 0xFF) << 8) | ((b & 0xFF) << 0); } public int getRed(int col) { return (col >> 16) & 0xFF; } public int getGreen(int col) { return (col >> 8) & 0xFF; } public int getBlue(int col) { return (col >> 0) & 0xFF; } public int getAlpha(int col) { return (col >> 24) & 0xff; }}

The Game:
http://www.ludumdare.com/compo/ludum-dare-25/?action=preview&uid=2982

The Author was deepknight, and well done to him for his success in LD25!

## More Progression with the level creator

Hey guys, in my last post I said my new priority was saving and loading maps. Well, now I have that ability

I managed to sort out a way to save and load maps There are two files produced when saving, a configuration file and the actual map. The config file stores things like:

• Tile Information
• Map Dimensions
• Tile Set Information

Basically everything needed to recreate the map without the actual map

The other file, the map, is just a basic file, where the id of the tile is printed, and then a comma. That's it. Really high tech loading/saving here ;)

However I was running into an issue with the loading of maps. When I create a map, save it, and then edit the tileset, the ID's of the tileset loaded would be out of sync, not good. To solve this, I load the config file, and then cycle through the tiles that have been loaded from the tileset. When there is a match, I update a 3rd list of tiles with that tile. All the tiles left over, I update the ID for and add to the list. This way there are no errors with the loaded ID.

I also started working on a tool framework. This so far has been successful. Essentially, my tool class looks like this:

[source lang="java"]package com.Sparked_Studios.Map_Creator.Components.Tools;

import com.Sparked_Studios.Map_Creator.Creator.TileRef;

public class Tool {

public static Tool brush = new Brush();
public static Tool floodFill = new FloodFill();

public TileRef[][] doAction(TileRef[][] pixels, int xPos, int yPos, TileRef selectedTile) {
return null;
}

public String toString(){
return "Unknown tool";
}
}
[/source]

A nice basic class which has static references to the tools I add, and a toString method to identify the tool in the GUI.

Then, this is my brush tool. This is the most commonly used tool, and at the moment, just changes the identity of the tile you click, or drag over.

[source lang="java"]package com.Sparked_Studios.Map_Creator.Components.Tools;

import com.Sparked_Studios.Map_Creator.Creator.TileRef;

public class Brush extends Tool {
public TileRef[][] doAction(TileRef[][] pixels, int xPos, int yPos, TileRef selectedTile) {
pixels[xPos][yPos] = selectedTile;
return pixels;
}

public String toString() {
return "Brush";
}
}
[/source]

And then for example, my FloodFill tool. However you may note that there is a 5000 tile limit on the fill tool, to prevent stack overflows. There is probably a better way to do this, but I just wanted to get a quick tool made.

[source lang="java"]package com.Sparked_Studios.Map_Creator.Components.Tools;

import com.Sparked_Studios.Map_Creator.Creator.TileRef;

public class FloodFill extends Tool {

public TileRef[][] pixels;

public int fillCounter = 0, maxFill = 5000;
public boolean fillFlag = false;

public TileRef[][] doAction(TileRef[][] level, int xPos, int yPos, TileRef selectedTile) {
fillCounter = 0;
fillFlag = false;

this.pixels = level;

int id = level[xPos][yPos].id;

floodFill(xPos, yPos, id, selectedTile);
return pixels;
}

public void floodFill(int xPos, int yPos, int toFill, TileRef fill) {
if (fillFlag) return;
if (fillCounter > maxFill) fillFlag = true;
if (xPos < 0 || xPos >= pixels.length || yPos < 0 || yPos >= pixels[0].length) return;

if (pixels[xPos][yPos].id == fill.id) return;

if (pixels[xPos][yPos].id == toFill) {
fillCounter++;
pixels[xPos][yPos] = fill;

floodFill(xPos - 1, yPos, toFill, fill);
floodFill(xPos + 1, yPos, toFill, fill);
floodFill(xPos, yPos - 1, toFill, fill);
floodFill(xPos, yPos + 1, toFill, fill);
}
}

public String toString() {
return "Flood fill";
}
}[/source]

I am also working on some other tools and a proper GUI for them. I am planning on having the Dynamic fill tool, which I will go into more detail with in a later post, the good old Eye dropper tool, to quickly select a new tile, and a few others, which again will be detailed in another post.

The GUI I am planning is going to be something similar to paint programs, where you have the tools on a menu bar or panel, and click the one you want. Also, I am going to go for a frame based approach for things such as tile selection and tool selection, to keep the workspace uncluttered.

Anyway, back to coding!

## Level Creator Progress!

Hey guys!

In my last entry, I detailed the requirement for a level creator. This is the first time I actually have something decent to show for my work! I have been putting a lot of work into this, and there is still more to come!

To start with, this is the opening interface. You just have to input the data, and you are free to go. If however, you miss a piece of data, the defaults will be loaded. The defaults are the sizes and tileset that will be packaged with the jar.

At the moment, you can select from any of the tiles in the tileset, and you can then place that tile down. The tiles are placed in miniature if the gridsize is too small, or larger if the gridSize is too big. Essentially the grid size, is the size of the grid on the screen. The editable area is set by the level width and height, and that is set in the initial screen, or defaults to 100*100. If the level is too big to fit on the screen, you can scroll around the map, and it will only show you the area you can edit, and if the whole map is on the screen, you cant scroll. I am planning on adding the ability to zoom in and out, all that is really required to do that, is two keys to assign in and out to, and then to re-initialise the resized sprites each time you zoom.

In my last entry, I also said that I would use a live preview window, to see what was going on. I will still be doing this, however it is a work in progress. It should be relatively easy to add, and will require its own navigation, and it will be updated live, so you can see in real size the work you are doing.

Currently, this is what the creator looks like:

The parameters are: 10 Grid size, and 30*30 level. This is also using the default tileset!

Not too great looking.

However, I am going to get the basics working first, including some basic tools, such as fill, and addLake. Add Lake for instance would be specific to the tile set, and would allow the user to add a lake, which would also organise its border tiles. This particular tool may not be implemented as it is a bit too specific, but I may let the users build the tool themselves, and have it dynamically grab the right tile.

Anyway, the creator is coming along nicely, and my main focus now, is to save and load the map. This is easier said than done, because the image output will be random pixels, or so it will seem. But the pixels are generated on load, and arnt necessarily the same as the last run. So what I am planning is another form, which will load a map config file, which details which x,y coordinate on the tileset is which colour pixel. This way I can save and load maps to allow the user to create huge maps in multiple sittings. This should help me finish off beyond the light's overworld, which will allow me to release a build so people can let me know what they think!

Matt

## I need a level creator...

So I have been doing a lot of work on my game engine recently, and games that I am making with said engine. However, I am noticing the same flaw. There is no quick and easy way to visualise the level in game, with the new level, (which is either hard coded or loaded from an image). So I have started work on a level creator, with the specific aim to use it with my engine.

The features I plan on having are as follows:

[ ] Live Preview window
[ ] Tile Information
[ ] Code Generator
[-] Select and place tiles
[ ] Level Output

X = Done
- = Working on that at the moment.

There are probably more, but I cannot remember them for the moment

The reason I am adding a code generator, is because the act of adding in a new tile to my engine is quite repetitive. And loading these tiles is the same, repetitive. So to keep the repetition to a minimum I am adding the generator, so I can quickly and easily add more new content to my games.

Also, Some of you may wonder why I would need a live preview screen in a level editor. Well, I am going to have a 10*10 pixel represent each tile. I will use a colour for the pixel, based on the colours in the tile selected, to represent this pixel. This allows me to have a large area of the map shown at once, so the size of the tiles being used will have no difference to the representation. Then, to see the correct tiles loaded, the preview window will be used, and the relevant sprite for each tile will be displayed.

One final thing, which is a question to you guys. How would you store these maps? I am currently thinking of just storing them as a large image where 1 pixel is 1 tile, but was wondering if there was a more efficient way to do this.

Well, thats all for now! Thanks for reading!

Matt

## Hello World!

Hello World!

I cant think of a better way to start off a journal on a programming website

Anyway, Hello. My name is Matthew and I have been programming in Java for 4 years now, and for the past year and a half I have been writing games in Java. These projects have been varied from making a Pong remake to start with, and some other game remakes. I gave an RPG a go, however I lost interest in this. I have also had a bit of fun with 3D game programming, however, the logic for things such as collision detection so far have eluded me, so I'll stick to 2D. So that brings me onto my current project.

I am making a Rogue-like, as I love playing games like this, having a nice big dungeon to explore, items to find, bosses, shops, all of that great stuff! I know some people lose interest in this sort of thing, but I cant think of anything better

The game is called Beyond The Light, and I am really enjoying programming it!

So far, there is:

• Random Dungeon Generation
• 2 Enemies, and 2 Towers (Enemies that will fire projectiles at you)
• An auto play feature for testing the higher levels
• ~450 items which are randomly generated at the time of dropping
• Particles and particle effects for events like, picking up an item.
• A currency system, which will be expanded upon with the shops

And there is so much more I am planning on adding! I dont want it to be so repetetive that it like:

Run around dungeon.
Die.