プログラミングしないでFPS風

UnityのAssetStoreにあるPlaymakerを使って「プログラミングしないでゲーム風のものを作る」その第2弾です。

その前に、、いつものお約束。プログラミングはできるにこしたことがありませんよ〜!数学もね!

さてUnityで超簡単なFPSの骨格を作ってみましょう。

FPSは映像業界にいるとFrame Per Second(1秒あたりのフレーム数)ですが,ゲームの世界でがFirst Person Shooting(一人称視点でのシューティング)のこと.

つまり

  • 一人称視点
  • 撃てる

が要件ですよね.

ということで,ボウリング的な物は5分くらいで作れます.

以下画像はリアルタイム時間で再生されます.

最初に板を置いたり,ピンを並べます。登場するピンにはPhysics(物理演算)を入れて10kgに設定しています.

そしてここからPlaymakerです。(1)カメラにMouseLook2をいれてマウスの方向をカメラが向くようにします.これで一人称視点完了.カメラがマウスの方向を動くようになります。

同じくカメラに別のPlaymakerを入れ,(2)マウスのボタンが上がったら,(3)弾を作成します.

作成した弾を変数に格納しますが,プルダウンメニューから変数が作成できます.これば便利.

そして(3)変数に格納された弾にローカルZ軸に90の加速度を入れボールを射出します.弾には複製可能なPrefabという設定したものを使います.

(4)マウスを押したときの処理で最初に戻しておしまい.

これだけですね.

わずか4工程です。しかもクリックしてただけ、、、

この程度であれば作るのは簡単です.

しかし、作り込んでいくと作成した弾を消す処理や,倒れたピンをどうやって数えるかを考えなくてはなりません.

今回の条件では,ボールに関しては「-y座標になったら消す」でかまいません.ですが,これが山あり谷ありの地形だったらどうします?高さ1000にいて、マイナスになるまではかなり時間がかかります。

さらにはどうやってピンが倒れたって検出すればいいですか?床に接触したら検知?いいえ,ピンが置かれている時すでに接触してるので使えませんね.ピンの角度を検出?それも1つの手段ですね.

もう一つあるとすれは衝突検知エリアを少し上にずらすという方法でしょう.

では,どうやって他のピンではなく床に当たったって検知しますか?つまり単に衝突判定しただけではダメってこと。

こういうふるまいのルールをことをアルゴリズムって言います.

さてこの場合に限っては,タグというものを使います.味方のタグ敵のタグ建物などのタグなどがあります.

当たり判定の要素にタグを使い,味方のタグには当たり判定をしない(傷つけない)ということができるんですね.

こうしたことは比較的簡単に設定できます.でもプログラミングを学びながらアルゴリズムまで考えるのは本当に大変です.

プログラミングはできるだけ楽をしてむしろストーリーや,世界観キャラクタユーザの操作性をどうアルゴリズムに活かすかに時間をかけてみませんか.

だんだんとPlaymakerに慣れてきたら、実際にコードを書いてみましょう。次に何をすればいいのか、参考にできるプログラミングをどんなキーワードで検索すればいいのか自然とわかるようになっているはずです。

Mayaのプロジェクト設定について(復習)

Mayaでのプロジェクト設定の方法です.

プロジェクトを新しく作成する場合

  1. ファイル>プロジェクトウィンドウ を選択092
  2. プロジェクトウィンドウが開きますので,
    (1)新規をクリック
    (2)プロジェクト名を半角英数字で入力
    (3)場所を設定
    (4)適用をクリック
    p02

以前使っていたプロジェクトを読み込む場合

以前使っていたプロジェクトを読み込む場合は,
(1)ファイル>プロジェクトの設定 を開き
(2)プロジェクトのフォルダを選択して
(3)設定ボタンをクリック
で完了です.

アニメーション基礎(5)

続いてIKの設定をしてみましょう.

先ほどまでのアニメーションは,ボーンの根元から先に向かって動かすFKでした.次に,ボーンの先(や先端)を動かすInverse Kinematics(以下IK)をおこないます.

  1. シェルフからIKハンドルの設定(下図の1)をクリックし,ボーンの先端をクリックし,ボーンの根元をクリックする
    fish10
  2. 下図のようになる
    fish11
  3. ボーンの先端に現れたIKハンドル(見た目はロケーター)を選択し移動させる
    fish12
  4. 下図のように曲がることを確認
    fish13
  5. このように,ボーンの先端(腕であれば指先)から動かすことをIKと呼びます.実際には人間などのアニメーションで多用される
  6. 先端のIKコントロールを選択し,IK/FKコントロールにチェックを入れ,IKブレンドを0.6くらいに変更してみましょう
    FISH14
  7. 泳ぐアニメーションが消えていたのですが,これでIK/FKを両方使用できるため,泳ぐ動きが戻ってくる
  8. IKハンドルにアニメーションを入れ,キュ〜ッポンッ!っと動くアニメーションを作成すること.下図はIKだけの動きを表示しています.
  9. 両方の動きと,左手へ移動する動きを細かく修正するなどして下図のようになる

 

お疲れ様でした.

アニメーション基礎(4)

ボーンにアニメーションを設定します.

この際,ボーンの動かし方には大きくわけて2種類ありますが,今回はボーンの根元から先に向かって動かしていくForward Kinematics(以下FK)である

  1. 2つめのボーンにY軸回転のアニメーションを作成する
  2. 1フレーム目は0度,10フレーム目で-25度,20フレーム目で0度,30フーレム目で25度,40フレーム目で0度を設定する
    fish6
  3. 0フレーム目と40フレーム目のキー(下図の1など)を選択し,リニアボタン(下図の2)を1度押すか,ハンドルを使い図のように直線に変更する.これで繰り返したときの不自然な動きが減る
    fish7
  4. 3本目のボーンにも同じアニメーションを設定すること.
  5. 動画のようなアニメーションになるはずです.ポイントとして,1本目のボーンはまだ動かさない
  6. つづいて,グラフエディタを表示させ,2本目のボーンを選択します
  7. 回転Yを選択し,グラフエディタのメニューバーから,カーブ>ポストインフィニティ>サイクル を選択します.グラフには変化があらわれません
    fish8
  8. 再生範囲を200までにし,再生します
    fish9
  9. 2本目のボーンのアニメーションが200フレームまで繰り返されています.こうした繰り返すアニメーションのことを「サイクルアニメーション」と呼びます.
  10. では3番目のボーンも同じようにサイクルアニメーションの設定をしてください.
  11. 次に,最初の骨を選択し泳いで前へ進むアニメーションを作成します
    fish15
  12. 魚が泳ぐようになりました

つづく

アニメーション基礎(3)

今日はボーンをいれてみましょう.

  1. まずこちらのファイルをダウンロードする(右クリックでリンク先を保存,などで)
  2. Mayaに移動し,ファイル>読み込み でダウンロードしたファイルを読み込む
  3. 画面上に魚の3Dモデルが表示される
  4. メニューセットをリギングに,シェルフもリギングにする※リギングはMaya2016で表示される
    fish1
  5. ボーンを作成してもよく見えるように,各ビューのメニューから,シェーディング>X線表示 を選択
    xray
  6. ジョイント作成ボタンをクリックし,ボーンを作成できる状態にする
    fish1
  7. 魚に骨を描きます.口の上あたりからクリックし,次に胴体の真ん中で,次に尾の付け根で,最後に尾の先でクリックする.この図では左から右にクリックしている
    fish2
  8. 次に,ボーンと3Dモデルと関連づけるバインドという作業をおこなう.ます.まず最初のボーンを選択(下図の1)するとボーン全てが選択する.そのままShiftキーを押しながら,魚の3Dモデルを選択(下図の2)するfish3
  9. 最後にシェルフのスキンのバインド(上図の3)をクリックする
  10. 見た目は何も変化がない.ところが選択を解除すると,ボーンに色がついている.これでバインドができたことを確認できる(下図)
    fish5
  11. 口の方向から2番目のボーンを選択し,Y軸回転を-25度くらいにしてみること
    fish4
  12. 魚の体がボーンにつれられて曲がりましす
  13. このように,3Dモデルとボーンを関連づけることで,有機的な動きをさせることが可能になる

(つづく

プログラミングしないでゲームを作る方法

さまざまな商用ゲームで使用されているUE4Unity

3Dゲームとかって,プログラミング大変だと思いませんか?

実はプログラミングしなくてもプログラムが組めちゃうんです!

UnityにはアセットストアでPlayMakerという,非常に強力なビジュアルプログラミングツールが販売されています.

ビジュアルプログラミングって,,そう,あのScratchと同じように,命令を線でつなぐことでプログラミングできてしまうのです.

しかもこれで作成したプログラムは,AdndroidiOSアプリにしてインストールしたり,販売したりすることも可能です.つまり,Scartchのような練習だけではなく「実際に仕事で使える」ツールなのです.

そしてなによりも素晴らしいのはプログラミング(実際のコード)を書く知識が自然に身につくのです.

例えばある動作をさせたいとき,その命令を知り,さらに実行するための準備が必要ですよね?

それがPlayMakerでトライ&エラーを繰り返しているうちに,コードに何が必要か分かるようになります!

なんだかスピード○ーニングみたいですが,プログラミングって動作のメカニズム(つまりアルゴリズム)が分からないとプログラムが書けません.でもそのプログラムはアルゴリズムがわからないとどの命令を使えばいいかわからない,,,結局自分は何をしたらいいかわからない,ので難しいと思っちゃう.で挫折するとなっちゃうわけです.

PlayMakerはどちらかというと文系向けのツールです.でもビジュアルプログラミングって今では工学系の会社でもでも使ってますよ〜(LabViewなど)

では「スペースキーを押すと上に移動する」というプログラムを組みましょう.

実際にコードを書くとすれば,

  • キー入力
  • 1秒間あたりの移動量をベクトルで計算
  • キーが上がったら処理から抜ける

,,,といった処理が必要ですが,これをPlayMakerでやってみると,(等速再生ですよ〜),

わずか2分30秒でできてしまいます.

しかも名前の入力以外にキーは打っていませんよね.そしてベクトルのベの字も出てきませんでした,

こちらは販売元の参考動画です.当たり判定の例.13分くらいを見てみましょう.

こちらはカギを取得するとドアが開く例.ダンジョンイベントに使えそうですね.

誰ですか?UE4では標準で搭載されているって突っ込み入れているのは.>https://docs.unrealengine.com/latest/JPN/Engine/Blueprints/index.html

はい.もちろんUE4で作ってもいいんですよ.

どうやって作るか.そんな部分をお客さんは評価しませんよね.アプリのセールス文に

「1行1行手入力でプログラミングしました」

って書いてあったら積極的に買いたくなりますか?

つまりプログラミングはなるべく「楽をして」,その時間をお客さんが楽しませることに力を注ぎませんか?

もちろんコードが書けるにこしたことはありません.是非PlayMakerを使い,プログラムの構造を分かった上でコーディングにチャレンジしてみてください.

アニメーション基礎(2)

アニメーションの細かい調整を行います.(2019更新)

  1. (編集対象)を選択し,ウィンドウ>アニメーションエディタ>グラフエディタを選択する
  2. グラフエディタでは,選択したオブジェクトの移動や回転の情報がグラフで示されている.
    fcurve
  3. グラフエディタの移動Yを選択します.画面が移動Yだけのグラフとなる
    ysele
  4. タイムスライダをドラッグすると,球の高さはこの緑のグラフによって変化されていることが分かる
  5. Yの頂点部分を選択し,詳細の値を3にします(左のボックスはフレーム番号,右のボックスが値)
    transY
  6. 0フレームと60フレーム目のポイントを選択し,図のような山型になるようにカーブを編集する
    curve6
  7. ポイントの選択がしづらい場合は,グラフエディタの選択>カーブの選択をオフにする
  8. カーブの編集をするには,まず移動ツールを選択する
    curve5
  9. ポイントのカーブを変更し,山型にする.※このカーブはAdobe Illustratorでおなじみのベジェカーブです
    curve3
  10. 動画のようにバウンスして見えるようになる
  11. このように,移動,回転,スケールの動きはこうしたカーブ(ファンクションカーブ,アニメーションカーブなどと呼ばれている)で制御できる.
  12. U字型のグラフの場合は
  13. このような動きになります
  14. ここまでの流れをまとめてみました

アニーメーション基礎(1)

簡単なアニメーションの入門です.

  1. 球と平面を作成する.大きさは自由に設定すること
    001
  2. 移動ツールで平面上に置く
    002
  3. タイムスライダを1フレーム目に移動させ,球を選び移動ツール(W)に切りかえる0032
  4. メニューセットをアニメーションにする
    toolset
  5. キー>キーの設定(S)を選択.キーフレームが記録される.又はSキーを押すkey
  6. つづいて,タイムスライダを30の位置に移動し,球を上の方へ移動させ,キーフレームを記録する
    004
  7. タイムスライダを60にして,球を平面の位置まで下げ,キーの設定をする
    005
  8. 再生速度を1倍速に設定する.右下のアニメーションプリファレンスをクリックし,図のように設定すること.特に再生スピードの項目をリアルタイムループ連続に.
    aniPre
  9. 再生ボタンをクリックする
    play
  10. 球が動く
  11. 再生範囲を設定し,ループ再生する範囲を決める
    animLoop
  12. その他にもプリミティブを出して動かしてみること.移動だけでなく回転,拡大縮小もアニメーションできるので試してみること
  13. このシーンを保存しましょう(〜2019までの旧バージョン記述:前回制作した椅子のシーンを開き,椅子のアニメーションを作成してみること.アニメーションは「上から落ちてきて,少し転がる」内容で)

  14. (参考)プレイブラストでの出力方法はこちらを参考に
  15. つづく

 

亀山市市立川崎小学校VR化プロジェクト

亀山市市立川崎小学校建て替え工事があると聞き、VR化の可能性について検討したいと考え設計事務所様にお願いをしてVR化をさせていただきました。

校長先生にも体験していただきました
年齢を確認させていただき、HMDでのVR体験が可能な方に体験していただいております。
VRの年齢条件を満たさない小学生であっても学校利用者(ステークホルダー)でるため、体験する権利があります。熟慮を重ねた結果、VR版とタブレット版を制作しました。短期間で2つのアプリを制作するのは大変ですが、様々な知見を得ることができました。
VR版スクリーンショット タップした位置にキャラクタが移動します。
VR版スクリーンショット

ボーンの設定(2)

    1. 髪の毛を一緒に動かすボーンを作成する.sideのビューで作業すること.
    2. Headのボーンの上に新たにボーンを追加します.ジョイント作成モードで,Headのボーンをクリックしてから,頭頂部をクリックします
      atama-bone
    3. joint1が作成される.必ずEnterキーで確定させること
    4. 次に,右目,左目用のjointを作成す
      leye1
    5. Hedaから目玉に向かってボーンを作成します
    6. ボーンの先端を移動させ,目玉の位置に一致させます
      leye2
    7. 右目も同様に作業します
    8. kaopartd
    9. ヒエラルキーのCharacter1_Referenceを選び,メニューバー>選択>階層 を選ぶ.これで下の階層の骨まで全て選択されたbody6
    10. さきほど作成したjoint1~3は選択を外す(映像メディア2を思い出す)
      unselect
    11. 次に,身体のモデル(この場合,H_DDS_MidRs)を追加選択する
      bodyselect
    12. 次にメニューバー>スキン>スキンのバインド□を選択します
      body7
    13. バインドの設定は以下のとおりとし,最後にスキンのバインドをクリックしますbindSettng
    14. 骨を選んで回転させます.体のモデルが骨に連動していることを確認する.確認後は取り消しを選択し元の位置にもどす
      body8
    15. l_wigを選択し,頭頂部のjoint1を選択し,編集>ペアレントを選択
      wig
    16. これで,首と髪の毛が一緒に動くようになる
      wig2
    17. 次に歯を2つ選び,同じく頭頂部にペアレント化しますteeths
    18. 目も同様に右目用,左目用のボーンへペアレント化する.右目の場合はm_R_gland(目頭),m_R_eye,m_R_transの3つですReye

      hedaComo

    19. Caharacotr1_refernceを選択し,HumanIKツールソースからコントロールリグを選択controlrig
    20. コントロールリグが作成されました.コントロールポイントを持って動かしてみましょう 次に進む
      body10

つづく