「技術メモ」カテゴリーアーカイブ

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

さまざまな商用ゲームで使用されている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. つづく

 

ボーンの設定(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

つづく

ボーンの設定(1)

3Dキャラクタにアニメーションをつけましょう

(参考情報)このモデルはAutodesk Character Generatorを使用して作成しています=>https://charactergenerator.autodesk.com/

まず,データを読み込んでください.データはこちらから(Chrome推奨)

  1. メニューセットリギングに変更し,(Maya2016からの機能)
    menyuset
  2. 人体を選択し,メニューバー>スケルトン>HumanIK を選択します.
    body2
  3. キャラクタコンソールキャラクタなしにし,スケルトンの作成をクリックしますbody3
  4. このままでは骨が見えませんので,シェーディング>X線表示を選択します.これによりシェーディング状態のままでもスケルトンの位置を把握しやすくなります
    sk8
  5. ヒエラルキーに作成されたCharactor1 _Referenceを選択し,全体を体の中心に移動させます
    body4
  6. つぎに背骨や首の位置を修正します
  7. それが終わったら次に左側の脚,腕,指を調整します.膝の部分は少し前にでるように調整
  8. 調整後,キャラクタコントロールのウィンドウへ移動し,プルダウンメニュー>編集>スケルトン>左>右へのミラーを選択.左の骨の位置が右側にもコピーされるbody5

つぎへ

 

Unity用のリアルな地形を取得する3

Unityを起動し,Gameobject>Light>Directional Light で光源を追加します.

ki16

 

Gameobject>3D Object>Terrain で地形を追加します

ki17

 

TerrainのInspectorを確認します.歯車のタブをクリックし,下部のImport Rawをクリック

ki18

 

Rawファイルを選択し読み込みます.読み込みのインスペクタは,Terrain SizeのX,Yは実際の地形の大きさ,Yは画面内の最高点の高さを入力しImportをクリック.

ki19

 

地形が作成されました.お疲れ様です.

ki20

 

この地形にテクスチャを塗ったり,木を生やしたりなどできます.

 

地形の編集についてはこちらを確認してみてください.

なお,国土地理院のデータについては,完全に自由に使用できるわけではありませんので,使用できる範囲について注意してください.

Unity用のリアルな地形を取得する2

Windowsの場合

基盤地図情報ビュアーをDLします.下記リンク先の下の方にあります.

http://fgd.gsi.go.jp/download/menu.php

起動し,新規プロジェクトを作成し,ダウンロードして(1度解凍された中にある)ZIPファイルをそのまま読み込みます.

ki7

 

設定>表示設定

ki9

 

DEM表示設定>連続段彩

ki8

 

設定を以下のように

ki11

 

以下のような標高画像となります(陰影があるとうまくいきません)

ki12

 

画像イメージの保存を選択し,書き出す範囲を選択します.高解像度のtiffが保存されます.

ki13

1ピクセルは5mのようですが,別のパタンでは4km=780ピクセルとなり,1ピクセルは5.1282mのようです.

Photoshopでトリミングします.正方形がベターです

画像を16bitに変換し,RGBからグレースケールに変換します.

解像度を2のべき乗+1にします.(512なら513,1024なら1025)

ki15

汎用フォーマットで保存します.設定は以下のように.

ki14

 

Unity用のリアルな地形を取得する1

国土地理院から公開されている地形を取得し,Unityで使用可能な地形に変換します.

 

国土地理院の基盤地図情報サイトへアクセスします

http://www.gsi.go.jp/kiban/

ダウンロードには会員になる必要がありますので,予め会員になっておきます.

ダウンロードファイル形式は数値標高モデルにします

ki2

5m =メッシュを選択

ki3

必要なエリアを選択します.

ki4

選択完了をクリック.

ki5

ダウンロードするファイルにチェックを入れ,まとめてダウンロードをクリックします.ログイン状態であればそのままダウンロードが始まります.

ki6

ダウンロードされたZIPファイルを解凍します.

Windowsの場合,解凍フォルダ内に別のZIPファイルがあります.これを解凍しないで使用します.

Macの場合,解凍フォルダ内にあるZIPフォルダを全て解凍します.

つづく

Unityでトゥーンシェーダ

なんだ,Wordpress動画いけるんやん.

UnityでToon Shaderです.

Mayaではこちら

Mayaと似ていて、MaterialのシェーダをToonにするというアプローチです.これ,良いのか悪いのか,,,そのMaterialを割り当てた物だけToonになるということは,全体をToonにするのはかなり手間がかかるんでは?とSIを懐かしむ。

ーー

UnityにEffectsパッケージを読み込みます.

Assets>Import Package >Effects

ut2

アセット内のStandard Assets内にEffects,その中にToonShadingが読み込まれたか確認します.

ut1

Materialを作成します.

Assets内で 右クリック>Create>Material

ut3

名前をtoon等に変更します.

ut7

InspectorのShaderを Tonn>Basic Outilineに変更します.

UT8

次に,ToonShader CubemapのテクスチャにToonLitを選択します.

ut9

Main ColorとOutiline Colorを変更し,このマテリアルをモデルにアサインします.

ut10

再生するとこんなかんじになります.

ut11

参考動画

【カスタマイズ】

奥は3階調,手前は4階調になっています.このようにカスタマイズすることも可能です.

ut13

まず,Photoshopで適当なグラ-デーションを作成します.

画像サイズは64×64ピクセルです

ut14

次にこの階調数を落としていきます.

イメージ>色調補正>ポスタリゼーション

UT15

できた画像を補正します.以下のようにしてみました.

ut16

Unityに読み込み,Texture Typeと,Mappingを変更します.

ut17

これをToonのマテリアルのToonShader Cubemapにアサインすれば独自の階調のToonが作成可能です.

Mayaでトゥーン

※Unityのトゥーンシェーダはこちら

Softimage(以下SI)の場合は,レンズシェーダやFxTreeでトゥーン表現をおこなったりましますが,Mayaの場合は個別のマテリアルっぽく使用するようです.

まず適当にモデルを配置します.

to1

 

レンダリングモードに変更,トゥーン>塗りつぶしシェーダの割り当て>シェーディングブライトネス2トーン をアサインします

TO2

 

アトリビュートエディタで色味を調整します

to3

 

次に,トゥーン>アウトラインの割り当て>新しいトゥーンアウトラインの割り当て を選択します.

to4

 

プロファイルカラーで線の色を変更できます.一時期のジブリが使用していたトレスラインのようにブラウンにしてみます.

to5

他のモデルにも同じ色を割り当てます.アウトラインは一度作成したラインがメニューバーに表示されますので,それを割り当てています.

to6

 

軽くレンダリングして例.オブジェクト同士が重なっている箇所のアウトラインがありません.

to7

 

そこで,アウトラインの設定に戻り,交差線にチェックをいれます.

to8

 

交差部分にもアウトラインが描かれました.

to9

 

少しチューニングした作例(下図)

to11

おつかれさまでした.