Saturday, January 31, 2015

AndEngine Tutorial 0 - Basic Game Activity

With this AndEngine tutorial you'll learn how to set up a Basic Game Activity

AndEngine Tutorial 0 - Basic Game Activity


Hello game developers! We are starting today a new set of publications here in the Visivae Mobile blog to share the basics about game coding for Android with AndEngine. If you need help to install AndEngine check this post.

For this first tutorial (number zero, because it is the basic of the basics) we are going to show you how to set up a game activity.

Opening a new Project


First things first, click on File, New, Project...


Choose "Android Application Project" and click "Next". Give a name to your Application, Project and Package Name (you can use the names in the image here below). Usually, as the minimum required SDK, I use 3.0, because earlier Android devices might be too slow for running a fancy game! Click "Next".


Unmark the box "Create custom launcher icon". Let's not worry about that now, we can create icons later! Keep clicking "Next" until finishing this process.


Great! You should have now two files opened in Eclipse, the "MainActivity.java" and the "activity_main.xml". Close the second one and let's concentrate on the java file only for now.

Now we need to add the AndEngine library to our project. Right-click on your project name and go to Properties. In the new window choose "Android" from the left menu, scroll down the right part and choose "Add...". Now add the AndEngine library and press OK to close the window.



Nice! Now we can start to play with the real stuff! Erase everything inside your public class MainActivity and extend it to BaseGameActivity. Now MainActivity might be showing you an error, then drag the pointer over it and choose "Add Unimplemented Methods" to fix it.


Now you should have the following code in your MainActivity class:
public class MainActivity extends BaseGameActivity {

 @Override
 public EngineOptions onCreateEngineOptions() {
  // TODO Auto-generated method stub
  return null;
 }

 @Override
 public void onCreateResources(
   OnCreateResourcesCallback pOnCreateResourcesCallback)
   throws IOException {
  // TODO Auto-generated method stub
  
 }

 @Override
 public void onCreateScene(OnCreateSceneCallback pOnCreateSceneCallback)
   throws IOException {
  // TODO Auto-generated method stub
  
 }

 @Override
 public void onPopulateScene(Scene pScene,
   OnPopulateSceneCallback pOnPopulateSceneCallback)
   throws IOException {
  // TODO Auto-generated method stub
  
 }
 
}


Now set up your camera parameters just before overriding the EngineOptions:
 private Camera camera;
 private static int CAMERA_WIDTH = 768;
 private static int CAMERA_HEIGHT = 1280;


Good, now let's set our Engine Options. Let's declare the camera, its position and size, define if you want your camera to be fullscreen, portrait or landscape, and select the ratio resolution. Finally, I'm using the setWakeLockFunction to prevent the device from sleeping while the player is playing.

Your EngineOptions class should look like this:
 @Override
 public EngineOptions onCreateEngineOptions() {
  camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
     EngineOptions engineOptions = new EngineOptions(true, ScreenOrientation.PORTRAIT_FIXED, new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), camera);
     engineOptions.setWakeLockOptions(WakeLockOptions.SCREEN_ON);
     return engineOptions;
 }



So far, so good! We don't need to create any resources now, let's just define the callback for this method, making it look like this:
 @Override
 public void onCreateResources(
   OnCreateResourcesCallback pOnCreateResourcesCallback)
   throws IOException {
  
  pOnCreateResourcesCallback.onCreateResourcesFinished();  
 }


What about adding some color just to see how it will look in your device? :) Let's set up a scene and add a background color. First, declare your scene in the same place you've declared your camera parameters, like this:
 private Scene myScene;


Now set up your onCreateScene class to look like this:
 @Override
 public void onCreateScene(OnCreateSceneCallback pOnCreateSceneCallback) throws IOException {
  
  myScene = new Scene();
  myScene.setBackground(new Background(1.0f, 0.0f, 0.0f));
  pOnCreateSceneCallback.onCreateSceneFinished(myScene);
  
 }


Notice that for the Background function there are 3 parameters. They are exactly the RGB colors. The range of the colors goes from 0 to 255 and you should use the range from 0.0f to 1.0f proportionally to define your color. To set your red in 25, for example, use the parameter 0.1f.

An important tip: you need to change the base theme of your app, otherwise you might see white borders in the screen, which don't look nice at all! To do this, in your Project Explorer, to the left side, look for the folder "res". You will see more than one subfolder called "values" or values-vXX", where XX is a number. Open all the styles.xml inside these folders and change the AppBaseTheme "parent" parameter to "android.Theme.Black", so they will look like this:
    <style name="AppBaseTheme" parent="android:Theme.Black">
        
    </style>



Amazing! Leave the onPopulateScene as it is, we don't need it now. If you run your new application now (either in the emulator or in your own device) you should be able to see something like this:

AndEngine Tutorial 0 - Base Game Activity


Great! Now you know how to set up the basic game activity. We are going to use this structure in our following basic tutorials!

Here is the full code if you think you missed something on the way:
package com.example.tutorial;

import java.io.IOException;

import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import org.andengine.engine.options.WakeLockOptions;
import org.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.ui.activity.BaseGameActivity;

public class MainActivity extends BaseGameActivity {
 
 private Camera camera;
 private static int CAMERA_WIDTH = 768;
 private static int CAMERA_HEIGHT = 1280;
 
 private Scene myScene;

 @Override
 public EngineOptions onCreateEngineOptions() {
  camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
     EngineOptions engineOptions = new EngineOptions(true, ScreenOrientation.PORTRAIT_FIXED, new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), camera);
     engineOptions.setWakeLockOptions(WakeLockOptions.SCREEN_ON);
     return engineOptions;
 }

 @Override
 public void onCreateResources(
   OnCreateResourcesCallback pOnCreateResourcesCallback)
   throws IOException {
  
  pOnCreateResourcesCallback.onCreateResourcesFinished();  
 }

 @Override
 public void onCreateScene(OnCreateSceneCallback pOnCreateSceneCallback) throws IOException {
  
  myScene = new Scene();
  myScene.setBackground(new Background(1.0f, 0.0f, 0.0f));
  pOnCreateSceneCallback.onCreateSceneFinished(myScene);
  
 }

 @Override
 public void onPopulateScene(Scene pScene,
   OnPopulateSceneCallback pOnPopulateSceneCallback)
   throws IOException {
  // TODO Auto-generated method stub
  
 }
 
}



Happy coding and see you soon!

Wednesday, January 28, 2015

Android Game Review: Stones

Catch stones by sliding your finger and avoid the meteors in Stones, a game for Android by Imago.


We've tried Stones, an addictive arcade game for Android.



As a good arcade game the idea simple and the game is fast. The game has simple mechanics and things get difficult (and crazy!) as you advance through the levels.

The gameplay is intuitive: you slide your finger to the right and to the left to rotate the stone circle in the center, and move the gap to let stones come in.


The small bar at the top of the screen fills in as you collect stones, so you can have an idea of how many you still need to complete the level. But hurry, because time runs fast!

As you advance, the games gets really hectic with new kinds of stones and some features, like the inversion of your movement (you slide the finger to one side and the gap moves to the other side!).


Beware with those meteors! If you let them pass through the gap they'll blow your stones out of the circle!

Some suggestions for improvement could be to make the first two levels easier, so you could reward early first-time players, and also the movement of the gap could be based on where you point your finger rather than in sliding right or left.

Indeed, it's great to see indie developers creating such nice pieces!

Enough of talking, let's show our playthrough video of Stones:


Have fun!