BSCS 514- Computer Graphics. Course Supervisor : Dr. Humera Tariq Hands on Lab Sessions: Mr. Faraz Naqvi

Size: px

Start display at page:

Download "BSCS 514- Computer Graphics. Course Supervisor : Dr. Humera Tariq Hands on Lab Sessions: Mr. Faraz Naqvi"

Verity Austin
5 years ago
Views:

1 BSCS 514- Computer Graphics Course Supervisor : Dr. Humera Tariq Hands on Lab Sessions: Mr. Faraz Naqvi

2 Lab 01 Running your First App on Android to Handle Text and Images

3 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)

4 Android Studio Setup Link to download: l.html Download android studio and the SDK.

5 First Screen

6 Select Options

7 Setup your location for SDK and Android Studio

8 Downloading Screen

9 Desired Output/Imagination-I

10 Desired Output/Imagination-II

11 Resources/Assets/Models Bounded Rectangle Paddle Orange Ball Pink Ball Bomb

12 Catch The Ball ALWAYS THINK FIRST BEFORE STARTING IMPLEMENTATION

13 Code Organization, Patterns

14 Example AI That May Works Behind

15 Logics that Work Behind For e.g. Rectangle vs. Rectangle collision

16 Catch The Ball TOWARDS ANDROID IMPLEMENTATION

17 Your First Sight At Xml TextView Linear Layout Relative Layout Table Layout Grid View Tab Layout List View

18 Your First Sight At Xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text= Hello world! > <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= /res/android xmlns:tools=" android:layout_width="match_parent android:layout_height="match_parent tools:context="com.faraz.cg.main android:orientation="vertical"> <TextView > </LinearLayout>

19 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" />

20 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>

21 Adding TextView <TextView 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:layout_width="wrap_content" android:layout_height="wrap_content" /> Add the above code of TextView and ImageView in Frame Layout

22 Adding ImageView <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_vertical"/> <ImageView android:layout_width="20dp" android:layout_height="20dp" <ImageView android:layout_width="24dp" android:layout_height="25dp" android:adjustviewbounds="true" android:scaletype="fitxy" <ImageView android:layout_width="16dp" android:layout_height="20dp"

23 Linking XML Layout to Main Class Lets connect all the element on the Main Layout with their respective variables for controlling their properties.

24 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

25 Initialize all the variables

26 Set Images to their Initial Position Main.Java Ball.Java

27 Handling Touch Screen Event Flag Variable Main Game Loop Action Down/Action Up

28 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.

Topics of Discussion

Topics of Discussion Reference CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile Computing Fragments, ActionBar and Menus Part 3 of 5 Android Programming Concepts, by Trish Cornez and Richard Cornez, pubslihed by Jones