I also made use of a game idea I created last quarter as the content. It is a game that the player hit and replace obstacles on the map with good road, so that a truck can pass through to send resource to poor villages. I simplified it to a demo within a given time frame.

If a frame is already working, it requires courage to start changing the code. It is sad to see errors come out again. The worst case is I added many lines of codes but the program is not running in any ways and I cannot change it back. For this biggest program I have ever made in this quarter, I back up a version each time I successfully implemented a features. The process is as follow:

1. Tile map (last time) + Keyboard control character

2. Character with animation

3. Collision and logic <- change a tile to something else when touching it

4. Create the sprite sheet for the tiles and walkcycle of the character

5. Add another class for the truck and load an image into it

6. Make the truck move.

This is how the game looks like at the moment:

However I did not reached step 6 before the deadline. But that should not be hard. I can reuse the code for collision detection from the character.

Knowing what is going on with the code is actually very enjoyable.

Clipping a sprite:

No wonder why each time I was looking for animation for sprite, it always comes in a sprite sheet. I needed to crop each of them out with photoshop in order to import into Scratch. That is because the image can only be loaded once, and reused many times in the program. If any animation is involved, only the clipping plane is being moved (or the image behind the clipping mask is being moved), instead of swapping the whole image into something else. The following code is the animation for the dot (character). It has multiple frames when it is facing left and multiple frames when it is facing right respectively. Same method is repeated for the truck and the tiles. But the tile is a bit different. It is clipped according to its type. Changing the type of the tile is actually changing the position of the image.

clipsRight[ 0 ].x = 0;
clipsRight[ 0 ].y = 0;
clipsRight[ 0 ].w = DOT_WIDTH;
clipsRight[ 0 ].h = DOT_HEIGHT;

clipsRight[ 1 ].x = DOT_WIDTH;
clipsRight[ 1 ].y = 0;
clipsRight[ 1 ].w = DOT_WIDTH;
clipsRight[ 1 ].h = DOT_HEIGHT;

clipsRight[ 2 ].x = DOT_WIDTH * 2;
clipsRight[ 2 ].y = 0;
clipsRight[ 2 ].w = DOT_WIDTH;
clipsRight[ 2 ].h = DOT_HEIGHT;

…

clipsLeft[ 0 ].x = 0;
clipsLeft[ 0 ].y = DOT_HEIGHT;
clipsLeft[ 0 ].w = DOT_WIDTH;
clipsLeft[ 0 ].h = DOT_HEIGHT;

clipsLeft[ 1 ].x = DOT_WIDTH;
clipsLeft[ 1 ].y = DOT_HEIGHT;
clipsLeft[ 1 ].w = DOT_WIDTH;
clipsLeft[ 1 ].h = DOT_HEIGHT;

…

 <– the sprite sheet of the character

 <– sprite sheet for the tiles

 Sprite Animation

In each fps of the running program, the sprites are re-evaluate according to its number of frame, then move the frame by 1. In the following code, a function apply_surface is called in each frame in order to render the image with its clipping box and mask. A simple logic is applied to determine it is left or right and pass it to the function. When right or left key is pressed, the x position is added by a positive or negative velocity. Facing left or right can be determined by the direction of the velocity. And the frame of the sprite is looped. It is following the same logic as in Scratch.

if( status == DOT_RIGHT )

{
apply_surface( box.x – camera.x, box.y – camera.y, dot, screen, &clipsRight[ frame ] );

}
else if( status == DOT_LEFT )
{
apply_surface( box.x – camera.x, box.y – camera.y, dot, screen, &clipsLeft[ frame ] );

}

Collision

The collision checking function is surprisingly similar to the one I made for Bomberman I made for previous assignment with Scratch, like comparing the x and y of object a and b to see whether they are overlapping and at which side. But this time the logic blocks are code in the form of function. Another function touches_wall is calling the check collision function and determine what the character is actually touching and return true or false. The original calling is to stop the character by adding and deducting the speed at once when it hit a wall-type tile. I change it to changing the tile type of the tile it hit. I was trying to create a new tile to replace the old tile. But that did not work. And changing the tile type is the right way to achieve the effect I want.

bool touches_wall( SDL_Rect box, Tile *tiles[] )
{
//Go through the tiles
for( int t = 0; t < TOTAL_TILES; t++ )
{
//If the tile is a wall type tile
if( ( tiles[ t ]->get_type() >= TILE_CENTER ) && ( tiles[ t ]->get_type() <= TILE_TOPLEFT ) )
{
//If the collision box touches the wall tile
if( check_collision( box, tiles[ t ]->get_box() ) == true )
{

//return true;
tiles[ t ]->type = 0;

}
}
}

//If no wall tiles were touched
return false;
}

 Load image

loading an image is more complicated than I think. At first I simply copy all the codes for the character and replace all the variables with the truck’s one — without test running it. After I completed, it somehow did not work well. The truck image clashes the memory of the tile and everything messed up. I went back to a back up file and started up from the beginning step by step. But it already took me several hours. T_T

===================division======================

At the beginning of the quarter I started from Scratch, using ready made logic block without knowing what is within. After a quarter of learning, I can finally repeat the process with codes and library. Of course if I can do the same with a easier way, why do I need a more complicated way? But it is a learning process. I feel like I can program whatever game I need to make now!

I intended to make this assignment a test of the logic I planed for my own other project. It is a pipe connecting game which a player can tap and rotate a pipe tile to connect them into a complete water way. The logic is not limited by the platform, if I can test it out and make that an assignment, why not? Smart hah!

We need to start with a flow chart this time. I have that every time so no worry. I have a brief lecture from my professor and he told me I can save many work if I replace the array with a class and make use of function with the class. I should have learn that when I was learning Java and I sort of need that for Actionsript 3.0 seven years ago. But at that time this was not covered in the course and I was into something else so I terminated my progress in learning programming. I know that I need to learn that some point in my life and this is the chance.

The product is a simplified pipe attack with just one row. I am testing out the logic so rows number does not matter. Everything is going smoothly until I am parsing a class into a function. I admit that my foundation is not good. This code simply don’t work:

output(a[]);

But at this moment I need to move on, so I went to plan B. Using switch can solve the issue. The logic still remain the same. But I am not making the process into a neat and tidy function. If I am making more rows I may have to copy and paste the logic to infinity. This is how it became:

The game runs like this: first input the row which the rotating tile belongs to. In here we have just one row, so A. Then the column. If they are all horizontal, you win.

Again, getting all the dll and header in place, linked correctly in the VC configuration, so on, are annoying. Different place on google search led me to various solution, including but not limited to: installing the windows SDK (different version), downloading various version of openGL package from different places, ETC. Even after Kevin tell me that there is a download file of source code at the bottom of the tutorial, the errors just shifted to some other errors.

Alright at the time I was distracted with something else, actually it was some course registration issue I was talking to my professor, I found too lines of code I see a lot of time when I am working on xcode. I did not put too much of expectation on it because there are just 2 lines. But of coz it runs or I would not post it here!

“Oh what?! It runs? Okay…”

I am not particularly happy this time. I think I have got used to this kind of situation and it is completely normal.

Now it is just a black dot moving around a tiled map with keyboard control and collision detection. I can start replacing the tile with something more appealing.

This tutorial of SDL is actually written quite practically (well at least to my experience). The tile is an external sprite sheet which I can edit with imaging software. The map is designed in an external txt file (which here is a .map file) which I can edit very easily. And all there will be loaded dynamically as the program initiates.

the sprite looks like this:

So I will just edit and replace it will this:

It is always good to know how it works and when I look at how it is actually coded, the code look exactly like what is in my mind. And the point is I can understand it very quickly and I do not need to code it myself.

So the code will manipulate the position of the image according to what the type a tile should be. It is similar to writing code to crop the file dynamically.

In the following function, the program import the .map file. I use a same name as the tutorial, the lazy.map, just to avoid any trouble if I change the name. The code is surprisingly simple. Just: std::ifsteam map(“lazy.map”); A bit like in flash.  A lot simpler than those I use to look at when I am dealing with iOS app.

It looks like below when it runs again:

left: a map dat opened in notepad. middle: the resource images and else. right: js files.

BTW the tutorial is in Japanese. So lucky that I can sort of understand what it says.

http://www.programmingmat.jp/soft_lib/m11rpg/m11rpgwj.html

When I was checking out this video, I thought if I know how it is made, my assignment for this week is done lol. But the author did not mention anything about the process even somebody asked him in the comment. So I searched some terms and pages he mentioned in the replies. And I get the SDL library, the Simple Direct Media Layer.

This page looks very encouraging and powerful. Feels like if I go through them I can do whatever I want. Let’s go for it for a while.

http://lazyfoo.net/SDL_tutorials/index.php

I also found another Tiled map tutorial with some other library. I will just leave a link here.

http://www.dreamincode.net/forums/topic/230524-c-tile-engine-from-scratch-part-1/

So we are moving to GUI. Microsoft Visual C++ 2010 Express, just like every other software from Microsoft, is having an a-bit-clumsy interface. At first it took me some time to even locate the toolbox and the items I need. The “button” items in the menu only show up when “window form application” is chosen as the document type. It is also a requirement to enable the drag-and-drop IDE. But this is not mentioned in any tutorial I have gone through. Before knowing that, I started up with a normal window application, leaving the window form application as a second step to test out. But I gave up exploring the normal window application quickly after 15 minutes I discovered no matter how hard I dig into the user preferences to find the buttons, the toolbox still remains empty!

I started feeling optimistic because I felt like conquering the most ridicules issue I would be facing, and the WYSIWYG editing interface is soooo easy to get along with. Programming a simple tic-tac-toe should not be that difficult. I still remember the day I was learning Netbeans IDE for Java. That was totally a flash through my mind. Programming the buttons is just like programming anywhere else but a lot simpler… Well that was Java. In window form, the language, even though still C++ as it said, does not look like the C++ we used since the beginning of this quarter. Not apparent COUT and CIN is observed, neither do “<<” and “>>”. The “->” symbol and everything else look just like alien language. C++ is much bigger than I thought.

Surviving form this kind of uncertainty did not take me that long. The main challenge is actually parsing values in between the classes and functions. The window form is a template or framework pre-written with classes and stitched together. It is the same as Objective-C and iOS programming I am recently investigating. But in this stranger language, even declaration and assigning a variable become nightmare. All kinds of scary errors showed up! Wrong place to place the declaration, wrong place to assign the value, wrong type to pass, wrong syntax, not allowed type… So discouraging!

After many tests, failure, tutorial has gone through, most problems are solved. I can now assign the text in a textbox with int data with a convertToString function (finally!). The variables need to be declared here (above image) in order to make them usable by the form, function and event handlers. This is quite common. However, an array cannot be declared here. It said “only static data members can be initialized inside a ref class or value type”. This means it is not supported. What?? This might be common sense to programmer, but it seems non-sense to me, and I had searched for half an hour on how to declare and array, which used to be like this: char myChar[10]; It allows me to declare it in the main of the form. But if I need to call it in a function, it is undeclared.

This is how it looks like at the stage I am about to implement the game logic with an array. Of course I can make a tic tac toe without using any array, but repetitive work is not my favor.

I started to think (because searching for solution seems like endless!). I need to make good use of tools in my hand to make a playable game with GUI. This should be the task, instead of trying to solve pointless issue I am facing in pure programming. I changed my game to Tamagochi — another flash in my mind.

As usual, I was quite ambitious at first. Here is the plan:

I intended to skip the fancy costume of the sprites and focus on the action and mechanism of Rockman X: to defeat a boss, get the weapon, and use the new weapon to tackle the weak point of the other boss.

I learned from the experience when I was working on Bomberman and Lemmings and borrowed logic from there. The character listen to the variable returned from the stage to detemine which side rockman is facing. And as this is a side scrolling game, the movement is handled also in the stage.

The blocks of the ground repeatedly mount themselves onto a globle stage coordinate. The keyboard input controls the coordinate. Rockman’s position is always fixed.

Charging and shooting are troublesome. If Scratch needs to change or manipulate several variables at once, there will be trouble and unknown bugs, making the logic dont work somehow.



The outcome is not looking bad even I skipped the animation of the character. But I did not make it to stage 2 and so on, because that may be too much for a demo.

Player can still move the cursor. But when he presses confirm, this will show up lol.

Enjoy!

This is how it looks like in a lemming. The left half handles the walk cycle and collision detection for walking and falling. Actually it works perfectly fine for one lemming. It can turn back when it hit a wall. But at the end after everything are done and the lemmings are duplicated, they cannot walk pass each other: they will just block each other. I know exactly what went wrong in the block. But I afraid if I attempt to change it the whole thing would not work as it should. Well… If they walk straight to the goal, it is just a minor FEATURE! lol

This is how a lemming digs. The magic happens within a tiny black sprite placed in front of the selected lemming. When it touch any wall, pen is down and draw with the background color. And as it is not touching the wall any more, pen is up. With this mechanism, an organic fake tunnel is created. I believe the original game works similarly. No wonder why the background color always remains the same! Oh. But for scratch, the pen always paint at the bottom layer in front of the stage layer. If the walls are not on the stage layer but as separate sprites, the pen has no way to cover them up. It took me more than one hour to figure out why the pen should be working but did not seem like so. This restrict heavily the freedom of me creating the stage.

The stair building works similarly, but the pen down is replaced by stamp utility.

For some reason sometime the countdown timer for the exploding lemming does not reset properly. Should be the clumsy execution of Scratch makes it happen.

But again this is another minor FEATURE.

I need to emphasize here. The graphic and sound really shape the environment and the feel of the game. But I personally do not favor this type of repetitive work in this programming class, and I think this is totally not the point for the assignment.