Archive for the ‘sample game’ Category

Beginner programming example for kids with Android!

A little background:

My dad taught me some basic programming back in the 70’s when I was 8 or 9 years old.  And when I say basic, I mean really basic Basic — entirely text-based, using “goto” to go to different line numbers in the program for control logic, etc.  But it was the first I’d ever seen of being able to program a machine to respond to input.  So even making a simple text-based game like “Guess the animal” was amazing and fun!

Now my kids are 11 & 12 years old, and certainly capable of learning to program.  But the problem is that programming “Guess the animal” isn’t interesting at all when you’re used to games like Angry Birds and Plants vs. Zombies.  (It’s a little like how my dad tried to get me interested in building the circuitry of a radio — which was so cool when he was a kid! — but was too old-fashioned to be interesting to kids of my generation.)

So I’ve spent a lot of time trying to find some programming project that is simple enough for beginners, yet cool enough to keep my kids’ interest.  And I’ve found it: Android, with my simple example program “Sprite Fun”.

This example is not intended to illustrate any kind of “best practices” for Android programming.  It’s optimized to be simple enough that even someone who doesn’t know much (if anything) about programming can understand how it works (and modify it), while having the coolness factor of “Hey I made a real app that I can play on my phone!” — to help kids get excited about teaching themselves to program.

The person setting it up doesn’t really need to know anything about Android programming either except for some basic familiarity with Java and Eclipse.  The first step, naturally, is to download and install the Android SDK, and launch the Eclipse installation that is bundled with it (see here). Then go through the “new Android Application Project” wizard, selecting all of the defaults (and giving it your own package name — I called my project “SpriteFun” and used my domain org.outerblogness).

In the initial version of the SpriteFun game, all it does is allow you to create little androids and move them around by touching the screen.  If there’s no android in the spot you touch, it creates one, and if you select one with your finger, you can move it around by moving your finger around the screen.

All you have to do is add a segment to the default MainActivity class (to set the view), and then add two new classes “SpriteFunGameView” and “Sprite”.  Here’s what to add to MainActivity.java (replacing the default “onCreate” method):

    private SpriteFunGameView mSFGView;

 

    // the list of Sprites to display:

    // static to save them when the orientation changes:

private static List<Sprite> sprites = new LinkedList<Sprite>();

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        Log.v(“”, “in SpriteFun”);

        // Create a SpriteFunGameView instance and set it

        // as the ContentView for this Activity.

        mSFGView = new SpriteFunGameView(this, sprites);

        setContentView(mSFGView);

    }

And here’s the SpriteFunGameView.java class:

package org.outerblogness.spritefun;

 

import java.util.LinkedList;

import java.util.List;

 

import android.content.Context;

import android.graphics.Canvas;

import android.util.Log;

import android.view.MotionEvent;

import android.view.View;

 

public class SpriteFunGameView extends View {

 

Context context;

Sprite activeSprite;

 

List<Sprite> sprites = new LinkedList<Sprite>();

 

// canvas boundaries:

intcanvasWidth;

intcanvasHeight;

 

    public SpriteFunGameView(Context context, List<Sprite> sprites) {

        super(context);

        this.context = context;

        this.sprites = sprites;

   }

    

   @Override

   protected void onDraw(Canvas canvas) {

      super.onDraw(canvas);

      canvasWidth = getWidth();

      canvasHeight = getHeight();

      

  for (Sprite sprite : sprites) {

      sprite.draw(canvas);

  }

  }

   

   @Override

   public boolean onTouchEvent(MotionEvent event) {

  // tell android to repaint the canvas

  this.invalidate();

   

  // get the location of the touch:

  int xPos = (int)event.getX();

  int yPos = (int)event.getY();

   

  Log.v(“”, “x: “ + xPos);

  Log.v(“”, “y: “ + yPos);

   

  int action = event.getAction();

  if (action == MotionEvent.ACTION_DOWN) {

  Log.v(“”, “ACTION_DOWN”);

  activeSprite = null;

  for (Sprite sprite : sprites) {

  if(sprite.isInSprite(xPos, yPos)) {

  activeSprite = sprite;

  }

  }

  if(activeSprite == null) {

  activeSprite = new Sprite(context, xPos, yPos);

  sprites.add(activeSprite);

  }

  } else {

  Log.v(“”, “not ACTION_DOWN: “ + action);

  if(activeSprite != null) {

  activeSprite.setCenter(xPos, yPos);   

  }

  }

 

       returntrue;

}

   }

And here’s the Sprite.java class: 

package org.outerblogness.spritefun;

 

import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.drawable.Drawable;

import android.util.Log;

 

public class Sprite {

 

Drawable myImage;

 

// image bounding rectangle:

intimageX;

intimageY;

intimageWidth;

intimageHeight;

 

public Sprite(Context context, int x, int y) {

        Resources res = context.getResources();

        myImage = res.getDrawable(R.drawable.greeny);

        setCenter(x, y);

        //imageWidth = myImage.getIntrinsicWidth();

        //imageHeight = myImage.getIntrinsicHeight();

        imageWidth = 144;

        imageHeight = 144;

}

 

protected boolean isInSprite(int x, int y) {

if(x < imageX) return false;

if(x > imageX + imageWidth) return false;

if(y < imageY) return false;

if(y > imageY + imageHeight) return false;

return true;

}

 

protected void draw(Canvas canvas) {

        myImage.setBounds(imageX, imageY, imageX + imageWidth,    imageY + imageHeight);

myImage.draw(canvas);      

    }

 

protected void setTopLeftCorner(int x, int y) {

imageX = x;

imageY = y;

}

 

protected void setCenter(int x, int y) {

imageX = x – (imageWidth/2);

imageY = y – (imageHeight/2);

}

}

And in the “res” folder in the project hierarchy in the left sidebar, create a new folder called “drawable”, copy into it the icon from one of the other “drawable” folders, and rename the copied image “greeny.png”.  For this first game, you don’t even need to create your own image — just use the default icon as the game character image.

My kids were immediately excited about the game and about making modifications!  They came up with lots of ideas of new features to add.  For example, they wanted an eraser that could be used to erase the androids, and they googled around and found a bunch of additional android icons of different colors to use, and requested a row of buttons to select the color.

Touch-screen programming is great for people who are just learning, because it’s conceptually very easy to use the coordinates of the user’s finger. It’s so much easier than old-fashioned keyboard-based navigation where you need a whole framework to navigate around selectable widgets and decide which one is highlighted, etc.  It was very easy to add a button implementation the kids could understand just by drawing the button on the screen and checking whether the touch event is in the button!

Here you can download the complete project (with the buttons and eraser): SpriteFun.zip

Note that each Android project has an additional “appcompat” project that is added by default (and needed by the program) — which I did not include in my zip file linked above. So I don’t think you can simply import my example.  Just create your own with the “new Android Application Project” with the wizard, and copy-paste the contents of the three classes into Java classes you create with the menu, and copy-paste the images from the res/drawable folder into your own res/drawable folder.

The project was a big success!  My kids started making their own modifications and their own games. After playing with this for a bit, my older son even went back and spontaneously made a new program with Scratch (which my kids had played with for a bit, but had gotten bored of).  And he’s working on a new update to his own mini version of “Plants vs. Zombies” right now!

My game page is back on line!

My free sample game and code page is back on line here.  I had some problems with my earlier web host, so I found a new one.  This means that some of the links to sample jars and code on earlier blog entries may be broken, but all of the code should be available on the new game page (and, as before, you can open the game page in your mobile device’s browser and install the games and apps directly from there).  I’ve rebuilt many of these on the latest version of the WTK, and I’m working on testing them on some new devices.  If any of them aren’t working, feel free to leave a comment.  The “Frog-Parrot User Interface Library” — a set of simple utilities to create a customizable user-interface for a range of MIDP devices — is available as WidgetCanvas, with the source code here.

I’m sorry I haven’t kept up this blog very well lately.  (Wow, the last thing I posted about was Jazoon 2008, and the Jazoon folks are already gearing up for 2009!)  The thing is that I’ve switched gears enigineering-wise — I haven’t been working in Java ME for over a year, so I haven’t had much new stuff to add here.  I’ve mostly been working in software testing automation, but since I’ve been working mostly with proprietary software, I haven’t done much that I can post about.

But I’m planning some new projects this summer that I’ll be writing about! (Not necessarily all in Java ME…)

FPUIL: Frog-Parrot User Interface Library

I’ve finished my little library of UI utilities, which you can download here: FPUIL.tar.gz or FPUIL.zip.

Just unzip the directory, placing the WidgetCanvas folder in the apps folder of the WTK, and you can open it as a project.

This set of classes is intended to help with a “managing fragmentation” strategy of type “DERIVE-MULTI > SELECTIVE” (see Device Fragmentation of Mobile Applications for the theory).  As explained on TomSoft, this is a good strategy for one-shot projects, and it’s the strategy I’ll be discussing at Jazoon.

Here are some notes on using this little library: Continue reading

Racecar!

racecar_sagem.png

Racecar (a.k.a. Car-voiture) is an amusing little game where you try to see how many laps your little racecar can make around the track — changing lanes and speed — before you inevitably crash into another car or into one of the boulders I’ve conveniently placed on the track.

This game was my first attempt to use the MIDP 2 games API, but since it didn’t illustrate the lcdui.game package in a strong or interesting way, I ended up just back-porting it to MIDP 1 so I could run it on my Nokia 6100:

racecar_nokia.png

This game was basically scratch work, so I didn’t end up using it in my book.

I’ve just uploaded the whole thing (source code, resources, etc.) to my site, and you can download it here: racecar.tar.gz or racecar.zip. Just unzip it and place it so that the “Racecar” directory is in the “apps” directory of your WTK, and you can open it as a project. I can’t promise that it illustrates the best possible MIDP game programming techniques, but you might find some interesting strategies for programming a simple game . More likely it’ll serve as a fun exercise to see how many places you can find where the game could be improved. I’m not offering any prizes though… 😉

racecar_emulator.png