BSCS 514- Computer Graphics Course Supervisor : Dr. Humera Tariq Hands on Lab Sessions: Mr. Faraz Naqvi
Lab 01 Running your First App on Android to Handle Text and Images
Content Android studio setup Creating new project Desired output /Imaginiation Resources / Assets/ Models Project Main_Layout.xml(background) Main.java Framelayout (foreground objects) Touch Screen Event ( User Interaction) HitBomb() Score_card.xml Score_card.java Ball.java setxy() sety() Collision.java Rectangle vs Rectangle. Collision handling of ball with paddle. Scoring (In future you can handle it some other class)
Android Studio Setup Link to download: https://developer.android.com/studio/instal l.html Download android studio and the SDK.
First Screen
Select Options
Setup your location for SDK and Android Studio
Downloading Screen
Desired Output/Imagination-I
Desired Output/Imagination-II
Resources/Assets/Models Bounded Rectangle Paddle Orange Ball Pink Ball Bomb
Catch The Ball ALWAYS THINK FIRST BEFORE STARTING IMPLEMENTATION
Code Organization, Patterns
Example AI That May Works Behind
Logics that Work Behind For e.g. Rectangle vs. Rectangle collision
Catch The Ball TOWARDS ANDROID IMPLEMENTATION
Your First Sight At Xml TextView Linear Layout Relative Layout Table Layout Grid View Tab Layout List View
Your First Sight At Xml <TextView android:id="@+id/answer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text= Hello world! > <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=http://schemas.android.com/apk /res/android xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent android:layout_height="match_parent tools:context="com.faraz.cg.main android:orientation="vertical"> <TextView > </LinearLayout>
Setting Up Our Layout File Adding a textview in the tag of Linear Layout. <TextView android:id="@+id/scorelabel" android:layout_width="match_parent" android:layout_height="50dp" android:text="score : 300" android:textsize="18sp" android:padding="10dp" android:gravity="center_vertical" />
Adding a Frame Layout/ FG Setup Add a frame layout under the TextView above. <FrameLayout android:id="@+id/frame" android:layout_width="match_parent" android:layout_height="match_parent">?????????????????????????????????????? </FrameLayout>
Adding TextView <TextView android:id="@+id/startlabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="tap to Start" android:textsize="30sp" android:layout_gravity="center_horizontal" android:layout_margintop="130dp" /> <TextView android:id="@+id/answer" android:layout_width="wrap_content" android:layout_height="wrap_content" /> Add the above code of TextView and ImageView in Frame Layout
Adding ImageView <ImageView android:id="@+id/paddle" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/box" android:layout_gravity="center_vertical"/> <ImageView android:id="@+id/orange_balls" android:layout_width="20dp" android:layout_height="20dp" android:src="@drawable/orange"/> <ImageView android:id="@+id/black_bomb" android:layout_width="24dp" android:layout_height="25dp" android:adjustviewbounds="true" android:scaletype="fitxy" android:src="@drawable/black"/> <ImageView android:id="@+id/pink_balls" android:layout_width="16dp" android:layout_height="20dp" android:src="@drawable/pink"/>
Linking XML Layout to Main Class Lets connect all the element on the Main Layout with their respective variables for controlling their properties.
Declare all the variables main.java private TextView scorelabel; private TextView startlabel; private TextView answer; private ImageView paddle; private ImageView orange_balls; private ImageView pink_balls; private ImageView black_bomb; private int orange_ballsx; private int orange_ballsy; private int pink_ballsx; private int pink_ballsy; private int black_bombx; private int black_bomby; private int frameheight; private int screenwidth; private int screenheight; private boolean action_flag = false; private boolean start_flag = false; private Timer timer = new Timer(); private int paddlesize; private int paddley; XML ID Cast Into Our Declared Variables
Initialize all the variables
Set Images to their Initial Position Main.Java Ball.Java
Handling Touch Screen Event Flag Variable Main Game Loop Action Down/Action Up
Assignment Draw Simple but complete UML for the popular Game ball and paddle. Propose some AI to be implemented in this game. Try to add some code for: - animate ball and paddle - random bombs & blasting - Displaying Score Card.