Chapter 41: Fill in the blanks #2 - The How-To page

Since the controlling of the ship in JustRoids might seem a bit "cryptic" to anyone not following this tutorial, I think I must explain the concepts of right and left "sweeps", clockwise/counter-clockwise rotation and "thrusts" as thoroughly as possible to avoid disastrous ratings on the Android Market.

Maybe I over-did this part a bit, but I decided to create four different images to illustrate the three sweep-actions and the tap plus four more images to show how the ship responds on the inputs.

I used "Sketch & Paint!" (http://www.onemotion.com/flash/sketch-paint/) for the "free-hand" arrows and the tap-symbol and Inkscape for the images illustrating the ship's reactions:

sweep_right.png:

sweep_left.png:

sweep_up.png:

tap.png:

rotate_clockwise.png:

rotate_counter_clockwise.png:

thrust_right.png:

and fire.png:

All eight images goes into the "res/drawable" folder, so we can refer to them in our updated howto.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dip"
            android:gravity="center_horizontal"
            android:text="-= How-To =-"
            android:textSize="40dip" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="3dip"
            android:layout_marginLeft="30dip"
            android:text="The Plot"
            android:textSize="25dip" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dip"
            android:layout_marginRight="30dip"
            android:text="
In this retro style space-shoot&apos;em-up game you control a
V-winged long-range scouting ship on a mission a long, long
way from home.\n
\n
An interplanetary highway has been planned right through the
sector your are in, but unfortunately an asteroid belt has been
detected right in the wrong place - jeopardizing the whole
project...\n
\n
Luckily your ship is equipped with tactical nukes, so can save
the situation by taking the asteroids out, one by one.\n
\n
You have an endless supply of nuclear missiles but in order to
get room for that supply, the shield generators had to be
removed. Hence your ship is completely unprotected and will be
destroyed if it comes too close to an asteroid.\n
\n
" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="3dip"
            android:layout_marginLeft="30dip"
            android:text="Controls"
            android:textSize="25dip" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dip"
            android:layout_marginRight="30dip"
            android:text="
As your ship is a V-wing Mk I (without the Momentum Eliminator
that made Mk II so popular) it&apos;s a bit tricky to control.\n
\n
There are no brakes (or retro rockets) so if you accelerate,
the ship will continue in the same direction until you turn it
around 180 degrees and accelerate in the opposite direction.\n
\n
There are four different actions you can perform in order to
control your:\n
\n
" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="3dip"
            android:layout_marginLeft="30dip"
            android:text="Right Sweep"
            android:textSize="18dip" />

        <ImageView
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Right Sweep"
            android:padding="3dip"
            android:src="@drawable/sweep_right" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dip"
            android:layout_marginRight="30dip"
            android:text="
\n
If you swipe your finger from the left to the right of your
screen, the ship will rotate clockwise:\n
" />

        <ImageView
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Rotate Clockwise"
            android:padding="3dip"
            android:src="@drawable/rotate_clockwise" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="3dip"
            android:layout_marginLeft="30dip"
            android:layout_marginTop="20dip"
            android:text="Left Sweep"
            android:textSize="18dip" />

        <ImageView
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Left Sweep"
            android:padding="3dip"
            android:src="@drawable/sweep_left" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dip"
            android:layout_marginRight="30dip"
            android:text="
\n
If you swipe your finger from the right to the left of your
screen, the ship will rotate counter-clockwise:\n
" />

        <ImageView
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Rotate Counter-Clockwise"
            android:padding="3dip"
            android:src="@drawable/rotate_counter_clockwise" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="3dip"
            android:layout_marginLeft="30dip"
            android:layout_marginTop="20dip"
            android:text="Up Sweep"
            android:textSize="18dip" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="100dip"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Up Sweep"
            android:padding="3dip"
            android:src="@drawable/sweep_up" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dip"
            android:layout_marginRight="30dip"
            android:text="
\n
If you swipe your finger upwards on your screen, the ship
will accelerate in the direction it&apos;s nose is pointing
for the moment:\n
" />

        <ImageView
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Thrust"
            android:padding="3dip"
            android:src="@drawable/thrust_right" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="3dip"
            android:layout_marginLeft="30dip"
            android:layout_marginTop="20dip"
            android:text="Tap"
            android:textSize="18dip" />

        <ImageView
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Tap"
            android:padding="3dip"
            android:src="@drawable/tap" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dip"
            android:layout_marginRight="30dip"
            android:text="
\n
If you tap anywhere on the screen, the ship will fire
a missile:\n
" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="100dip"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="Fire"
            android:padding="3dip"
            android:src="@drawable/fire" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dip"
            android:layout_marginRight="30dip"
            android:text="
\n
That's all info you'll get for now.\n
\n
Good luck, Commander!
" />
    </LinearLayout>

</ScrollView>

The xml above will give you a fair amount of warnings from Eclipse, as neither "android:text" nor "android:contentDescription" should be given direct text values, but rather references to text resources (as we did with the Main Menu earlier). But this will do for now.

Anyway, the result became as I wanted it to:

That should be the last piece in our game, and in next chapter we will put the ads back in.