INTRO TO COCOS2D. 360iDev 2011

Transcription

1 INTRO TO COCOS2D 360iDev 2011

2 ABOUT US Founder of Razeware Founder of Prop Group Writes ios tutorials at 6 apps in App Store (3 w/ Cocos2D!) Background in enterprise software, now iphone+ipad games! 2D physics game, Payload in the AppStore

3 CATJUMP Gives us an hour and... Learn about Cocos2D See how to build the CatJump Minigame Walk away with the source code and more...

4 GIVEAWAYS! Books to Giveaway! Game Dev Tools USBs to Giveaway! LevelHelper & SpriteHelper Physics Editor & Texture Packer Glyph Designer & Particle Designer To enter: Send any tweet including the tags #cocos2d and #360idev before end of talk!

5 GETTING STARTED What is Cocos2D? Getting and Installing Cocos2D Cocos2D Basics Sprites & Positioning Actions A Game in 5 Steps

6 WHAT IS COCOS2D? Popular Objective-C framework for 2D games Sprites, Actions, Scenes, Audio, Tile Maps, and more! OpenGL ES rendering and optimizations Integrated with Physics Engines (Box2D, Chipmunk)

7 BONUS REASON! Several top games use Cocos2D, Chipmunk, or Box2D Feed Me Oil (Cocos2D, Chipmunk) Trainyard (Cocos2D) Angry Birds (Box2D)

8 GETTING COCOS2D - EASY

9 INSTALLING TEMPLATES

10 COCOS2D TEMPLATES

11 ESSENTIALS: SCENES AND LAYERS CCScene HelloWorld Scene CCLayer CCLayer HelloWorld Layer HUD Layer Lives: N Dodges: N

12 PLAYER INPUT Touch CCLayer CCLayer Accelerometer CCLayer Touches and Accelerometer events are passed to CCLayers CCLayers can subscribe to touch, accelerometer, both, or neither

13 SPRITES An image you can move independently from other images To get your image from Flash to GPU it is loaded/ uncompressed/converted in memory to a texture CCSprite is an object to reference both the texture allow you to control the position of the texture on screen

14 SPRITES Adding the background CCSprite *bg = [CCSprite spritewithfile:@"bg.png"]; [self addchild:bg]; Inherits from CCNode, so it can render itself (or be rendered), and it can run Actions

15 ESSENTIALS: POSITIONING Can position any CCNode Positions are relative to their parent Default: (0,0) of a scene/layer is bottom left corner of screen // Middle of the screen [bg setposition:cgpointmake(winsize.width/2, winsize.height/2)]; // at x=100, y=100 (Points not Pixels) [bg setposition:cgpointmake(100.0f, 100.0f)];

16 ESSENTIALS: ANCHOR POINTS (0,1) (1,1) (0.5,0.5) (0,0) (1,0) Default is the center All of the positioning and some of the effects (rotation) are based off the anchor point

17 COCOS2D ACTIONS Actions are an easy way to apply transitions, effects, and animations to your sprites MoveTo, MoveBy, ScaleBy, ScaleTo, FadeIn, FadeOut... CCAction *moveaction = [CCMoveBy actionwithduration:2.0f position:cgpointmake(50.0f,0.0f)]; [vehiclesprite runaction:moveaction]; 2 seconds

18 MOST IMPORTANT ACTIONS Actions are named after what you want it to do: CCMoveTo and CCMoveBy CCRotateTo and CCRotateBy CCScaleTo and CCScaleBy To see all actions: run ActionsTest sample

19 JUMP ACTION CCJumpBy/CCJumpTo is an action that provides a parabolic jump for your CCSprite To make the cat do a 1 second, 200 point jump: CCJumpBy *jumpaction = [CCJumpBy actionwithduration:1.0 position:ccp(0,0) height:200 jumps:1];![cat runaction:jumpaction];

20 MULTIPLE ACTIONS What if you want to run several actions in a sequence? CCSequence action [cat runaction:[ccsequence actions:jumpaction, donejumpaction, nil]]; What if you want to run several actions at the same time? CCSpawn action [cat runaction:[ccspawn actions:jumpaction,otheraction, nil]];

21 CALLING FROM AN ACTION You can call your own methods as actions by wrapping them inside a CCCallFunc action For example, calling the donejump method CCCallFunc *donejumpaction = [CCCallFunc actionwithtarget:self selector:@selector(donejump)];

22 CALLING FROM AN ACTION CCCallFuncN Passes the CCNode (CCSprite that was running the action) as the only parameter CCCallFuncND Passes the CCNode as the first parameter and a pointer to any other object as the data (D) parameter

23 A GAME IN 5 STEPS

24 STEP 1 Adding Background and Cat, Positioning, Actions

25 STEP 2 Player Input

26 STANDARD TOUCH DELEGATE Standard Touch Delegate Inform Cocos2D that the CCLayer wants to receive touch events (add this to init method) self.istouchenabled = YES; Add a cctouches method for the type of events you want to receive cctouchesbegan, cctouchesmoved, cctouchesended, cctouchescancelled - (void)cctouchesbegan:(nsset *)touches withevent:(uievent *)event {

27 STEP 3 Pumping up the Volume

28 COCOSDENSHION SOUND ENGINE Wrapper for AVAudioPlayer and OpenAL Simple to use, for background + sound effects. Supports sync or async loading

29 PLAYING SOUND EFFECTS Three Steps: Import SimpleAudioEngine #import "SimpleAudioEngine.h" Pre-load the sound effect [[SimpleAudioEngine sharedengine] Play it [[SimpleAudioEngine sharedengine]

30 STEP 4 Update loop, Spawning Enemies

31 WHAT IS THE COCOS2D SCHEDULER? Better then NSTimer Automatically stopped and restarted if your game is paused/ resumed (via Cocos2D Director) Only called if your object is part of an active Scene Delta Time included

32 SCHEDULER CHOICES scheduleupdate [self scheduleupdate]; Runs on every Frame, callback to - (void)update:(cctime)dt method scheduleselector [self schedule:@selector(updateobjs:) interval:0.5f]; Calls your method with a rough given interval (in seconds)

33 STEP 5 Collision Detection

34 BASIC COLLISION DETECTION How do you tell when the cat is in contact with the cars or dogs? Each CCSprite has a bounding box, a rectangle matching the exact size of the image. Use CGRectIntersectsRect

35 BASIC COLLISION DETECTION What about the transparent space? Adjust your bounding box rectangles or use several rectangles

36 WHERE TO GO FROM HERE? Please stay in touch! Rod cocos2dbook.com Ray raywenderlich.com

37 WHERE TO GO FROM HERE? Upcoming Cocos2D Weekend Workshop... Here in Denver, CO! Oct iphonegamedev.eventbrite.com $75 off with code: 360IDEV Giveaways!

38 ADDITIONAL INFO

39 ESSENTIALS: CCDIRECTOR Cocos2D manages your game loop for you Class that handles this: CCDirector (a singleton) Methods to set running scene Templates run HelloWorldScene by default Method to get window size CGSize size = [[CCDirector shareddirector] winsize];

40 ESSENTIALS: NODES Anything drawn to the screen (or contains things to draw) derives from CCNode Examples: CCScene, CCLayer, CCSprite, CCLabelTTF Can position nodes, and run actions on them

41 ESSENTIALS: POINT HELPERS Comes with handy functions to work with CGPoints: ccp(...) becomes CGPointMake(...) ccpadd, ccpsub, ccpmult, ccplength, etc. libs\cocos2d\support\cgpointextension.h