Project 5 (Scratch Programming) – Week 2 (Day 1 & 2) – Creating the Game

<Late post> Once again, an error in my computer. I published the assignment, but there was an error and the draft was destroyed, so it didn’t publish.

In this post, I am first going to be covering the different programming concepts (hopefully most of them, but I can’t be too sure if I know all of them) that I used in my game (I won’t be using the table again. It’s too time consuming, and I don’t think I used everything in there). Then, I will be covering how I went about creating the game. I will also talk about the things I didn’t include in the game. *Note: I will be using the terms code and script interchangeably. They both are referring to the blocks set up for the program.

  1. Concepts used:
  • Sequences – There were several instances when I had to use sequences and pay attention to the order of things. For example, I had to use sequences for how sprites react:

A Sequence for the player’s sprite 

I had to make sure that these blocks were in the correct order. When I wanted the game to be over, I had to make sure that the positions of the player would be set before it changed costumes (the costume makes it look knocked out). Otherwise, it would look knocked out before the coordinates were set, and if the player had hit an obstacle in mid-air, well, it would look weird (especially since I set the player to be lying down horizontally in the costume).

  • Iteration – I used this a lot for the movement of the player. For example, I had to make the player look like he was walking, so I added different costumes (one where he was still, and another where his legs were outstretched).

Coding for Movement

I made it so that if the left arrow was pressed, it would wait 0.5 secs, and then switch between the two costumes. I used a forever so that if the left arrow key was pressed, the player would continuously “walk” and the animation wouldn’t stop.

  • Conditional Statements – I also used this for things like the movement of the player. I used an “if” when I wanted the player to move. For example, if the left key was pressed, the costumes would switch continuously so it would look animated (refer to previous screen shot in Iteration). If not, then the costumes would not switch (otherwise, the costumes would just continuously switch, even if the left key wasn’t pressed, and the player would look retarted)
  • Variables – I used this for the jumping, side-scrolling, and for calculating distance (the last one was a failed attempt).

Variables

For example, I created a variable called ScrollX to help facilitate the movement of the player. (Scroll X will be explained in a little more detail below). I, of course, set up codes to hide the variables once the game started, as I wasn’t using variables that needed to be shown (e.g. scores).

  • threads – I’m not sure how to classify this, but I did have a lot of scripts running simultaneously, so here’s an example:

Threads

For example, I used it for the movement of the character, to both make it move and to animate it.

  • synchronization – I used this to start the game, to end the game (Game over), etc. For example:

Broadcast and Receive


  • Event Handling – As I’ve mentioned before, I’m still not sure how this is different from user interface design, so please refer to either the screen shots of user interface design or threads for examples.
  • user interface design – I used this for the introduction of the game. I made a sprite that, when clicked, would say the introduction.

Coding and Sprite of Introduction

Now onto the creation of the game.

2. Creating the Game:

First off, I created loads of different sprites, and then changed their costumes (one of them was to be the player, and the rest, obstacles).

A couple of sprites (the player on the right)

Then, I set the background to something suitable for the game.

Background

There is a reason why I used a background. Normally, for the method I used for side-scrolling, you have to design the screen (stages) so that the area you move in is different. Unfortunately, I did not have enough time for to draw my own backgrounds, so I just chose this monotonous background.

Technical Aspects

  • Making the game a side-scroller – the first thing I tackled was trying to make the game a side-scroller. The first thing I found out was that the sprite didn’t actually move across the screen. The screen was the one moving. The sprite would just slide across. This site helped me out quite a lot for the first part (making the screen move like a side-scroller): http://wiki.scratch.mit.edu/wiki/Scrolling

Coding used (based on the site referenced)

First of all, I had to make a variable called Scroll X. The coding above was placed in the obstacles, and are all generally the same.  I can’t say that I entirely understand it, but I know enough to figure out that this sets the position of the sprites (obstacles), or at least, I think. Then, I had to make it so that the screen could be moved by the user. So I set this code for the player:

Changing Scroll X

This way, when the directional keys were pressed, scroll x would move accordingly, and the screen would slide in the wanted direction.

Basically, I had to set up another variable (named, GRAVITY). I don’t quite understand the code, but it works, so I didn’t really think about it to much. However, I did encounter a problem.. The code:

Code Example that I tried to emulate

had a block called “repeat until touching sprite 3.” I didn’t understand this (I only later realized that sprite 3 was supposed to be the ground), and so I had this error:

Jumping Error (the person falls off the screen)

To remedy this problem, I tried making a new sprite (just a simple horizontal line) placed near the ground, and then I added it into the “repeat until touching…” I also made it disappear when the green flag was clicked, so it wasn’t visible. This worked, but another problem occurred. Once I moved away from the line, the error would occur again. I would have to add in codes for the line so it would move along with me, and that got annoying and confusing, so I changed the code to this:

New Code

I made it so that once the player touched the color gray, it would stop falling (This was one of the reasons why I chose this particular background. The ground was very clear, and only one colour, so I could use the touching color block).

  • Setting up reactions to collisions

The next thing I did was to set the reactions of the different sprites when the player hit the obstacles. This was pretty easy, because I had done this in the previous game (fish game). The script looks like this:

Script for the collision (script was placed in the obstacles)

Basically, if the obstacle was touching the player, it would play a sound (I tried to use different sounds for obstacles to add variety to the game) and broadcast game over. Then, I placed this script on the player:

The code and what it looks like on screen

The costume, which was used to make the character look knocked out, involved a little drawing on my part (Excuse the pathetic stars).

Then, I made a new sprite, and then edited the costume (I just typed in the words “Game Over!”). I then set this code:

Game Over Sprite

  • Fixing up the positions of the obstacles – I realized that simply dragging the obstacle sprites did not actually place them in that position. I had to somehow change the code. After re-reading the site on Scrolling (link is above; the very first link provided) and tinkering around for a seriously long time (I really can’t provide a logical explanation for how I figured it out. Sometimes, with programming, you just need to sit down and experiment with it), I was able to figure out that I could change their positions by modifying a certain part of the code used for scrolling:

How to change the coordinates

First off, you have to understand how Scroll X works. I came to see Scroll X as some sort of a distance measure in the game. For example, when scroll X read 0, this could be seen as the starting point. When it read, say -200 (caused by moving to the right. As you move to the right, the number decreases. It’s reversed. The more to the right, the more negative), you could say you were 200 meters east from the starting point (the “distance” is not proportional to actual lengths). A reading of 200 (caused by moving to the left) would be 200 meters west  Changing that number (the encircled area in the screen shot above) allowed me to change how far into the game the obstacle would appear in. So for example, if I put in 1 into that area, (formula would become set x to scroll x + 480*1), it would appear near the start of the game, at say, a reading of somewhere between -100 to -500 (for scroll x). If I changed it to 2, it would appear further into the game (at say, a reading of around -600 to -1000 for scroll x). I added in different numbers to the different obstacles so that they would appear in different areas in the game. Of course, I had to set up a starting point:

Setting up the starting point

So I set up this code (I placed it in the player sprite, but I don’t think it really matters for this type of code, as wherever it is placed, as long as the green flag is pressed it will activate). Basically, once it the flag was clicked, scroll x would be set to 0 (which would be the starting point), so players start with scroll X reading 0 (meaning they are at 0cm from the start). I made sure that the game could actually be finished (albeit, there is one area, the rock, which is sort of hard). After I deemed that enough obstacles had been set up, I made a sprite that would represent the end of the game.

Finish Line (yes, drawn by me)

Then, I simply used the broadcasting system, so that once the player passed the sprite it would send a message for winning the game:

Congratulations (script was set in the finish line sprite)

  • fixing up the bugs – Overlapping Sprites (at the right and left of screen)

So I realized that there was a problem with the obstacles (yet again). When I hadn’t encountered them yet in the game, they would overlap at the screen, like this:

Overlapping Problem

To remedy this, I came up with my own solution (this may not be the easiest way, but it worked for me, and I understood it. Also, the example in other help sites didn’t work for me). First, I would take into account the (more or less) exact reading of scroll X RIGHT BEFORE the sprite was going to appear on the screen.

Fixing the bug

So, say the number was -215 (like the number in the example above). As the player moves, to the right, scroll x changes too. I made a code so that if scroll x was more than (you have to take into account that as you move to the right, it gets more negative, not the other way around) the number right before the sprite appeared (in this case, -215), it would be hidden. And if it wasn’t, (if the scroll x number was already smaller, or in other words -216 and below) it would appear.

The code

I thought this was a genius move on my part, until I realized that there was still a problem. Once I passed the obstacle, it would remain on screen again, this time at the left end.

Overlapping Problem (2)

Originally, I tried to counter this by placing a code exactly like the one above (if scroll x > …. hide…else…show etc.) except I changed the > sign to a < (so that once it passed, it would disappear). Suffice to say, it didn’t work. I realized that this code would contradict my previous code for making it not overlap at the right end of the screen, and it would show. Now, at this point, I was quite a bit rushed for time, and was getting a bit desperate, so I scrapped the code I was trying to make and, picking up an idea from another site I just made a new sprite:

Overlap Fix

I realize that this may seem really lazy, but I was running out of options at this point.

  • Introduction – Once I was done with the game, I decided to make an introduction so that it wouldn’t be too confusing. This was pretty simple. First, I used Photoshop to crop out a picture of a band member (my friend), and then I made a new sprite, edited the costume and imported the picture. I placed in on a black background so it wouldn’t look too bad. Then, I added in a code so that when clicked, it would give an intro.

Intro


Then, I made a new sprite (edited the costume and then typed in the words “click me to start”) so that it would be easier to understand. Then I added in  a few codes for it:

Click me to start codes

The end result is this:

Intro Final Image

  • Ending – After all of this, I decided to make the game more related to the band. I decided to make it so that if the player finished the game, he would be brought into a concert-like scene.

Ending (this code was placed in the stage)

Then, I made dialogue.

Dialogue

Then, I made it so that once they won, a song (the same song used for our music video), would play(I have to admit, a friend came up with this idea. I’m just using it because he allowed me to).

Script for the playing of the song

Improvements:
distance from home – I was working on this, but wasn’t able to complete it before I had to submit the project.Basically, it’s a measure of how much further it is until you reach the fiish line. 

Distance from home

I was not able to finish it. If I had more time, I would try to complete this.

Also, I realize that the game is actually just jumping and avoiding simple obstacles that come in your path. If I had more time, I would have designed moving objects, (e.g. I would make the bee move around). Also, I may add platforms and other things like that to spice up the game. (e.g. designing my own stage, like the robot game) and adding in other features like a countdown and a crouch feature. I would also have tried to fix the overlapping glitch on the left end of the screen. Also, there is one more glitch. If at the start, you jump without clicking the introduction sprite and waiting for it to disappear, you will be suspended in the air. I tried to remedy this by adding in bees, so the player would eventually have to jump down, but I was not able to fully fix the problem.
Overall, I think I did an okay job. My game may not be as fun as other people’s, but I think I was able to think more in terms of programming by designing this type of game (instead of just simply modifying and creating a different version of the fish game).

Advertisements

About jaoj2

Sha Tin College 10S
This entry was posted in Project 5 - Scratch Programming, Projects, What I Did Today. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s