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

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

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