Saturday, April 23, 2011

Scratch Soccer Game Part 1


    Welcome to our Scratch Soccer Game. Click the top right hand corner green flag to start. (Make sure computer sound is on, so you can hear the sound effects).

    Then use the keyboard arrow keys on your computer to move side to side and kick the ball. If you miss a ball and it goes through to the white line, then you lose, and the game ends.

    Use the top right hand corner red stop sign to stop the animation.
    Then Click the Green Flag in the top right corner to Play Again.

    This post contains the first of a series of tutorials that will result in our final full soccer game.

    In this first tutorial we build a kicking practice game, based on Scripts that we learned from a "Pong Game" by Darel Branson.

    We purchased the soccer player image online from Fotosearch, and then used Adobe Fireworks to remove the ball and resize him down into a GIF file.
    (We could have obtained a soccer player from Clker.com for free, but we really liked the Fotosearch player, and so we purchased him to use in our game).

    Scratch Sprites need to be around 50 pixels by 50 pixels in size.

    Any image can be resized and edited in Adobe Photoshop or Fireworks, unless it is already a good size, because it has come from a Sprite sheet.

    The Soccer Player has been resized to be a 45x39 pixels sprite.

    Soccer Kicker Boy Sprite

    If you do not wish to buy the Fotosearch Player, then use the following soccer player image sprite which we have made from a free image obtained from Clker.com.

    Soccer Kicker Boy Sprite

    The Soccer Ball was obtained for free from Clker.com, and has been reduced to 30x30 in size, but can be shrunk in size in Scratch by right clicking on it and doing "Resize Sprite", and then using the sizing arrows.

    Soccer Ball Sprite

    The following YouTube tutorial shows the steps required to build the Soccer Game shown at the start of this post.

    Note that by adjusting the bottom right hand controls, it can be viewed full screen in HD. (Press Escape to return to this blog page when finished).



    Here is the code for the "Kicker" that allows the arrow keys to be used to move him left and right along the bottom of the screen.

    Kicker Script Code

    Here is the Ball Script, which controls not only the ball, but also the collision of the ball with the Kicker.

    It also checks if the Kicker has missed the ball and the ball has gone over the white out of bounds line.

    Ball Script Code

    If you want to make the game more difficult, then simply increase the speed of the ball to a value higher than 9.

    We are hoping to further develop this Soccer Game in upcoming Tutorials.


    Our plans are to create a Goal Net to score Goals, and have "Goal" messages displayed. We also want to create negative points for missed kicks, and track these as well.

    Keep an eye out for these tutorials in upcoming posts.

    Make sure you give our tutorials a go, by downloading and installing the Scratch Development Environment for free on your PC from the following link:

    http://info.scratch.mit.edu/Scratch_1.4_Download

    You'll soon find you are kicking goals with Scratch in no time.

    Enjoy,
    Big Passy Wasabi