Blog


ボールをキャラクターの位置から飛ばす

プレイヤーは上下に動きますがボールの初期位置はずっと一定のままです。

C#コードからボールの初期位置を変更しましょう。

VisualStudioからMainPage.xamlを開いて、XAMLを見ましょう。

MainPage.xamlの中から、Storyboard名がballStoryboardのStoryboardタグを見つけましょう。

 

たくさんのDoubleAnimationUsingKeyFramesタグがありますが、

Storyboard.TargetProperty=”(Canvas.Top)”

となっているDoubleAnimationUsingKeyFramesタグ内の

EasingDoubleKeyFrameタグに、

 

を追加しましょう。

 

これができたら、MainPage.xaml.csを開きます。

前回作った「button_kick」ボタンのClickイベントを変更します。

button_kick_Clickメソッドを

 

このように変更します。

 

Canvas.GetTop(img_player)でプレイヤーの現在のY座標を取得することができます。

それを先ほど設定したEasingDoubleKeyFrameタグのValue値に設定することボールの初期位置をプレイヤーの位置に設定しています。

つまりボールのアニメーションの0秒時のY座標のキーフレームをC#のコードからキャラクターのY座標に設定しているということです。

 

これで実行してみると、UpボタンやDownボタンでキャラクターを動かしたとしても、Kickボタンを押した時にボールはキャラクターの座標からゴールに向かって発射するようにすることが出来ました。

18

 

 




ボールを飛ばすアニメーションをつける

ボールを蹴る動作をしたとき、このゲームではボールが右から左にアニメーションをする必要があります。

Windowsストアアプリでアニメーションを使う場合はBlendを使うのでソリューションエクスプローラーからプロジェクト名を右クリック→Blendで開くを押しましょう。

1

Blendを起動することができたら、MainPage.xamlを開きましょう。

まず、ボールをドラッグ&ドロップしてプレイヤーの前方まで持っていきます。

2

 

続いてこのボールをアニメーションして右から左に動かしましょう。

BlendでのアニメーションはStoryboardという機能を使うのでStoryboardを開きましょう。

「オブジェクトとタイムライン」ウインドウの「+」マークのボタンを押してStoryboardを新規作成します。

 

 

3

 

Storyboardの名前は「ballStoryboard」にしましょう。

入力できたらOKを押します。

4

 

まず0秒時のキーフレームを保存します。

黄色いバーを0の位置にある状態で下図の赤丸のボタンを押しましょう。

 

 

 

5

 

 

次に黄色いバーを1の位置までドラッグ&ドロップしましょう。

6

 

黄色いバーを1秒に合わせた状態で、「プロパティ」ウインドウの「レイアウト」項目から

Leftを0に、Topを290にしましょう。

(この場合はTopは値を変更するだけで大丈夫です)

 

13

 

続いて「プロパティ」ウインドウの下図の赤丸の部分を押して、回転状態を変更しましょう。

 

8

 

角度のテキストボックスに360と入力しましょう。

9

 

この状態で「オブジェクトとタイムライン」ウインドウの再生ボタンを押しましょう。

10

 

ボールが右から左に回転しながら動いたら成功です。

ボールが動くことを確認できたらストーリーボードを閉じましょう。

「オブジェクトとタイムライン」ウインドウの「✕」ボタンを押して閉じます。

12

 

続いてVisualStudioを開きます。

MainPage.xamlを開き、「ツールボックス」ウインドウからButtonコントロールを画面にドラッグ&ドロップしましょう。

 

15

 

「プロパティ」ウインドウから名前プロパティを「button_kick」に、Contentプロパティを「Kick」にしましょう。

 

16

 

プロパティ設定ができたら先ほど設置したKickボタンをダブルクリックしましょう。

生成されたClickイベントの中身をこのようにします。

 

これでKickボタンを押した時にボールが右から左に発射されるようになりました。

17




ボタン入力でプレイヤーを動かす

ゲームというものはユーザーが入力を行えてこそ楽しめるものです。 XAMLのButtonコントロールというものをつかってキャラクターを上下に動かしてみましょう。   ツールボックスからButtonコントロールをCanvasにドラッグ&ドロップします。

1

キャラクターを上に移動するためのボタンと、キャラクターを下に移動させるためのボタンの2つを用意します。

2

2つのボタンには名前をつけましょう。 XamlからButtonのNameプロパティもしくはプロパティウインドウから[名前]の部分を変更しましょう。

今回は上に向かうキーの名前を「buttonUp」に 下に向かうキーの名前を「buttonDown」に設定しました。

6

できたらボタンをダブルクリックもしくは雷のようなマークを押してイベント一覧から、Clickイベントの右のテキストボックスをダブルクリックしましょう。

4

こうすると、C#のコードでボタンのClickイベントを受け取ることができます。 これを2つのボタンどちらにもしましょう。

ここまでのXAMLはこんな感じ

3

できたら、コードビハインド側です。 Clickイベントはこのようにしました。

 

CanvasのSetTopメソッドでコントロールの位置を設定できます。 今回はプレイヤー側のキャラクターであるimg_playerという名前のImageコントロールの座標を操作しました。

ここまでできると、ボタンをおすとキャラクターが上下にうごくはずです。

5




キャラクターを動かすVisualStudio編

前回、Blendというツールを使ってStoryboardを作りました。

次に、VisualStudioに戻ってC#からStoryboardを呼び出して、アニメーション開始する必要があります。

 

まず、BlendからVisualStudioに戻るとこのようなダイアログが表示されます。

VisualStudioで開いていたプロジェクトをBlendで編集したがVisualStudioで再読み込みするかどうかを聞いているので

[はい]を選択します。

1

 

 

続いてページが読み込まれた時に発生するイベントをC#で受け取りたい

(ページが読み込まれた時にC#のコードを実行したい)

のでPageのLoadedイベントを受け取るコードを作成します。

 

まず、XAMLから一番上のPageタグを選択

2

 

 

プロパティウインドウを表示し、雷のようなマークをクリックします。

 

3

 

 

ここに表示されているものがすべてPageコントロールで受け取ることができるイベントなので、

Loadedイベントを受け取るためにLoadedの右にあるテキストボックスをダブルクリックしましょう。

4

 

 

 

MainPage.xaml.csが開かれ、page_Loadedというメソッドが自動生成されました。

 

 

5

 

 

以上により、MainPage.xamlが読み込まれた時、このメソッド内が実行されるようになりました。

ではこのpage_Loadedメソッド内に以下の文を追加しましょう。

 

そして、MainPage,xaml.cs上部分にusing文でWindows.UI.Xaml.Animationを追加しましょう。

 

 

全体としてはこのようになります。

6

 

ここまでできたらデバッグを開始してみましょう。

キャラクターが上下に動きました。

7

 

 

 




キャラクターを動かすBlend編

キャラクターをアニメーションしながら動かしましょう。

キャラクターはXAMLのImageコントロールで表示されていますが、XAMLでコントロールのアニメーションを行う場合

Storyboardという機能を使います。

StoryboardはKeyframeという単位で指定した状態の間をアニメーションによる補完をしたりなどをする機能ですが、

すべてXAMLのタグで記述されます。

2

 

このXAMLを一から手書きするのは難しいのでBlendというツールを使います。

Blendとは、XAMLによるUIデザインを簡単化するためのツールです。

3

 

VisualStudio2013 Express for Windowsをインストールしているなら同時にインストールされています。

このツールをつかって、キャラクターであるImageコントロールを動かしましょう。

 

ソリューションエクスプローラから、プロジェクト名を右クリック→[Blendで開く]を押します。

 

1

 

 

 

 

先ほどまで開いていたプロジェクトをBlendで開くことができました。

 

 

4

 

 

ここから、Storyboardを作っていきます。

左下に[オブジェクトとタイムライン]というウインドウがあるので

(無い場合はメニューバーの[ウインドウ]→[オブジェクトとタイムライン]にチェックを入れましょう)

「+」ボタンを押します。

5

 

 

「+」ボタンを押すとStoryboardの名前を入力する画面が表示されるので

「keeperStoryboard」と入力し、[OK]を押しましょう。

6

 

 

赤枠が表示され、keeperStoryboardタイムライン 記録オンと表示されました。

この状態の時は、すべてのコントロールの変更が時間軸的にStoryboardに記録されていくので

アニメーションしたいコントロールだけ変更しましょう。

 

7

 

 

オブジェクトとタイムラインウインドウの黄色いバーがあるところを見てください。

ここが時間軸的なタイムラインで、黄色いバーが現在の時間です。

黄色いバーを移動→コントロールの状態を変化→キーフレームを保存する

がアニメーションの一連の流れとなります。

まずは00:00:000のキーフレームを保存しましょう。

img_keeperと名前をつけたImageコントロールを選択し、下図の赤丸のボタンを押します。

 

 

8

 

img_keeperの右に丸がついて、キーフレームを保存することができました。

つまり、00:00:000ではimg_keeperはこの状態であるということを保存できました。

 

9

 

 

では黄色いバーの三角を右向きに00:01:000までドラッグしましょう。

 

10

1と表示されているところが1秒後となります。

 

 

 

11

 

 

 

黄色いバーを1までドラッグしたら、プロパティウインドウからレイアウト項目のTopを「700」にしましょう。

 

1

 

これで、00:00:000の状態から、00:01:000秒後ではImageコントロールはY座標700の位置にあると定義することができました。

 

続いて、黄色いバーを00:02:00までドラッグします。

13

 

黄色いバーを2まで持って行ったら、Topを10に変更しましょう。

2

 

これで00:02:000秒後には一番上にいることになります。

 

最後に00:03:000のところまで黄色いバーを持って行きます。

15

 

Topを290に設定しましょう。

 

3

 

これで、

0秒後には真ん中、1秒後には下、2秒後には一番上、3秒後には最初の位置に戻る

というStoryboardを定義することができました。

実際にどのようにアニメーションが行われるか試してみましょう。

 

オブジェクトとタイムラインウインドウの再生ボタンを押します。

 

 

17

 

 

左側のキャラクターが動いたと思います。

このようにStoryboardでは数秒後のコントロールの状態を指定するだけでその間のアニメーションを補完するという機能があります。

 

キャラクターが動いているのが確認できたらオブジェクトとタイムラインの「✕」ボタンを押して、Storyboardを閉じましょう。

18

 

 

ここまでできたら

[ファイル]→[すべてを保存]

でプロジェクトを保存しましょう。