Processing Blog

[annprocessing-blog]

Next is adding proper graphics to game, so I made a ship about the same size as the triangles:

At the top of the code:

PImage: enemy; PImage bg; PImage meteor; PImage ship;

And then in void setup the images:

bg=loadImage("spacebg.png"); meteor=loadImage("meteor.png"); energy=loadImage("powerups.png"); ship=loadImage("ship.png");

enemy=loadImage("enemy.png");  

 and then how where the enemy will appear:

enemyy=random(800); (start point) enemyy=0-random(0); enemyxinc=random(6)-random(3); alive=1;

Then load it up in the draw function:

background(255); fill(0); image(bg,0,0);

This talks about the ships size and placement on the screen.

Image(ship,shipx-20,shipy+5,60,30);

That this how it will look in the end

The type of font used in the game:

   livesfont=loadFont("ArialMT-20.vlw");

  gameover=loadFont("ArialMT-20.vlw");

  scorefont=loadFont("ArialMT-20.vlw");

   Bringing an lop amount of powerups:

 for(int lop=0;lop<powerups;lop=lop+1){

 powerupx[lop]=random(800);

 powerupy[lop]=random(300);

 powerupyinc[lop]=1+random(8);

[annprocessing-blog]

Now we have to add 'lives' to our spaceship. So at the beginning of the code, we start an 'int' array, which linked to the score collision, and fuel gauge :

int lives=3;  Float fuel=500;

In the setup you have to load the particular font you want in my game I used Arial:

scorefont=loadFont("ArialMT-20.vlw"); 

This will appear in white, at the top right-hand side of the screen, with this line of code:

fill(255); textFont(scorefront); text("Lives:"+lives, 720, 20);

Next is adding a fuel gauge,  :

fill (255,0,0); rect(750,590,20,-fuel);

fuel=fuel-5;

so that the canvas looks like this:

The collision part is more tricky, we start with an if statement in the draw function:

//collision detection //x axis if(xpos>(shipx-15) && xpos<(shipsx+15)){ //in range on the x axis

If(ypos>(shipy) && ypos<(shipy+15)){ //in range on the y axis //because we are in on x and y so this must be a hit!

lives=lives-1;//subtracting a life //reposition the meteor so we don't getting killed. xpos=random(800); ypos=0-random(600); mspeed=1+randome(8)

}

Also have a section that whenever the fuel gauge runs out a life would be also lost:

If(fuel<=0){ fuel--500; lives=lives-1;

[annprocessing-blog]

Next is adding the space ship. At the top of the line of code as a new float array for the ships :

float shipx; float shipy; float shipxinc;

And in the setup function write this code for the location:

shipxinc=0; shipx=400; shipy=550;

Now for the actual drawing of the ship, this will be a simple triangle for now in the draw function:

fill(0,255,0); // this is for the colour green triangle(shipx,shipy,shipx-15,shipy+15, shipx+15,shipy+15);

Now it looks something like this.

 But the 'ship' can't move, yet, one thing to do is attach the triangle to the mouse in the setup function:

 shipx=mouseX;

But this is cumbersome and not efficient enough for the game, so instead the 'z' and 'x' key will be used for the left and right movement. 

 shipx=shipx+shipxinc; if(key=='z') shipxinc=-5; if(key=='x') shipxinc=5;

if(keyPressed==false) shipxinc=0;//this part of the code assures that after when the keys are not pressed anymore the 'ship' will stop moving.

shipx=shipx+shipxinc; if(shipx<20) shipx=20; if(shipx>780) shipx=780;

[annprocessing-blog]

New game- Meteors!

New assignment, this time a simple Meteor game Processor!

Start by building a simple canvas 800x600 pxl, with a black background:

void setup (){

seize (800,600);

void draw(){

background (0);

}

It will look like this:

Next is to build the falling meteors.

So at the top of the code, before 'void setup'  a new array which refers to the value of the meteors:

int mnum=20;

and a float array for the meteor speed:

float mspeed;

In 'void setup' the location were the meteors will appear and their speed:

xpos=random(800); ypos=0-random(600); mspeed=1+ranomd(8);

and then in the draw function the actual size and colour of the meteors, that will appear at random speeds:

 fill(255) //drawn in white

ellipse(sxpos,ypos,10,10);

ypos=ypos+mspeed; if(ypos>600){ xpos=random(800); ypos=0-random(600); mspeed=1+random(8);

The screen will now looks something like this:

Lastly add another line of code so that the 'meteors' reappear at the top of the screen again in a random sequence:

If(ypos[nam]>600){

ypos [nam]= 0-random(350);

[annprocessing-blog]

This line of code is for offsets for collision detection

float charoffsetxleft=50;

float charoffsetxright=20;

float charfeetyoff;

  Is the character in range on the x axis of the platform?

    if(ypos+charfeetyoff<platyar[plat]+platheightar[plat] && ypos+charfeetyoff>platyar[plat]){

      s the character in range on the y axis of the platform?

      isinrange=1;

      if(yinc>0){ //are we currently moving down? i.e upthrust has a + value

        //do stuff here as we landed on a platform

        isjumping=0; //turn off any vertical movement

              }

          }

  }

  } //end of platform loop

[annprocessing-blog]

The next step is to make the character move around the screen by pressing certain keys, going left and right. And with the screen edges wrapped it will mean that the character will appear back from the opposite side of the screen.

Input data to make him move;

float xpos;   // characters position on screen                   

float ypos;

   Characters animation cycle will loop, if moving.

  if(animpos==4) animpos=0; //

   This part of the code tell the character move its position based on left/right  

 if(dir==2){  -this right hand movement

  xpos=xpos+16; //add 16 pixels to character x position

 if(xpos>800) xpos=-50;  -this line helps deal with right hand boundary, and making further movement.

    if(key=='p') dir=2;  //right

    if(key=='o') dir=1;  //left

    if(key==' ' && isjumping==0){ //if press space and aren't jumping

      isjumping=1; //note that you are jumping now

      yinc=-15;  //set upthrust to -15

This line of code is to do with actual jumping part

  if(keyPressed ==true){

       if (key=='p') dir=2; //Right

   if (key=='o') dir=1; //left, direction (dir) his walking

   if (key== ' ' && isjumping==0) { // && - means 'and'

     isjumping=1;

     yinc=-15; //uptrust pressed space.

   }

  }

    This line of code restricts the animation of how high it will jump

  if(keyPressed==false)dir=0;

    if (isjumping==1){ // if we jump

   ypos=ypos+yinc;// add up trust to current y position

  yinc=yinc+1; // -15 -14,-13,-13......0,1,3 ect

 //if (yinc>15) isjumping=0;

  }

This part of code stops the character from falling of the screen after it jumps:

 }

 if(ypos>420){ //are we falling out of the bottom of the screen?

   ypos=420; //if so set out y position to 420

   isjumping=0; //stop jumping/falling

 }

[annprocessing-blog]

For the character to have something to jump up on a set of arrays have to be written to record the mouse moments and therefore build the platforms.

(loading background image)

br=loadImage("br.png");

    int drawplatcount=0;

  These are the arrays to store platforms

float[] platxar=new float[40]; //xcoord

float[] platyar=new float[40]; //ycoord

float[] platwidthar=new float[40];  //width

float[] platheightar=new float[40];  //height

  This part of the code positions platforms onto the screen

float platx=200;

float platy=500;

  This part of the code decides the width and height of platform

float platwidth=90;

float platheight=20;

[annprocessing-blog]

Then the character image is loaded, in an array, like a storage facility that would help to loop the image as a constant, this is done in void setup:

PImage []walkr=new PImage [4]; //image array (filing cabinet)

PImage []walkl=new PImage [4];

PImage fr; //front faceing image

Other way of loading images;

  walkr[0]=loadImage("walkr/im1.png");

  walkr[1]=loadImage("walkr/im2.png");

  walkr[2]=loadImage("walkr/im3.png");  // load in all the images we need right hand animation

  walkr[3]=loadImage("walkr/im4.png");

  fr=loadImage ("front.png");

Once the character is positioned on the screen with this code:

float xpos;

float ypos;

[annprocessing-blog]

This is the start of my me using Processor to make a simple game. I started by creating the character, a simple walk-cycle that was animated for the game.

      These are for the left movements, and for the 'right' movements are done by flipping the images horizontally.

  Then comes building the stage/ canvas in the void setup:

Void setup(){

    size (800,600);

  void draw(){

    background (255);

}