A brief intermission.

I haven't been active a lot these days due to a couple things. First off I hit a problem on my project that is rather frustrating and I chose to take a break to get my mind off. I don't particularly mind problems when they're solvable. Like, the problem I had with the For Each that I will explain here is that kind of problem. Its possible to solve them using logic and a couple of tests. But there are problems that require a little bit more patience and hacking to solve.


The problem I have is related to the debugging phase. You get a bug, you yell "WTF !" you look in your code: nothing. You check the logic of your reasoning, the way data is handled: nothing. Then you decide to put a break point somewhere and run your program. Execution stops, you take a peek at the data, you see what the problem. you go back the code, you change a line or two and TADAM. Magic, problem solved ! But I did that, and nothing at all. Heres a sample of the broken code ( I thought I had it saved somewhere but it seems that part of code was deleted, here is something that should look like it. )

Sub something()
For Each c as heroTile in Me.Controls
       Me.controls.remove(c)
Next   ' Breakpoint right at this line. 


msgbox("Test Test Test")


End Sub
I inserted a break point at the Next keyword. And the msgbox method is for testing purposes, you will see why in a moment. After execution, the loops go through the controls and removes them. ( This will actually return an error, but this is just a sample to illustrate my problem ) When he hits the next, after every iterations are finished or while he is doing it. Execution stops. You heard me right, it just stops !! It will not budge, I can't make the execution go forward because he will NOT go to the next line. The compiler just waits there and looks stupid. I repeat, msgbox is NOT shown because execution will NOT go through that line. Which admittedly is weird. It might be something I'm missing or knowledge I don't have, but without a couple of hours of research I just can't see how I will solve this. Meanwhile, I thought of something for you guys:

For Next "Remove control" error.
Lets say I have this piece of code in a procedure:

Your guess is a good as mine, is scrolls through every control inside the form, and removes every pictureboxes. One by one, pictureboxes will be removed. From the first to the last. Unfortunately, you will find yourself with this result:

Can you spot why ? I'll tell you why. Because the Remove() function works in a special way. I made up a little .png to explain how it works. Image looks like crap but at least I can explain what it all means.

First lets say I have 10 picture boxes numbered 0 to 9. I want them all dead. I invoke the Remove() function inside a loop and I'm done. Actually, its otherwise. First, during the very first iteration of the loop ( lets say a For Each ) he will "plug" himself on the first picturebox he sees. He will then delete the control. BUT he will take every other control in the collection and move them one place up the collection. So element 1 will be element 0, element 2 will be element 1 etc. But a For Each works in ONE way and its numerically from the first control to the last. After deleting what was contained in the first address, he will move to the second EVEN IF THE CONTENTS OF THE FIRST ADDRESS WAS FILLED UP. At the second pass, he will remove the second element ( which is originally element #3, the second one is replacing the #1). This will create the blanks you can see in my output. Each one he removes, the next one is skipped. The problem is easily resolved by using a Do Until or another mechanism to check if there is a pictureBox remaining and delete it until there is none on the form.      

I'm hoping this piece will help some people when they see the same problem. This information was found using MSDN, never forget to hit the f1 key when you need help !

Milestone achieved !

The Proof
Well I finally have something to show as a proof of concept:

Isn't that awesome ? Megaman standing on a map full of road and grass ! I made the image extra large so you all could see it. The simplicity of this piece of program is more complex than you can image. I will deploy a few images to explain what code I used to piece this up.

First I used both the "ArrayMap" and the "GridMatrix" technique from earlier posts. I have two arrays - BasicRoad and SpriteMap, that contains the values of which tile and sprite to apply in which position of the matrix ( as seen on the left ).

Then I created a method to take the values in the BasicRoad array to decide which image to place in the tiles matrix.

Afterwards I took the images from the matrix and put them inside a picturebox-like class and placed the tile on the form.

Next I had to do the same with the sprites, but unfortunately I had a problem. My idea was to place the sprite in a picturebox and put that picturebox on top of the tile he's resting on. But there is no opacity property on pictureboxes so wherever I put the sprite he was hiding the tile under him. Making an ugly hole in the map. to solve this problem I used the backgroundImage property and took the image of the tile he's resting on and applied it as background.

I created two classed derived from picturebox: GridTile and SpriteTile so when I scrolled through the form I could use their type to get only the tiles or only the sprites.

 

You can see that I am passing quite a few parameters to these classes, instead of giving them their values after I created them. I made a New() so I could give them their values directly when created. Much cleaner that way. You can see where I use the me.backgroundImage property and used the coordinates from the matrix. 

I'd like to stress that this is NOT a representation of the final project. This is from the vbProject that I made to explore the mechanism that I will use in my game. I still haven't done a single line of code regarding the game itself. The sprite I used are not mine and property of their respective owner. But I can take credit for the tiles since I made them, and they are awesome.

The "ArrayMap" technique.

The Basics
This technique is another way of representing a map created from a set of tiles. With the GridMatrix technique, I created a matrix with the exact size of my window and applied and scrolled through the matrix generation pictureboxes and applying them a specific tile ( a 32x32 picture ). 


There are a few weaknesses with this techique. First if you look my code closely I AM NOT EVEN inserting values inside the matrix, I am merely strolling through its dimensions and using this to represent rows and columns. This strikes me as the first big weakness. The second one is that: what if I need to access the tiles afterward ? Lets say my caracter is at the right edge of the screen and goes right, supposedly to make the map scroll to the right. Well because I did not store the location of the tiles and images somewhere, I have to re-scan the whole window and somehow code a way to remove the leftmost column and add one at the right. This is a would-be pain in the ass.


And here comes the ArrayMap technique:

This is an array. It signifies that the letter A represents all those numbers at once. And that we can get their values easily. 

An array is declared just like any other value:

Dim tileset as array

And to populate this array:

tileset = { 0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3 }

Tileset will now have those values stores inside him. To retrieve them we can make a For Each loop and write each in a console

For Each x as Integer in tileset

        writeline(x)

Next

The Method I use

So I made a couple of arrays and planned to make picturebox images from the value contained in the array. Say the first value in the array would be 0 so the tile at (0, 0) is going to be say, grass. The 14's value would be the code for (14, 0) and the 16'th would be (0, 1)  (because we are scrolling left to right and then go to next line after the 15'th element ). 

Those are my arrays

The code I used to turn values into tiles:

And the result of using the BasicRoad tileset is: 

This is pretty much like the GridMatrix technique but instead of looping through a matrix we are using a For Each to cycle through the values of the array and using a Select Case to decide which tile to use as the image. 

My Tools

The IDE

IDE for Integrated Development Environment, is the "main tool" used for programming. It is the workbench in which you will code and look at the results. Nearly every language have an IDE, many languages indeed have many of them. The one I am using is the Visual Studio 2010 from Microsoft. 

Visual Studio 2010 - Ultimate

This is the release candidate for the 2010 version of Visual Studio. This include the Team Suite. The Team Suite is the set of tools to work with a Team Foundation Server, I manage one and I use it to share all my projects with different computers. It is a very powerful version control system. 

Team Foundation Server

Team Foundation Server is a version control software. In layman's terms, it keeps your projects sync'ed between computers. How it works is that you first upload a project to a Collection. A collection might contain many files and VB projects. When you want to work on a project you do a "Check-Out" of the files you need. While the files are checked out, no one can save any modifications to it until files are checked back in.  

Red Gate's Reflector

This tool is a decompiler made specifically for .net assemblies. What a decompiler does, is that it shows you the software source just by looking at the .exe or .dll.  You can understand that it is a very powerfull tool to inspect other's people code without having the source code. This decompiler works only with .net assembles. 

Sandcastle

Sandcastle and its GUI package is a software that will go through your project's code pages and generate .htm files out of your XML comments. This is very useful for publishing documentation.

SQL Server

SQL Server is what helps me with the configuration and use of the Team Foundation server. It allows me to create databases for each collection.

The "GridMatrix" technique.

The Basics

As you can see from my last posts, I will be using matrices a lot. First off what is a matrix ? It is an array of data arranged in a special fashion with each other. A single matrix may have several dimension

A matrix can have any number of dimension but it is impossibly hard to imagine more than 3. But there are applications for them still. 

A matrix is created thus:

Dim myMatrix(4, 4) as Integer

This will have created a matrix with two dimensions, each containing 5 elements ( starts at 0 ). Easy isn't it ?

The Method I use

We will then look at this piece of code here:

This is the code to make a simple 5 x 5 matrix and write the column number to the console. Note than I did not generate values inside the matrix, it is still empty. I allowed my program to follow the flow of the matrix and reflect the geometry of the matrix itself. 

I use a sweeping technique, I choose each line one by one with the first For Next loop. This will allow me to "plug" myself in a single line. After this I sweep through the columns using another For Next. Then moving unto the next line and repeating. 

Couple interesting points here.  myMatrix.getLowerBound(0) will take the lowest position of the first dimension ( in this case the dimension 0 ) and will go up from there until he encounters the upper boundary of the dimension. If I wanted to make a 3-dimension matrix I would have written 

Dim myMatrix(4, 4, 4) as integer

The output is then: 

Design UPDATE !

Yes, an update already. I've been messing around with my IDE and decided to give a go to the design of the game. What I did here was to generate the grid of the game window. As you know in earlier RPG's, the world was a series of tiles aligned in a matrix pattern ( Meaning for example: a 16x16 grid, showing 256 tiles total ) and your character and anything in the game world occupied a single tile. I made a few samples to give me a better idea of what I wanted my game grid to look like.


I had a choice between placing each individual tile on the form, or programatically add them after the form loads. The advantage in adding them after the form has loaded is that your form can be easily modified. As well as giving a greater number of design tweaks. I tried both method thought, placing them manually and automatically. And here are my results:

The one on the left is the automatic, right now is manual.

I chose the colors at random just to give me an idea on the output. Not a lot of difference you might say ? Well when you look at my design form, you can see it is a lot less cluttered. 

Automatic generation yields a much cleaner form designer.

The one on the left is the auto-generated window, the one on the left is the one I added every single tile by hand ( with the help of CTRL+V of course ). You can see the absence of picture boxes on the one on the left because there is currently no tile alive yet. They have yet to be created. Also, the code for autogeneration is MUCH smaller than the manually added at start. 

Let me explain why: When placing controls on the form, even thought you cannot see the related code, some is still created. For a single picture-box, is looks like that

      Me.PictureBox195.Location = New System.Drawing.Point(288, 372)

        Me.PictureBox195.Name = "PictureBox195"

        Me.PictureBox195.Size = New System.Drawing.Size(32, 32)

        Me.PictureBox195.TabIndex = 213

        Me.PictureBox195.TabStop = False

Multiply that by 256 times, and you get quite a big file to load already at start. Meanwhile, when adding them automatically when the form loads, they are added one by one with much cleaner code thus making your source code smaller and lighter. The code I used for both forms is thus:

The first one is for the auto-generate, and the second one is manual. You can see on the second image that the only code running is the color-chooser, thats be cause there IS NO code needed on the main() procedure for showing all the picture boxes. But when you compare the first to the second, one simple method is much cleaner than 265 chunks of designer data.


All in all, auto-generation is a much better choice for the purpose of making game because the grid is not static. As we move to the edge of the screen I have to be able to change the map very quickly and efficiently .

The steam is gone, Phew

Finally, my exam is gone and I did well. To keep dust from settling in I'd like to share this post about programming languages that I found a few months back. Hilarious. 

A Brief, Incomplete, and Mostly Wrong History of Programming Languages

1801 - Joseph Marie Jacquard uses punch cards to instruct a loom to weave "hello, world" into a tapestry. Redditers of the time are not impressed due to the lack of tail call recursion, concurrency, or proper capitalization.

1842 - Ada Lovelace writes the first program. She is hampered in her efforts by the minor inconvenience that she doesn't have any actual computers to run her code. Enterprise architects will later relearn her techniques in order to program in UML.

1936 - Alan Turing invents every programming language that will ever be but is shanghaied by British Intelligence to be 007 before he can patent them.

For more of this visit this page.  


Updates coming for the Design ! Stay tuned.