Simple Game Development in Cascades

Simple Game Development in CascadesJAM42Eric HartyBrian ScheirerMay 14-16, 2013

Eric Harty

@Ebscer

Brian Scheirer

@BrianScheirer2

Who are we?

So We Made a Game

In Cascades…

3

Download the full source codefrom Github at

https://github.com/Ebscer/BlackBerryLive-JAM42

4

Full Source Code

Entry point for our game Allows users to jump ahead,

replay levels or continue where they last left off

Same basic code as Starbeams LevelButton.qml objects in a

ScrollView Remember last played level

5

Level Selection Screen

LevelButton.qml

6

import bb.cascades 1.0Container {

property int value: 0background: levelButtonBack.imagePaint //ImagePaintDefinitionpreferredWidth: 144preferredHeight: 144gestureHandlers: [

TapHandler {onTapped: {

levelSelectionPage.newLevel(value)}

}]

}

Level Selection (part 2)

7

attachedObjects: [ComponentDefinition {

id: levelButtonObjectsource: “LevelButton.qml”

}]

Level Selection (part 3)

8

ScrollView {Container {

id: levelsonCreationCompeted: {

for(var i=0;i<max_level; i++){var b = levelButtonObject.createObject()b.value = ilevels.add(b)

}}

}}

Load the level JavaScript function

Setup win/loss conditions and score Variable scoring QTimer

User input Switch Buttons Submit Button

9

Level Creation

Level Creation: Load Level

10

onCurrent_levelChanged: { LevelFunctions.nextLevel(current_level); }…function nextLevel(theLevel) {

switch (theLevel) { case 1:

//level conditions

break; }

Level Creation: Win Conditions

11

ImageButton {defaultImageSource: "asset:///images/Sub1.png"pressedImageSource: "asset:///images/Sub2.png"onClicked: { var box1postion = Number(box1.translationX); var box2postion = Number(box2.translationX); var tube1score = Number(0); var tube2score = Number(0);

// if/else statement for tube2score based off box2postion // if/else statement for tube2score based off box2postion gameTimer.stop(); round_score = tube1score + tube2score; subDialog.open(); }}

Level Creation: Loss Conditions

12

qmlRegisterType<QTimer>("bb.cascades", 1, 0, "QTimer");

attachedObjects: [ QTimer { id: gameTimer interval: 1000 onTimeout: { timeRemaining.value -= 1; timeLabel.text = timeRemaining.value; if (timeRemaining.value == 0) { //end game loseDialog.open(); } } }]

Level Creation: User Input

13

gestureHandlers: [ TapHandler { onTapped: { if (switch2.text == "on") { if (right2.isPlaying() == true) { right2.stop(); } else if (left2.isPlaying() == true) { left2.stop(); } switch2.text = "off"; mySwitch2.imageSource = "asset:///images/Switch2.png"; } … //else do the opposite } }]

Translation Animations Duration Position Easing Curves

Use onEnded function to alternate animations

14

Animation

Animation (Part 2)

15

Container { id: box2 animations: [ TranslateTransition { id: right2 toX: 500 duration: 2000 onEnded: { left2.play(); } } ]

}

Used in our game to progress past the second level

A better way to offer upgrades than having a separate app Additional features “Power-ups”

16

In-App Purchases

In-App Purchases (c++)

17

// use PaymentServiceControl.cpp from the paymentservice sample

// first line for testing onlyPaymentManager::setConnectionMode(PaymentConnectionMode::Test);

qmlRegisterType<PaymentServiceControl>("com.blackberry.payment", 1, 0, "PaymentServiceControl");

https://github.com/blackberry/Cascades-Samples/tree/master/paymentservice

In-App Purchases (qml part 1)

18

import com.blackberry.payment 1.0attachedObjects: [

PaymentServiceControl {id: paymentControlonPurchaseResponceSuccess: {

// handle successful purchase}onInfoResponseError: {

if(errorText==“alreadyPurchased”) {//handle successful purchase

} else {//purchase failed (if needed)

}}

}]

In-App Purchases (qml part 2)

19

import com.blackberry.payment 1.0

var inAppId = “UnlockLevel3"var inAppSku = “UnlockLevel3“var inAppName = “Unlock the third level”var inAppMetaData = “Allows you to play past level 2”paymentControl.purchase(inAppId,inAppSku,inAppName,inAppMetaData)

Scoreloop is a free service provided by BlackBerry

Scoreloop services are run on a separate thread

Leaderboard GUI is based on a ListView

20

Scoreloop Leaderboards

Scoreloop

21

BBLiveGame::BBLiveGame(bb::cascades::Application *app) {mScoreLoop = ScoreLoopThread::instance();mAppData = 0;mScoreLoop->start();

}

void BBLiveGame::submitScore(int score, int mode) {if(mAppData!=0) {

ScoreLoopThread::SubmitScore(mAppData,score,mode);}

}

ScoreLoopThread* BBLiveGame::scoreLoop() {return ScoreLoopThread::instance();

}

Scoreloop leaderboard qml

22

ListView {id: leaderboardListdataModel: GroupDataModel {

id: leaderboardModelgrouping: ItemGrouping.NonesortingKeys: [“rank”]

}onCreationCompleted: {App.scoreloop().LoadLeaderboardCompleted.connect(getdata)App.loadLeaderboard(“all-time”,100)}

}

function getdata(leaderboardData) {leaderboardModel.insertList(leaderboardData)

}

Scoreloop leaderboard thread

23

void ScoreLoopThread::LoadLeaderboard(AppData_t *app, SC_ScoresSearchList_t searchList, unsigned int count) { SC_Client_CreateScoresController(app->client, &app-> scoresController, LoadLeaderboardCompletionCallback, app); SC_Range_t range; range.offset = 0; range.length = count; SC_ScoresController_LoadScores(app->scoresController, range);}void ScoreLoopThread::LoadLeaderboardCompletionCallback (void *userData, SC_Error_t completionStatus) { AppData_t *app = (AppData_t *) userData; SC_ScoreList_h scoreList = SC_ScoresController_GetScores(app->scoresController); QVariantList leaderboardData;

continued on next slide

Scoreloop leaderboard thread part 2

24

QVariantList leaderboardData; unsigned int i, numScores = SC_ScoreList_GetCount(scoreList);for (i = 0; i < numScores; ++i){ SC_Score_h score = SC_ScoreList_GetAt(scoreList, i); SC_User_h user = SC_Score_GetUser(score); SC_String_h login = user ? SC_User_GetLogin(user) : NULL; QVariantMap scoreData; scoreData["rank"] = SC_Score_GetRank(score); scoreData["simpleScore"] = SC_Score_GetResult(score); scoreData["username"]=login?SC_String_GetData(login):"<unknown>"; leaderboardData.append(scoreData);}emit(instance()->LoadLeaderboardCompleted(leaderboardData));SC_ScoresController_Release(app->scoresController);

Next Steps…

Cocos2dx

25

Cascades + Native Gaming libraries

What? Using Cascades with native gaming libraries is easy.ForeignWindow control lets you embed a native game window to Cascades UI.

Who?Native BB10 App look-and-feel with Cascades UI Focus on native game development and not UIOverlay cascades controls over their native game

What is Cocos2D

Framework for 2D Games, graphics apps

Simplifies:Flow control between scenesSprites with actions [move, rotate, scale…]Effects [waves, twirl, lens…]Particle Systems [explosions, fireworks …]

Cascades + Native Gaming libraries

How? [https://github.com/rmadhavan/Cocos2dxIntegrated] Use Case: Running Cocos2dx in Cascades

1. Import Cocos2dx libraries.2. Modify Cocos2dx library to use a child window under Cascades’ Window

group.3. Modify Z-order of Cocos2dx window either behind (Z < 0) or in front (Z > 0)4. Build cocos2dx libraries.5. Create a new cascades project.6. Include Cocos2dx headers and libs to the cascades project.7. Create a ForeignWindowControl and bind cocos2dx game window8. Execute cocos2dx game loop in a new thread.9. If Cocos2dx is underlay, use cascades event to modify Scene.10. If Cocos2dx is overlay, use Cocos2dx event handling to modify Scene.

Q & A

Questions & Answers

29

Eric Harty Twitter: @Ebscer Email: [email protected] Site: http://news.ebscer.com/

Brian Scheirer Twitter: @BrianScheirer Site: http://bbcascades.com/

30

Be in touch

THANK YOU

JAM42Eric HartyBrian ScheirerMay 14-16, 2013