Getting Started With Mobile Programming For Beginners (Season 2)

Prepared & Presented By : Engr. Sajid Ali Anjum

(Nokia Developer Champion)

Website : http://sajisoft.com Contact : support@sajisoft.com

Review Of First Season Held in June, 2011

• Day 1 : Basics Concepts for Getting Started With Mobile Phone Development; Introduction to Qt.

• Day 2 : JavaME

• Day 3 : Flash Lite

• Day 4 : Google Maps, Motion Sensor, Augmented Reality and latest technologies ; How to generate revenue from your apps/games

Review Of 72 Hours Of Innovation

• Project Stood First : Location Based Tracking System

• Technology : Qt & Java

• Members (09CS) : Muhammad Zeeshan Nawaz, Gulraiz Javaid, Naveed Afzal and Muhammad Shahid

• Project Stood Second : Matrix Solver

• Technology : JavaME

• Members (10ES ) : Ihsan ullah, Ehsan Ul Haq, Saad Cheema, Furqan Hassan, Aamir Shahzad and Shamweel Qamar

Review Of 72 Hours Of Innovation

• Project : Open-Source Framework For Interfacing PC and Mobile via Bluetooth

• Technology : Python & M-Shell

• Members(08CS) : Awais Rafique and Jafri Gardezi

• Project : 2D Car Racing Game

• Technology : Adobe Flash

• Members (10ES) : Muhammad Majid Khan, Ahmad Suleman, Ahsan Javed, Ubaid-ur-Rehman, Amara Javed and Anum Mazhar

Review Of 72 Hours Of Innovation

• Project : Battery Alarm

• Technology : Qt

• Developed By : 1st year of Computer Science (BSCS)

• Members : Abdul Salam Ai, Abdul Salam, Sadam Ali and Abdul Latif Ali

• Article @ Official Nokia Blog :

• http://goo.gl/Bohgc

Contents

• Day # 1 : Motivation, Basics Of 2D Game Development, Qt Quick Basics, Developing hello world of 2D Gaming, Physics Engines & Hardware Acceleration.

• Day# 2 : Basics Of Cross-Platform Development, Understanding MoSync and Porting our game to MoSync, TouchDevelop by Microsoft Research , understanding LBS & Sharing Ideas.

Who is presenting ?

• Sajid Ali Anjum, 07-11 batch, B.Sc. Computer Systems Engineering, UCET, The Islamia University Of Bahawalpur

• Major Contributions :

1) Solved 1000+ software problems at Nokia Developer Discussion Board

2) Wrote number of articles at Nokia Developer wiki & at my blog.

3) Develop 15+ software projects for mobile phones using C++, Java, Qt, Adobe Flash, Python, M-Shell, MoSync, Haxe, HTML5, PHP and MySQL.

Who is presenting ?

• Major Achievements :

1) Nokia Developer Champion for three times in a row (Feb 2010-12).

2) Qt Ambassador, in Jan 2012.

3) Nokia Developer Poster Of The Month in Feb 2010.

4) Dzone Developer MVB (Most Valuable Blogger) in Sep 2010.

5) Nokia Developer Launchpad in Oct 2010.

6) Winner of TOP 250 Paid Games in Calling All Innovators 2011.

7) Finalist of PTA-Ericsson Mobile Excellence Award on Oct 2011

8) Publisher at Nokia Store under name “SajiSoft”, April 2010.

9) Offered pre-release testing by different top companies.

10) Worked with different companies on different projects.

The Falcons Of Iqbal

Dr. Allama Muhammad Iqbal

Video Games

• Video game is an electronic game that involves human interaction with a user interface to generate visual feedback on a video device.

Gaming Facts

• PEW Research , 97% of teens play video games.

• Flurry Report : U.S. Mobile Game Revenue Passed Portable Games In 2011

• ABI Research, mobile gaming revenue is expected to reach from almost $4 billion in 2011 to $16 Billion in 2016.

Few Success Stories

• Angry Birds

• Fruit Ninja

• Doodle Jump

• Sniper Action …….

Angry Birds by Rovio Mobile

• Angry Birds Game, was released in December 2009 at Apple Store, Earns Over a Million a Month.

• Up to Dec 2010, it got 50 million downloads and upto March 2012, it got 700 million downloads.

Fruit Ninja by Halfbrick Studios

• Fruit Ninja, was released in April 2010, Sold 200,000 copies over a month.

• By March 2011, total downloads across all platforms exceeded 20 million.

Doodle Jump by Lima Sky

• Doodle Jump, was released in April 2009, Sold 200,000 copies over a month.

• Doodle Jump, sold 15 million copies in 3 years.

Games as an educational & training tool

• Video games let people step into other shoes, make decisions, explore consequences, said Alan Gershenfeld of E-Line Media – all skills we need for the 21st century.

• In games, the player has agency, which is very, very powerful. Games are participatory. You’re interacting, which is very, very powerful. Games are adaptive. They’re personalized. You can go at your own pace, advance at your own pace.

• Article : goo.gl/vMOEG

Development Cycle

Create

Design

Code

Build

Test

Deploy

Create

• Decide what sort of problem you want to solve ?

• Idea ?

• You can always get inspiration by looking around in your community and/or in different online communities ( like ideasproject.com , for gaming; flash games sites etc )

Design

• We have to create the mock-ups, graphics and other design-related activities in this stage.

• We have to use any image manipulation/processing software like GIMP, Adobe Photoshop, Adobe Illustrator, Inkscape etc. that serves our purpose to create required graphics.

http://www.developer.nokia.com/Design/

Code

• Write down the code to make the game digitally alive.

Build

• In this step, we have to compile the code and build executable , that are further executed, to test our code.

• This step is mostly provided by the development tool and developer’s usually need a single click to move from this stage to the next one i.e. “Test”.

Qt Build Toolbar

Test

• In this step, we test our executable in an emulator or simulator as provided by the SDK & also in the real device.

Qt Simulator Control

Deploy

• Once your coding and testing is complete, you are ready to deploy your application and distribute it to millions of the users by registering and publishing at respective mobo stores; to start earning revenue.

What is Qt?

• The Qt SDK combines the Qt framework with tools designed to streamline the creation of applications for smartphones as well as for desktop OS.

• Qt framework - intuitive APIs for C++ and CSS/JavaScript-like programming with Qt Quick for rapid UI creation.

• Qt Creator IDE - powerful cross-platform integrated development environment, including UI designer tools and on-device debugging

• Tools and toolchains - All you need: simulator, local and remote compilers, internationalization support, device toolchains and more.

Qt SDK

Qt SDK

QML

• QML (Qt Meta Language or Qt Modeling Language) is a JavaScript-based, declarative language for designing user interface–centric applications. It is part of Qt Quick, the UI creation kit developed by Nokia within the Qt framework.

• QML is mainly used for mobile applications where touch input, fluid animations (60 FPS) and user experience are crucial.

• QML elements shipped with Qt are a sophisticated set of building blocks, graphical (e.g., rectangle, image) and behavioral (e.g., state, transition, animation).

Imperative vs. Non-Imperative

• Imperative languages focus on how the program should follow it's tasks, while non-imperative languages, functional or logical, tell the program what it needs to do, as opposed on how to do it.

• Procedural programming is imperative programming in which the program is built from one or more procedures.

• Declarative programming is a non-imperative style programming, which expresses what the program should accomplish without prescribing how to do it in terms of sequences of actions to be taken.

QML Basics

• Lets learns basics of QML :

• Basic syntax

• The id property

• Property bindings

• States

• Animation

Hello World Of 2D Gaming

• Lets practically develop our first game and learn basics of 2D Gaming.

• A classic game of Pong , implemented in QML. Download source code from here : http://sajisoft.com/workshops/mobopong.zip

Simple Rectangle-Rectangle Collision

• Simple Rectangle to Rectangle collision is as follow :

Sprite

x,y

x, y+height

x+width,y

x+width, y+height X,Y (0,0) X increasing

Y Increasing

Simple Rectangle-Rectangle Collision

• Simple Rectangle to Rectangle collision is as follow : • bool sprite_collided(int x1,int y1, int w1,int h1, int x2,int y2,int w2,int h2) {

int left1, left2; int right1, right2; int top1, top2; int bottom1, bottom2; left1 = x1; left2 = x2; right1 = x1 + w1; right2 = x2 + w2; top1 = y1; top2 = y2; bottom1 = y1 + h1; bottom2 = y2 + h2; if (bottom1 < top2) return false; if (top1 > bottom2) return false; if (right1 < left2) return false; if (left1 > right2) return false; return true; }

Circle-Circle Collision

• Simple Rectangle to Rectangle collision is as follow :

X,Y (0,0) X increasing

Y Increasing

Sprite

Sprite A

Sprite B

One can detect this collision by : (x2-x1)^2 + (y1-y2)^2 <= (r1+r2)^2

i.e. the distance between the center points is less than the sum of the radii.

Other Collisions

• There are many other type of collisions like rectangle-circle collision, rotated rectangle-rectangle collision etc.

• This workshop target beginners, thus , I am leaving these topics for the students to explore.

Physics Engines

• A physics engine is computer software and/or libraries that provides an approximate simulation of certain physical systems, such as rigid body dynamics(including collision detection), soft body dynamics, and fluid dynamics, of use in the domains of computer graphics, video games and films.

Box2D

• Box2D is a free open source 2D physics simulator engine written in C++.

• It is ported to QML, JS, C#, AS3 and many other languages.

• It is one of a very famous engine for 2D games and also used in many of the commercial games including one of a big success ‘Angry Birds’

Getting Started With Box2D (QML)

• Go to https://gitorious.org/qml-box2d and download the source code.

• Extract the downloaded zip file and read the “README” file inside it to understand that how to compile the code and install the libraries.

• Once you compile the code, you are ready to create your first game using Box2D.

• Let’s do a hello world using Box2D practically.

Graphics Hardware Acceleration

• Modern Smartphones use Graphics Processing Unit (GPU) for efficient manipulation of computer graphics.

• To take advantage of GPU , we have to use the APIs that provide support of hardware acceleration like OpenGL ES, OpenVG etc

• If Hardware Acceleration is not used in heavy graphics game then there is a decrease in performance of the game.

Where to go from here ?

• Qt Study Material :

• C++ GUI Programming with Qt 4, Second Edition (Book)

• 103 Qt Video Tutorials : http://www.youtube.com/playlist?list=PL2D1942A4688E9D63&feature=plcp

• Articles and Code Snippets : http://www.developer.nokia.com/Community/Wiki/Category:Qt

• Qt Quick Tutorials :

• http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial.html

Q & A

• Questions ?

Developing for multiple platforms

• With a large number of platforms around, every developer wants to develop for multiple platforms with minimum investment of time and cost

• First Approach (known as native programming): Learn the programming language, APIs and SDK of each platform and then develop for each platform separately.

• Second Approach (known as cross-platform programming): Use a cross-platform development tool, learn the language & APIs of that tool and develop for multiple platforms using a single codebase.

Cross-Platform Development

• What?

• Developing software for, or running software on, more than one type of platform.

• The most universal cross platform application is the Web browser.

• Why ?

• One can minimize project cost and time dramatically as compared to the native programming approach.

When to use Cross-Platform Approach?

• If you are developing a 2D game or application then cross-platform programming suites you but keep the following things in mind : – Whether the cross-platform development tool that you are

going to use, provides access to those platform services (or native features) that are essential for your project. For example, you want to make an application that gets the location of a person and show it into a map. So, developing such application is not possible with a cross-platform development tool that doesn’t provide an access to GPS on the device.

– Always try some performance tests of simple examples/samples provided with the tool on real devices, to find out whether it serves your purpose or not because some tools are not perfect for creating 2D games or UI intensive applications and some tools are only limited to some special sort of applications like RSS feeds etc.

When to use Cross-Platform Approach?

• If you are developing a 2D or 3D game that needs a lot of computing power then check either that cross-platform development tool supports hardware acceleration. If not then you have to go with native programming approach. Usually, cross-platform tools providing OpenGL ES or OpenVG supports hardware acceleration and can serve the purpose.

MoSync

• The MoSync Mobile SDK is a complete, rich, cross-platform mobileapplication development SDK. It's designed by mobile app developers for mobile app developers.

• Supports Symbian, Windows Phone, Android, JavaME, iOS and Blackberry.

Getting Started With MoSync

• Download and install the single executable for Windows/Mac from here :

• http://www.mosync.com/download

• And we are ready to develop application for multiple platforms.

Pong Example in MoSync

• Let us port our pong game to MoSync.

• Download Source Code :

• http://sajisoft.com/workshops/PongEx(MoSync).zip

Pong in HTML5

• Let us see the porting of pong game to html5.

• Download Source Code :

• http://sajisoft.com/workshops/ponghtml5.html

TouchDevelop by Microsoft Research

• TouchDevelop is a radically new software development environment by Microsoft Research which allows developers to directly write programs in windows phone 7.

• It is very easy to learn development environment and it comes with hundred of APIs that makes it possible to implement number of ideas directly on your phone and with minimum investment of time.

First Example in TouchDevelop

• Let us write our first fun program in TouchDevelop that takes audio from the user, convert it into text and then speak that text .

English-Urdu Translator using Speech Recognition

• Here you go :

Accelerometer based ball with hurdle

• Here you go :

Location-Based Services

• LBS include services to identify a location of a person or object.

• In moboPhones, location can be found by using :

1. built-in aGPS

2. Or by using CellID but it is not that accurate as the above one : http://mobiforge.com/developing/story/adding-

location-a-non-gps-phone-introducing-cellid

Applications Of LBS

• Requesting the nearest business or service, such as an ATM or restaurant

• Turn by turn navigation to any address

• Locating people on a map displayed on the mobile phone

• Receiving alerts, such as notification of a sale on gas or warning of a traffic jam

• Location-based mobile advertising

• Asset recovery combined with active RF to find, for example, stolen assets in containers where GPS would not work

• Games where your location is part of the game play, for example your movements during your day make your avatar move in the game or your position unlocks content.

Google Maps

An Example in Qt for LBS

• Getting list of hospital in given radius.

• Download Source Code : • http://sajisoft.com/workshops/LocationTest.zip

JSON Response

NFC (Near Field Communication)

• Near field communication (NFC) is a set of standards for smartphones and similar devices to establish radio communication with each other by touching them together or bringing them into close proximity, usually no more than a few centimetres.

• Communication is also possible between an NFC device and an unpowered NFC chip, called a "tag".

NFC (Near Field Communication)

NFC (Near Field Communication)

• The Number

• 80% of the top 50 international airlines plan to provide NFC communication by 2014

• Only 12 percent of shoppers know what NFC means

• NFC applications will grow to be a $35 billion industry by 2016.

• 30 percent of American mobile users wanted NFC

NFC (Near Field Communication)

• Examples :

• Touch To Travel

• Touch To Share

• Touch To Open Door

• Touch To Print

• Touch To Discover

• Touch To Shop ………….

Thanks!

• Google Search (http://google.com)

• Wikipedia (http://wikipedia.com)

• Nokia Developer (http://developer.nokia.com)

• Without whom I can’t complete these contents.

Game Over