Construct 2 Game Development

By Shahed Chowdhuri and Syahrul RahmayudaSr. Technical Evangelist

Construct 2 Game Development: Flapping Bird

Windows 8 Windows Phone 8 Web Mobile Android and more!

Title Page: Intro to Indie Game DevelopmentWindows Web Xbox Mobile

By Shahed ChowdhuriTechnical Evangelist

Blog: WakeUpAndCode.comTwitter: @shahedC

2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.19/05/20151Getting Started

Getting Started: Step 1https://www.scirra.com/ Download!Getting Started: Step 2

Run it!Getting Started: Step 3

ClickFile New

Getting Started: Step 4

FilterScrollUpOrDownOpen!Getting Started: Step 5

ToolbarProjects/LayersObjectsLayoutPropertiesTabs for Layouts & Event Sheets

Getting Started: Step 6ClickFile Save

Getting Started: Step 7Save!EnterFile nameGetting Started: Done!

Prepare Your Layouts

Prepare Your Layouts: Step 1Right-Click to Rename Layout

Prepare Your Layouts: Step 2Enter Start

Prepare Your Layouts: Step 3Right-click Layouts folderto Add layout

Prepare Your Layouts: Step 4

Add event sheet

Prepare Your Layouts: Step 5Right-Click new Layout to Rename it

Prepare Your Layouts: Step 6Enter Game

Prepare Your Layouts: Step 7Change Layout Sizefor the Game LayerLayout Size:Width: 400Height: 500

Prepare Your Layouts: Step 8Change Layout Sizefor the Start LayerLayout Size:Width: 400Height: 500

Prepare Your Layouts: Step 9Select project

Prepare Your Layouts: Step 10Update projectpropertiesWindow Size:Width: 400Height: 500Fullscreen in browser: Off

Prepare Your Layouts: Done!Add Play Button

Add Play Button: Step 1Go to Start screen

Add Play Button: Step 2Right-click, thenInsert New Object

Add Play Button: Step 3Select ButtonClick Insert

Add Play Button: Step 4Click anywhere

Add Play Button: Step 5Update the Text

Add Play Button: Step 6Enter Play

Add Play Button: Done!Add Button Event

Add Button Event: Step 1Go to Event sheet 1 for Start layout

Add Button Event: Step 2Click Add event

Add Button Event: Step 3Select ButtonClick Next

Add Button Event: Step 4Select On clickedClick Done

Add Button Event: Step 5Click Add action

Add Button Event: Step 6Select SystemClick Next

Add Button Event: Step 7Select Go to layoutClick Next

Add Button Event: Step 8

Click Done

Add Button Event: Done!Add Game Graphics

Add Game Graphics: Step 1Go to the Game layout

Add Game Graphics: Step 2

Drag in these 4 imagesimage one by one

Add Game Graphics: Step 3Arrange them like this.

Add Game Graphics: Step 4Top-leftoutsideNear leftedge

Add Game Graphics: Done!Add Tiled Background

Add Tiled Background: Step 1Right-clickthenInsert newobject

Add Tiled Background: Step 2SelectTiled BackgroundClick Insert

Add Tiled Background: Step 3Clicknearthe bottom

Add Tiled Background: Step 4Load an image

Add Tiled Background: Step 5Click OpenSelectfloor.png

Add Tiled Background: Step 6Close popup

Add Tiled Background: Step 7Drag to lower leftSizeWidth: 1000Height: 28

Add Tiled Background: Done!Add Floor

Add Floor: Step 1Right-clickagainthenInsert newobject

Add Floor: Step 2SelectTiled BackgroundClick Insert

Add Floor: Step 3Clickaboveground

Add Floor: Step 4Load an image

Add Floor: Step 5Click OpenSelectfloor2.png

Add Floor: Step 6Close popup

Add Floor: Step 7Drag above groundSizeWidth: 1000Height: 19

Add Floor: Done!Add Movement

Add Movement: Step 1Selectthe bird

Add Movement: Step 2ClickBehaviors

Add Movement: Step 3

Click toAdd new

Add Movement: Step 4SelectPlatformClick Add

Add Movement: Step 5

Close popup

Add Movement: Step 6ReduceMax Speedto 0 (prevents left-right movement)(END of Part 1)Updated with enhancements from Flappy Bird template