An Introducton to Game Programming with Flash

1. An Introducton to Flash and Acton Script 3

Resources

● GitHub (https://github.com/krzysztof-o/epi-wdpg)

● Slideshare (http://www.slideshare.net/krzysztofopalka/)

● Recommended books● Moock C., Essental ActonScript 3.0, O'Reilly Media, 2007● Sanders W., Cumaranatunge Ch., ActonScript 3.0 Design Patterns, O'Reilly Media, 2007● Imbert T., Introducing Starling, O'Reilly Media, 2012

● Recommended websites● http://gaming.adobe.com/● http://www.adobe.com/devnet/games.html● http://help.adobe.com/en_US/FlashPlatform/reference/actonscript/3/index.html● http://www.bytearray.org/

Why browser games?

● Low entry barriers

● Easy distributon

● Integraton with social networks

● Real tme analytcs

● Contnuous Deployment is possible

● Big Players do browser games

Choosing technology

VS.

WebGL

Canvas CSS3

Audio

Video

Local Storage Sockets

Open Web

Open Web

● Cross-platform

● Dynamic growth

● Do not rely on mobile app stores

● Client and Server code in JavaScript

● Always bet on JavaScript

● Atwood's Law

Pros Cons

● Lack of tools

● Differences in implementaton

● JavaScript – The World's Most Misunderstood Language

Flex SDK

Adobe AIR Stage3D

Flash Builder

Flash PRO

Flex Framework

Flash Platform

Flash Platform

● Mature technology

● Great tools

● Consistency betweenplatforms

● ActonScript 3

● Mobile apps usingAdobe AIR

Pros Cons

● Doesn't work in mobile browsers

● Bad PR

● Unknown future

Memory Game

git clone git://github.com/krzysztof-o/epi-wdpg.git

Memory Game

Variables and constants

var myString:String = "Hello World!"; var myNumber:Number = 589.25; var myInt:int = -5; var myUint:uint = 5; var isClicked:Boolean = true; const MARGIN:Number = 10;

Embeding assetsgit checkout v1.2

[Embed(source="assets.swf", symbol="card")] private const BACKGROUND:Class;

var background:Sprite = new BACKGROUND();

AssetsSprite ”background”

980px

580px

AssetsMovieClip ”card”

1. frame 2. frame 4. frame 3.frame 5. frame

Sprite vs. MovieClip

Display List

addChild(background); addChildAt(background, 0); getChildAt(0); //background getChildIndex(background); //0 removeChild(background);

Display List

Coordinates system(0,0) x

y stage

Coordinates system(0,0) x

y stage

Coordinates system(0,0) x

y

stage

(x=50,y=50)child

Coordinates system(0,0) x

y

stage

(x=0,y=0)child

(x=50,y=50)container

Loops

for (var i:uint = 0; i < 10; i++) {

trace(i); } var j:uint = 0; while(j < 10) {

trace(j); j++;

}

Events

card.addEventListener(MouseEvent.CLICK, onClick);

private function onClick(event:MouseEvent):void { trace("clicked!"); }

dispatchEvent(new Event("makeSomeNoise"));

Event bubbling

Observer pattern

Observer pattern

Arrays, Vectors, Dictonaries

var myArray:Array = [1, "2nd element"]; myArray.push(10); myArray.push("Hello World"); myArray.push({name: "Jan", age: 37}); myArray[3]; //"Hello World" var myVector:Vector.<int> = new Vector.<int>(); myVector.push(5); myVector.push(10); myVector[2]; //10 var myDictionary:Dictionary = new Dictionary(); myDictionary["someKey"] = myVector; myDictionary["someKey"][2]; //10

Array sortng

myArray.sort(); myArray.sort(Array.DESCENDING | Array.CASEINSENSITIVE); myArray.sortOn("depth"); myArray.sort(randomSort);

private function randomSort(a:*, b:*):Number {

if (Math.random() < 0.5) return -1; else return 1; }

Conditonal statements

if(delta < 0) {

trace("no roots") } else if(delta == 0) { trace("one root") } else {

trace("two roots") }

var absolute:Number = value >= 0 ? value : -value;

TweenMax

TweenMax.to(card,.5, {

scaleX: 1.2, scaleY: 1.2, delay: 1, ease: Elastic.easeIn, onComplete: completeFunction

});

Tasks

● Blocking card choice during tmeout

● Blocking picking up the same card twice

● Enlarging card after mouse over

● Disappearing animaton of correctly chosen cards

● 3D Card rotaton (hint: TweenMax, rotationY, onUpdate)