Part One : Start with Art

Welcome to Computing with Greenie.

In this series of tutorials I'll be guiding you through the creation of a videogame using the online website PlayMyCode.com  We'll see how a game is built from the ground up, have working examples, and I'll help you understand the workings of the website a little better, as well as learning the basics of programming, and how to create your own games.

Along the way, we'll be creating sprites, generating sound effects, and accepting player input, all to create the most wonderful game we can.

In order to simplify things, and so that you can see what we're aiming for, I've decided to remake one of PlayMyCode's more popular games, "Spike Dislike".

The game uses a very basic background scrolling method, simplistic sprites, and very easy to work user input.

The game also currently has no sounds at all, so we'll take the time to add some nice sounds of our own into the mix.

Today, we begin with the artwork.

I've decided to call our remake "Ball of Hair - Be Aware" because if we can't be imaginative enough to give our game a new title, we might as well quit now.

Creating games is all about imagination.  If you have no imagination, you have no place attempting to create new games.  Play the games you have, and be happy.

Head into PlayMyCode, and Click on the Build Tab.

Create a new project, give it a name and description.

Head into your new project.

Next, click on the Assets button, then New.

Once you're in the Art Studio, change the Canvas Size to a nice square 64x64 pixels, and set about drawing your ball of hair.

Simple!

Next use the same method to draw the player's sprite.  We'll use a nice round face for ours.

We also need sky and ground images that we can scroll in the background.  Head back into the art editor to create both of these, this time setting the Canvas Size to 640x64 pixels, so you get nice long strips, instead of small blocks.

Now we need to load these images into our project.

To load an image, we simply assign it a variable name, and PlayMyCode does the rest.

Variables

A Variable is a place where we store our data, whether it be complex things like images, or simple values like scores and co-ordinates and other such things.

There are two basic types of variables.

Global and Local.

Global variables can be used anywhere though your code, and will show the same data wherever you need it.

Local variables, on the other hand, remain where you use them, are freed once you've finished, and are mostly used for temporary values inside functions.  We'll get to those later!

As long as we make our image variable a Global Variable, we can reuse it anywhere inside our code.  We'll want to do this with all of our important image data, so to do this we simply place a $ sign before it's name.   Each time we want to reuse the Global version, we need to re-add the $ sign.  Keep this in mind later on, as we'll be switching between Global and Local variables, and we'll need to avoid confusing the two types. 

$Ball=new image("Ball") is all we need to load the previously created image, and somewhere inside the main loop you can simply use DrawImage($Ball,100,100) to draw it on the screen.

Hit Ctrl+S to Save the project so far, and then Ctrl+R to Run it.  Note : Get used to hitting Ctrl+S to save.  It's always important to save your progress.

Once you've got the hairball onscreen, you can set about adding loading and drawing for the face, sky and ground images, too.

That's enough for our first part.

In our next part, we'll be attempting to create the background for our game, by redrawing the sky and ground textures, and getting them scrolling nice and smoothly.

Join us again for more, and keep coding.

You can Play My Code @ PlayMyCode