for Fun and Profit Lu Guanqun Intel Corporation Why? The market - - PowerPoint PPT Presentation

▶
for fun and profit
SMART_READER_LITE
LIVE PREVIEW

for Fun and Profit Lu Guanqun Intel Corporation Why? The market - - PowerPoint PPT Presentation

Oct 06, 2022 273 likes •571 views

Write Your Angry Bird Game on Tizen for Fun and Profit Lu Guanqun Intel Corporation Why? The market is big! 3 Famous games apps 4 Playing games is fun. Developing a game is more fun. 5 How? Native app vs Web app

slide-1
SLIDE 1

Write Your “Angry Bird” Game on Tizen for Fun and Profit

Lu Guanqun Intel Corporation

slide-2
SLIDE 2

Why?

slide-3
SLIDE 3

3

The market is big!

slide-4
SLIDE 4

4

Famous games apps

slide-5
SLIDE 5

5

  • Playing games is fun.
  • Developing a game is more fun.
slide-6
SLIDE 6

How?

slide-7
SLIDE 7

7

  • Tizen now DOES support the native application development.
  • Web is the future and it’s cross platform by its nature.
  • So a web game app(HTML5) in this talk.

Native app vs Web app

slide-8
SLIDE 8

8

So how to develop a web game app?

slide-9
SLIDE 9

9

  • Write it by yourself from scratch
  • Javascript (CoffeeScript,

TypeScript etc)

  • Canvas(SVG)/WebGL
  • WebAudio

If you’re brave enough…

slide-10
SLIDE 10

10

Basic Game Loop

Read Input Move Collision Test Render

slide-11
SLIDE 11

11

Use a Game Engine

  • There are many choices, and I choose…
slide-12
SLIDE 12

12

Use a Game Engine

  • cocos2d-html5
slide-13
SLIDE 13

13

  • Cocos2d
  • Cocos2d for iphone
  • Cocos2d-x
  • Cocos2d-html5

A bit history about cocos2d

slide-14
SLIDE 14

14

Basic Workflow

Intro Menu Level1 Cutscene Level2 Winning scene Losing scene Score board

slide-15
SLIDE 15

15

Basic Concepts

slide-16
SLIDE 16

16

var GameLayer = cc.Layer.extend({ init:function() { this._super(); var sprite = cc.Sprite.create(s_name); sprite.setPosition(cc.p(100, 100)); this.addChild(sprite); } }) var MainScene = cc.Scene.extend({

  • nEnter:function () {

this._super(); var layer = new GameLayer(); // create a CCLayer this.addChild(layer); layer.init(); } })

Some samples of code

slide-17
SLIDE 17

17

  • Developed in C++ at first by

Erin Catto

  • Then have lots of language

ports.

  • We would use javascript

version.

2D Physics Engine – Box2D

slide-18
SLIDE 18

18

  • “World” – manages the whole physics simulation.
  • “Body” – primary element in Box2D world.
  • “Shape” – all the collision geometry attached to a body.
  • “Fixture” – attach a shape to a body, sets density, friction and

restitution.

  • “Joint” – connection between two bodies.

Basic Concepts in Box2D

slide-19
SLIDE 19

19

  • Box2D uses KMS unit system.
  • Kilograms
  • Meters (not pixels)
  • Seconds

Unit

slide-20
SLIDE 20

20

  • Emphasize with blue or green color from “Theme Colors” only
  • Initial caps for titles and sentence case for bullets
  • Follow the guidance for bulleted lists on the following page

Let’s see some code:

// create the world world = new b2World(new b2Vec2(0, -10), // gravity vector true); // allowing sleeping bodies // create FixtureDef var fixDef = new b2FixtureDef; fixDef.density = 1.0; fixDef.friction = 0.5; fixDef.restitution = 0.2; // create a ground body var bodyDef = new b2BodyDef; bodyDef.type = b2Body.b2_staticBody; fixDef.shape = new b2PolygonShape; fixDef.shape.SetAsBox(20, 2); // size (half width/height as the argument) bodyDef.position.Set(10, -1.8); world.CreateBody(bodyDef).CreateFixture(fixDef);

slide-21
SLIDE 21

21

  • Emphasize with blue or green color from “Theme Colors” only
  • Initial caps for titles and sentence case for bullets
  • Follow the guidance for bulleted lists on the following page

Create a dynamic box

var bodyDef = new b2BodyDef(); bodyDef.type = b2Body.b2_dynamicBody; // specify the dynamic body here! bodyDef.position.Set(p.x / PTM_RATIO, p.y / PTM_RATIO); bodyDef.userData = sprite; // link Box2D to our sprite var body = world.CreateBody(bodyDef); var dynamicBox = new b2PolygonShape(); dynamicBox.SetAsBox(0.5, 0.5); //1m box // Define the dynamic body fixture. var fixtureDef = new b2FixtureDef(); fixtureDef.shape = dynamicBox; fixtureDef.density = 1.0; fixtureDef.friction = 0.3; body.CreateFixture(fixtureDef);

slide-22
SLIDE 22

22

  • Emphasize with blue or green color from “Theme Colors” only
  • Initial caps for titles and sentence case for bullets
  • Follow the guidance for bulleted lists on the following page

Draw the objects from Box2D

update:function (dt) { var velocityIterations = 8; var positionIterations = 1; // Instruct the world to perform a single step of simulation. It is // generally best to keep the time step and iterations fixed. this.world.Step(dt, velocityIterations, positionIterations); //Iterate over the bodies in the physics world for (var b = this.world.GetBodyList(); b; b = b.GetNext()) { if (b.GetUserData() != null) { var myActor = b.GetUserData(); myActor.setPosition(cc.p(b.GetPosition().x * PTM_RATIO, b.GetPosition().y * PTM_RATIO)); myActor.setRotation(-1 * cc.RADIANS_TO_DEGREES(b.GetAngle())); } } }

slide-23
SLIDE 23

23

Classic Box2D Demo

slide-24
SLIDE 24

24

  • A place to shoot the bird
  • Some blocks, wood, house
  • The monsters

To make it more like Angry Bird, we need:

slide-25
SLIDE 25

25

My “Angry Bird” Demo

slide-26
SLIDE 26

26

  • Sound effects
  • Shiny graphics ( I need an artist! )

More…

slide-27
SLIDE 27

27

  • Sell it on Tizen app store
  • Add some ads
  • In App Purpose

Profits Part

slide-28
SLIDE 28

28

  • https://github.com/cocos2d/cocos2d-html5
  • http://box2d-js.sourceforge.net/
  • http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-

App-World-The-Just-Web-Lives-in-It

  • http://xkcd.com/724/
  • http://www.cocos2d-

iphone.org/wiki/doku.php/prog_guide:basic_concepts

References:

slide-29
SLIDE 29