how to make flash game without flash

7/27/2019 How to Make Flash Game Without Flash

1/90

Flash without Flash


2/90

Pipeline

FlashDevelop setup

Syntax

Display Chain

Events

Bitmaps

Pixel Bender


3/90

Pipeline


4/90


5/90

Non-Flash Flash Pipeline

+ +

.as

.swc


6/90

FlashDevelop Setup


7/90


8/90

Program Settings


9/90

Fle


10/90


11/90

Create New Project


12/90

AS3 Project

Name project

Location

Check it!


13/90

Run


14/90

Should see...


15/90

Demo HelloWorld


16/90

Syntax


17/90

Basics

// Comment

/* Mult-line comment...

No really you can have

multiple lines. */

var myVariable : int = 32;

{ }

;


18/90

trace

trace( Foo is: + foo );


19/90

for loop

for ( i = 0; i < 10; ++i) {

trace( i );

}


20/90

Classes

package{!! public class Foo! {!

// Ctor! ! function Foo() {! ! }! !! ! public function something() :void {! ! ! trace(I just did something!);! ! }! ! private function something( a:int, b:Number ) :int {! ! ! return a + Math.floor(b);! ! }! }}


21/90

Encapsulation

package

{!! public class Foo! {!! ! public var x : int;! ! protected var y : int;! ! private var z : int;

! ! function Foo() {! ! }! !! ! public function something() :void {! ! ! trace(I just did something!);! ! }! ! private function something( a:int, b:Number ) :int {! ! ! return a + Math.floor(b);! ! }! }}


22/90

Variables & Functions

package

{!! public class Foo! {!! ! public var d : Number;! ! public var msg : String = answer is;

! ! public function something( a:int, b:int ):String {! ! ! var c:uint = 0x32fa;

d = 76.3;! ! ! return msg + (a + b + c + int(d) );! ! }! }}

casting

initial va

r

argumen


23/90

Constructor

package

{!! public class Foo! {!! ! public var x : int;! ! protected var y : int;! ! private var z : int;! ! function Foo() {! ! }! !! ! public function something() :void {! ! ! trace(I just did something!);! ! }! ! private function something() :void {! ! ! trace(Im hidden.);! ! }! }}

Ctor


24/90

Deriving

package

{! public class Bar extends Foo! {! }}


25/90

Override

package

{! public class Foo! {! ! public function stuff() :void! !{! ! }! }

}

package

{! public class Bar extends F! {! ! override public functio! !{! ! }! }

}


26/90

new & null

var foo :Foo = new Foo();

foo = null;


27/90

this & super

private var x :int;

public function stuff( x:int ) :void {

! this.x = x;}

override public function ! super.calc();}


28/90

Static

package

{!! public class Foo! {!! ! static public var x : int;! }}

var a:Foo = new Foo();

a.x = 12; // Compi

Foo.x = 12;

trace( Foo.x ); // 12


29/90

Global namespace

package

{! public class Foo! {!! ! function Foo()! ! {! ! }! !! ! public function something() :void {! ! ! trace(I just did something!);! ! }! ! private function something() :void {! ! ! trace(Im hidden.);! ! }! }}

No name afte

means contenthe global nam


30/90

specific namespace

package com.tronster.examples

{! public class Foo! {!! ! function Foo()! ! {! ! }! !! ! public function something() :void {! ! ! trace(I just did something!);! ! }! ! private function something() :void {! ! ! trace(Im hidden.);! ! }! }}

import com.tronster.examp

package

{! public class Bar! {! ! private var foo:F! }}


31/90

Why namespaces?

package com.tronster.examples

{

! public class Foo! {!! }}

import com.tronster.examples.Foo;

import dude.stuff;

package

{! public class Bar! {! ! public function xyz():void! ! {! ! ! var foo1 :com.tronster.ex! ! ! !

new com.tronster.exam

! ! ! var foo2 :dude.stuff.Foo ! ! ! ! new dude.stuff.Foo();! ! }! }}

package dude.stuff

{! public class Foo! {!! }}

Wh ?


32/90

When to use?

Game Engine

Shareable class

Shareable library

OVERKILL for simple lab experiments

S d h


33/90

Syntax not covered here..

interface IFoo { }

public var get mySweetProperty():int { return sugar; }

try { throw new Error(Sad Panda); }

catch( e :Error ) {}

var func :Function = fooFunction;


34/90

Intermission...Wonderfl.net


35/90

Display Chain

N i Di l bl T


36/90

Native Displayable Types

Wi h Fl h IDE


37/90

Without Flash IDE

Hi h


38/90

Hierarchy

M lti l Li t


39/90

Multiple Lists

On Screen H

S it hi


40/90

Sprite.graphics

graphics.beginFill( 0xff000

graphics.drawCircle( 0, 0,

graphics.endFill();

ddChild( )


41/90

addChild( )

var foo :Sprite = new Sprite();

stage.addChild( foo );

Our Sprite


42/90

Our Sprite

// OurSprite.as

import flash.display.Sprite;

package

{! public class OurSprite extends Sprite {! ! function OurSprite() {! ! ! graphics.beginFill( 0xff0000 );! ! ! graphics.drawCircle( 0, 0, 100 );! ! ! graphics.endFill();! ! }! }}

// In Main.as init()

stage.addChild( new OurSprite() );

Control Placement


43/90

Control Placement

// In Main.as ...! !private function init( e:Event = null ) :void

{!! removeEventListener(! ! Event.ADDED_TO_STAGE, init);! var os:OurSprite = new OurSprite();!

stage.addChild( os );

! os.x = stage.stageWidth * 0.5;! os.y = stage.stageHeight * 0.5;}


44/90

Demo Circle


45/90

Events

Registering Event Listener


46/90

Registering Event Listenerpackage

{! import flash.display.Sprite;! import flash.events.Event;!! public class Main extends Sprite! {! !! ! public function Main():void! ! {! ! ! if (stage) init();! ! ! else addEventListener( Event.ADDED_TO_STAGE, init );! ! }! !! ! private function init(e:Event = null) :void! ! {! ! ! removeEventListener( Event.ADDED_TO_STAGE, init );! ! ! // entry point! ! }! !! }}

Even

(just

fu

The

even

rempara

Flash Players Racetrack


47/90

player events user code render

Flash Player s Racetrack

time

ENTER FRAME


48/90

ENTER_FRAME

addEventListener( Event.ENTER_FRAME, onFrame );

//...

private function onFrame( e:Event ) :void{! trace(entering a frame...)}

Typical


49/90

player events user code rendernothing

Typical

time

Time is wasted each frame


50/90

wasted

time

Time is wasted each frame

frame 1

wasted

time

wast

tim

frame 2 frame

Optimal


51/90

player events user code rendeplayer events user code

logic draw

Optimal

Timer & getTimer()


52/90

Timer & getTimer()package

{! import flash.display.Sprite;! import flash.events.TimerEvent;! import flash.utils.getTimer;! import flash.utils.Timer;!! public class Main extends Sprite {! ! private const DELAY! : int = 20;! ! private var timer!! : Timer;! !! ! public function Main() :void {! ! ! timer = new Timer( DELAY );! ! ! timer.addEventListener( TimerEvent.TIMER, onTick );! ! ! timer.start();! ! }! !! ! private function onTick( e:TimerEvent ) :void {! ! ! trace( "Tick at: " + getTimer() + "ms");! ! }! }}


53/90

Demo TickTock

KeyboardEvent


54/90

KeyboardEvent

KEY DOWN


55/90

KEY_DOWN

import flash.events.KeyboardEvent;

stage.addEventListener( KeyboardEvent.KEY_DOWN, onKeyDown );

private function onKeyDown( e:KeyboardEvent ) :void {

! trace( "You pressed: " + e.keyCode + ", " + e.charCode );}

hardware code,unique to each button

ascii,unique to e

MouseEvent


56/90

MouseEvent

CLICK, localX, localY


57/90

CLICK, localX, localY

import flash.events.MouseEvent;

stage.addEventListener( MouseEvent.CLICK, onMouseClick );

private function onMouseClick( e:MouseEvent ) :void {! graphics.beginFill( Math.random() * 0xffffff );! graphics.drawCircle( e.localX, e.localY, 30 );! graphics.endFill();}

relative to object


58/90

Demo Input


59/90

Bitmaps

Bitmap vs BitmapData


60/90

Bitmap vs BitmapData

BitmapData


61/90

p

setPixel()

setPixel32()

noise()

perlinNoise()

scroll()

paletteMap()

more...

Adding Bitmap to Display


62/90

g p p y

private function init(e:Event = null):void

{! removeEventListener(Event.ADDED_TO_STAGE, init);! ! !! var bitmapData :BitmapData = new BitmapData( 100, 100 );! bitmapData.perlinNoise( 100, 100, 5, 0, false, false );! var bitmap :Bitmap = new Bitmap( bitmapData );! addChild( bitmap );}

Reusing BitmapData


63/90

g p

private function init(e:Event = null):void

{! removeEventListener(Event.ADDED_TO_STAGE, init);! ! !! var bitmapData:BitmapData = new BitmapData( 100, 100 );! bitmapData.perlinNoise( 100, 100, 5, 0, false, false );! var bitmap:Bitmap;! for (var i:int = 0; i < 10; ++i)

{

! ! bitmap = new Bitmap( bitmapData );! ! addChild( bitmap );! ! bitmap.x = (i % 3) * bitmapData.width;! ! bitmap.y = int(i * 0.33) * bitmapData.height;! }}


64/90

Demo BitmapDrawing

External Graphics


65/90

p

[Embed("../lib/jump0007.png")]

private var png7:Class;

addChild( new png7() );

Animation


66/90

// In class definition

[Embed("../lib/image1.png")] private var png1:Class;

[Embed("../lib/image2.png")] private var png2:Class;

private var bitmap :Bitmap;private var bitmapData1 :BitmapData;

private var bitmapData2 :BitmapData;

// In init

bitmapData1 = (new png1() as Bitmap).bitmapData;

bitmapData2 = (new png2() as Bitmap).bitmapData;

addChild( bitmap = new Bitmap( bitmapData1 ) );

// In ENTER_FRAME handler

switch( frame % 2 ) {! case 0: bitmap.bitmapData = bitmapData1; break;! case 1: bitmap.bitmapData = bitmapData2; break;}


67/90

Demo ExternalGraphics


68/90

Pixel Bender


69/90

myBitmap.filters = [ new BevelFilter() ];


70/90

myBitmap.filters = [ new BevelFilter(), new GlowFilter() ];

Filters


71/90

BevelFilter

BlurFilter

ColorMatrixFilter

ConvolutionFilter

DisplacementMapFilter

DropShadowFilter

GlowFilter

GradientBevelFilter

GradientGlowFilter

ShaderFilter

Filters


72/90

BevelFilter

BlurFilter

ColorMatrixFilter

ConvolutionFilter


DropShadowFilter

GlowFilter

GradientBevelFilter

GradientGlowFilter

ShaderFilter

Filters


73/90

BevelFilter

BlurFilter

ColorMatrixFilter

ConvolutionFilter


DropShadowFilter

GlowFilter

GradientBevelFilter

GradientGlowFilter

ShaderFilter

Filters


74/90

BevelFilter

BlurFilter

ColorMatrixFilter

ConvolutionFilter


DropShadowFilter

GlowFilter

GradientBevelFilter

GradientGlowFilter

ShaderFilter


75/90

Demo Filters

void evaluatePixel()

{

float twirlAngleRadians = radians(twirlAngle);


76/90

float2 relativePos = outCoord() - center;

float distFromCenter = length( relativePos );

distFromCenter /= radius;

float adjustedRadians;

float sincWeight = sin( distFromCenter ) * twirlAngleRadians / ( distFro

float gaussWeight = exp( -1.0 * distFromCenter * distFromCenter ) * twir

adjustedRadians = (distFromCenter == 0.0) ? twirlAngleRadians : sincWeig

adjustedRadians = (gaussOrSinc == 1) ? adjustedRadians : gaussWeight;

float cosAngle = cos( adjustedRadians );

float sinAngle = sin( adjustedRadians );

float2x2 rotationMat = float2x2( cosAngle, sinAngle,

-sinAngle, cosAngle );

relativePos = rotationMat * relativePos;

outputColor = sampleLinear( oImage, relativePos + center );

}


77/90

.pbk

=

.pbjPixel BenderToolkit


78/90

.as

++

.pbk

=

.pbj

Pixel Bender Vanilla Fla


79/90


80/90

[Embed("../lib/twirl.pbj", mimeType ="application/octet-stream")]

private var twirltPbj :Class;!private var shader :Shader;


81/90

[Embed("../lib/twirl.pbj", mimeType ="application/octet-stream")

private var twirltPbj :Class;!private var shader :Shader;

...

shader = new Shader( new twirltPbj() as ByteArray );

shader.data.radius.value = [102.3];!! // floatshader.data.center.value = [70, 30];! // float2 (x,y)shader.data.twirlAngle.value = [ 84 ];! // float! ! !bitmap.filters = [ new ShaderFilter( shader ) ];

createshader

set shader on an object


82/90

Demo Bending Pixels


83/90

Thank Youtronster.com


84/90

Misc

Dynamic


85/90

import flash.utils.getQualifiedClassName;

import flash.utils.getDefinitionByName;

var typeName :String = getQualifiedClassName( object );

var type :Class = getDefinitionByName( typeName ) as Class;

var myObj :type = new type();

Singleton


86/90

package

{! public class Foo! {!! ! static private var instance :Foo;! ! static public function getInstance(): Foo {! ! ! if (instance == null)! ! ! ! instance = new Foo( new Lock() );! ! ! return instance;! ! }! ! function Foo( k:Lock ) {! ! }! }}

internal class Lock {

}

Container classes


87/90

var obj :Object = {};

var arr :Array = [];

var dict :Dictionary = new Dictionary();

var vec :Vector. = new Vector.();

Multitouch (BETA)


88/90

import flash.ui.Multitouch;

flash.events.TouchEvent

flash.events.GestureEvent

flash.events.GesturePhase

flash.events.TransformGestureEvent

flash.events.PressAndTapGestureEvent

mySprite.addEventListener( TouchEvent.TOUCH_TAP, onTap );


89/90


90/90

Additional:

Dispose pattern

Doc?

Sound

Pre-processor CONFIG::Debug

how to make flash game without flash

Documents