Breakout Game

これはGreg Pugh氏によって作成されたサンプルです.

これまでご覧の通り,Kwikはとても便利なツールです.絵本のアプリケーションの作成だけでなく,ゲームも作成することができます.これからBreakout-styleという種類の"Kwik Out"というゲームをコードを書かずに作成します.

BreakoutとはAtari社のゲームで,パドルを操作して球をブロックにぶつけて壊すというルールです.これから作るのは,球にKwikのlogoが記載され,ブロックがKwikの"K"でできています.また,Kのブロックを全て壊すまでに10秒の時間制限があります.

https://youtu.be/aHF404Rz1ws

以下のリンクからサンプルプロジェクトをダウンロードできます.

アートワーク

.psdファイルは 640 × 960です.iPhone向けのプロジェクトを作成できます.

ページ構成

ページの追加

page2.psdを開いて,add new pageを選択します.

page3.psdを開いて,add new pageを選択します.


Page 1 - タイトル

KwikパネルでstartBtnレイヤーを選択して,Interactions > Add Buttonをクリックします.startButtonと名前をつけて,Interactionの下のCommon > Go to Pageを選択してください.Go to Page propertiesで,Cross fade,0 seconds, Go to Nextを選択します.

  • startButton

    • Common > Go to Page

      • CrossFade
      • Next

Start Buttonは他のページに遷移させるものです.

スワイプでページが遷移する動作を無効

プレイヤーはパドルを端から端まで移動させる必要があるので,スワイプでページの遷移をしてしまう機能を無効にし,プレイ中にページが切り替わってしまうのを防ぐ必要があります.Kwikパネルで,Project and Pages > Project Propertiesに移動し,page swipeのチェックを外します.


Page 2 - ゲーム

これで最初の設定は完了したので,これからゲームの内容についての設定を行います.これから行いたいことのチェックリストを作成しましょう.

  • Playボタンを押したらゲームが開始してタイマーがスタートする.
  • タイマーが10秒カウントダウンしてカウントが終了したらPage 3に移動する.
  • 球が壁やパドル,ブロックにヒットした時にバウンドする.
  • パドルを端から端まで端から羽島で操作可能にする.
  • ボールがターゲットにぶつかった時に,スクリーンとシステムメモリから消去する.

まず初めに,いくつかの物理演算を追加する必要があります.Kwikパネルで,Physics > Enviroment propertiesをクリックしてください.gravityをxとyの両方とも0に,scaleを30,normalに設定してスクリーンの周りに壁を作ります.

  • Environment

    Hybridモードに設定されていることに気づくと思います.最後にはNormalに設定します.Hybridモードでは物理判定の範囲を確認できます.

    • Hybrid
    • Create virtual walls around the screen
      • Top, Left, Bottom, Right

オブジェクトに物理演算を追加しない限り,物理演算は発動しません.player,bullet(球)とターゲットレイヤー(moon,star,cloud,diamond)に物理演算を追加する必要があります.

  • player

    • Static
    • Density: 1, Friction:0, Bounce: 0
    • Rectangle
  • bullet

    • Static
    • Density: 0, Friction:0, Bounce: 1
    • Circle

      ユーザーがstartBtnをタッチした時に,球がStaticからDynamicに変化します.

各々のtargetsレイヤーの設定は,レイヤーを一複数選択することによって時間を節約できます。複数選択して、 Physics > Set body propertiesから以下の設定にしてください。

  • targets

    • Static
    • Density:1, Friction: 0, Bounce: 0
    • Rectangle

球とプレイヤーのインタラクションの追加

球に力(force)を追加する必要があります.bulletレイヤーを選択して,Kwikパネルで,Physics > Set force propertiesから以下の設定にしてください.

  • bullet force

    • Push
    • Add amount of force in X: 10, Y:-10

playerレイヤーを選択して,Interactions > Drag Objectを選択して以下のように設定してください.

  • player to be draggable

    • Allow drag in X axis between 0 and 960 px
    • Allow drag in Y axis btween 600 and 600 px
    • Bring to front while dragging

      球がターゲットを壊すようにプロパティを設定し,パドルをX軸でのみ動かせるように設定されました。


ターゲットと球の衝突

ターゲットと球が衝突した時に,非表示にする動作を設定する必要があります.Project and Pages > Actionsをクリックします。actionの名前をkillKと名付け,Commonの下からShow/Hideを選択します.以下の設定にします

  • Action

    • Common > Show/Hide star

これをmoon,cloud,diamondでも同様に設定します.コピー&ペーストを使用できます

  • ペースト時

    hide_moonと名前をつけます

    hide_moonを選択して開き,show\hide actionを編集します.

    moonレイヤーに変更します.

球がターゲットに衝突した時に画面とメモリから消えるように設定する必要があります.Physics > Set collisionsをクリックし,以下のようにcollisionを作成します

  • Collision

    • Main Body: bullet
    • Collision: star
    • Action: hide_star
    • Dispose on collision: Collided Body

      残りのターゲットでも同様の手順を繰り返します:

    • Main Body: bullet

    • Collisoin: moon
    • Action: hide_moon
    • Dispose on collision: Collided Body

球とプレーヤーの衝突

球とターゲットの衝突の設定が完了したら,次にプレーヤーが操作するパドルと球が衝突した時の操作の設定を行いましょう.Kwikパネルで,Project and Pages > Actionsをクリックします。playerBulletという名前で 新しいアクションを作成しましょう。

  • Action

    • Physics > Apply Force

      • Body: bullet
      • Add amount of force in X: 0, Y: -30

      PhysicsのApply Forceが利用されています。この設定によって球がパドルでバウンドして、ターゲットから離れるようになりました.

Kwikパネルに戻り,Physics > Set collisionsをクリックして,球とプレーヤーが衝突した時の設定を行います。

  • Collision

    • Main Body: bullet
    • Collision: player
    • Action: playBullet

球(bullet)とプレイヤー(player)が衝突したときに、playBulletが呼び出されます。


Play button & Timer

ここまでたくさんの設定を行ってきたので,一度要約しましょう.物理演算をターゲット,プレーヤーが操作するパドル,球に付加しました.球がターゲットにヒットした時に,ターゲットが消えて,パドルにヒットした時には,バウンドして跳ね返るようになりました.スクリーンの周りにボールが画面の外まで行かないようにするための仮想の壁があります.最後に,タイマーをスタート、Playボタンが押されたら球が動き出す、この2つの作業を行います.

Timer

Kwikパネルで,Project and Pages > ActionsからoverActionという名前で新しいアクションを作成します.Common > Go to Pageから以下の設定を行います。

  • Action

    • Common > Go to Page
      • Cross fade
      • wait 0 sec
      • Go to: page3

このアクションはpage 3に移動するものです.タイマーが0に達した時にこのアクションが呼び出されます.timeNumレイヤーをハイライトで表示し,Layers and Replacements > Countdown replacementから以下の設定を行ってください。

  • timeNum

    • time 10 sec
    • Starts: Wait request
    • Trigger action on complete: overAction

      10秒後にoverActionが呼び出されます。

これで全ての設定が完了しました.playBtnレイヤーをハイライト表示にして,Interacitons > Add Buttonをクリックします

playBtnと命名して,以下の通りにアクションを並べてください:

  • playBtn

    • Physics > Apply Force

      • Body: bullet
      • Add amount of force in X: 30, Y:-30
* Common > Show/Hide

    <img src="./img/break 0028.jpg" width=450 />

    * Hide playBtn

* Countdown > Play Countdown 

    <img src="./img/break 0029.jpg" width=300 />

    * Countdown:timerNum 

* Physics > BodyType

    <img src="./img/break 0029.jpg" width=300 />

    * Body: bullet
    * Type: Dynamic

        <img src="./img/break 0034.jpg" width=300 />

Page 3 - ゲームをリトライするページ

これでゲームを遊ぶ準備が完了しました...しかしちょっと待ってください,これではpage3に遷移した時にゲームをリプレイする方法がありません.page3.psdでretryBtnレイヤーを選択し,Interactions > Add Buttonから Common > Go to Pageで以下のように設定を行ってください.これで問題ありません:

  • retryBtn

    • Common > Go to Page
      • Cross fade
      • Go to: page2

これで,Breakout-styleのゲームをコードを1行も書かずに作ることができました!

これからさらに?

これは簡単なbreakout-styleのゲームの例です.さらにスコアリングするシステムの追加や,難易度の設定,ターゲットが動くなど,様々な機能をKwikの機能を使って追加することができるでしょう.

results matching ""

    No results matching ""