UE4授業3回目(2016/05/26) ビジュアルスクリプトのススメ c#プログラマがBluePrintを授業に選んだ理由

毎日のようにUE4関連の記事を書いていますが、仕事はUnityでアプリを作ることのほうが多いです

C#は2010年くらいから仕事で使っていたので、7年くらいになります
UE4を教えるよりC#とUnityの方が教えられることが多かったのですが、プログラムの授業としてBlueprintを授業に選択しました

自分の勉強のためというのもありますが、色々と理由があります
UE4 MeetupでLTをすることもあり、理由をまとめてみました

【目次】



スポンサードリンク

なんとか毎週書いています

C#プログラマがBlueprintを授業に選んだ理由"#"

image

選んだ理由を書きました

  1. プログラミングはレゴ化する
  2. プログラム教育の必修化で使われる「Sratch」
  3. すべてはノード化する(C#とBlueprintの比較)
  4. 新しい価値を生み出すことの重要性(パズドラ 5000円)
  5. すべてがフラット初体験(VRとファミコンが初体験)

Blueprintを選んだ理由は1~3になります

4,5については、授業を通してノード化するプログラム業界において後付けになります
4は授業をやりながらUE4を選んでよかったと思う理由になります
5は先週の授業で感じたことを追加しました

1. プログラムはレゴ化する"#"

image

見出しのタイトルでわかると思いますが、レゴを文章化しました

image

レゴです
一目瞭然という言葉がありますが、文章だと色々と考えてしまいます
画像にしてみるとレゴ以外なかなか思いつきません
 
image
ソースコードのプログラミングはレゴ1つ1つに対して説明が行われるようにプログラミングされます
関数、クラス、ライブラリ、フレームワークにすることによって、もっと簡単に説明することができます
 
image
ビジュアルスクリプトはレゴを積み重ねることで、家や飛行機を作ることができます
ビジュアルスクリプトではレゴ1個のことをノードと呼びます
ノードベースプログラミングといった呼ばれ方もします
今までは文章でしかプログラムができなかったのが、レゴを組み立てる感覚でプログラムをする事ができます
  
image

プログラミングが出来るレゴ「レゴ マインドストーム」があります
LEGO MINDSTORMS プログラミングの習得
https://www.lego.com/ja-jp/mindstorms/learn-to-program

ノードを組み合わせて、タブレットでプログラムをレゴに送信して動かすことができます
image

LEGO EducationといったLEGOを使ったプログラム学習についてのサイトも作成されています
プログラム教育でレゴが使われています
https://education.lego.com/ja-jp

今は親機がプログラムを動かすようにできていますが、
1つのレゴにプログラムが埋め込まれていて、組み合わせて動くというのもそう遠くはなさそうです
今流行りのIOT(Internet og Things:モノのインターネット)と呼ばれている分野になります

littleBitsというモジュールを組み合わせるガジェットもあります

プログラム教育の必修化で使われる「Sratch」"#"

image
ビジュアルスクリプトについてすごいなぁと思ったきっかけがあります

2012年にものづくりや電子工作の現状を論文にまとめる作業を行っていました
今となってはDMM.Makeなど有名な施設が出来ましたが、2011年に日本初のFabLabが筑波と鎌倉に誕生しました
見学会があったので筑波まで行ってきたときのことです

FPGA-CAFE/FabLab Tsukuba(茨城 つくば)
https://fabcross.jp/topics/fabnavi/20140523_fabnavi09.html

見学者の中に小学生がいたのですが、一緒に見学しに来た主婦(現・元プログラマ?)がプログラムを教えていました

主婦が子供にプログラムを教えるのと、近所に買い物に行くのとそんなに変わらないんだなぁ

見学者一同盛り上がっていました

image
その時に教えていたプログラム言語が「Scratch」でした

スクラッチもレゴを組み立てるように、1つ1つの機能を持ったノードを組み合わせることでプログラムすることができます
image

Scratch Overview

ゲームも作れますし、アルゴリズムの勉強もできます

The Sound of Sorting – Sorting Algorithms
https://scratch.mit.edu/projects/149793697/
image

作ったゲームもシェアすることができ、たくさんのゲームがアップされています
image
  
image
2016年に作成したUnityのアプリケーションでは、Midiの受信処理がUnityで実装できなかったので、VVVVを使って対応しました

VVVV
https://vvvv.org/

ビジュアルプログラミング(vvvv)を覚える
http://qiita.com/gansaibow/items/e179c20e2de5c5b601ee
未だに少しずつストックが増えています

画像はでMidiの処理を実装しようと思った時に必要なノードの実装になります
MidiNotesというノードを一つ使うだけで、Midiコントローラからのノート番号を取得することができます

image

2020年に小学校でプログラム教育の必修化されます
その時に使われるのがScratchです

2020年から小学校でプログラミング教育が必修化へ!今までの流れをまとめてみた【アンケート結果あり】
https://techacademy.jp/magazine/8525

image
2020年の時に小学校6年生が高卒で新社会人になった場合には、2027年にはビジュアルスクリプトで育ってきます
現在学習している子供もたくさんいるので、2023年くらいには既にいるかもしれません
筑波の小学生は5年生(2012)だったので、すでに高校1年生になっています

今教えている専門学生が来年卒業(2019)して、4年後には新人教育でビジュアルスクリプトで学習した新人を扱わないといけなくなります
今からビジュアルスクリプトを触って感覚を掴んでいないと、少し社会人になって仕事ができるようになったタイミングでビジュアルスクリプトを覚え始めないといけない将来が待っています
社会人になってから覚えるのは大変なので、学生のうちに触っておいたほうがいい

Unity C#ではなく、ビジュアルスクリプトであるUE4 Blueprintを選択した大きな理由になります

3. すべてはノード化する(C#とBlueprintの比較)"#"

2014年にUE4がサブスクリプション化されてすぐに映像作品でUE4を使うことになりました
当時本が出版されていなかったので、Youtubeをコマ送りして手順を確認したり、Answerhubに書かれていることを日本語翻訳しながら試行錯誤していました
C#プログラマとして1番困ったのは、C#で思い浮かぶコードがBlueprintに置き換えられないことでした
簡単な文法をC#からBlueprintに置き換えるということを最初の頃はやっていました

C#の基本的な構文をBlueprintに変換してみる

image

ソースコードに慣れている人ほど、Blueprintに変換するのが難しいです
理由としては、ソースコードの方が簡単だと思ってしまうからです
UE4はC++でプログラムを書く事もできるのですが、C#とC++だとかなり違うので一朝一夕にはC++使えばいいという発想にはなりません

image

Unity C#で足し算をif文で判定する処理です

int a = 5;  
int b = 6;  
int c = a + b;  

if(c == 11)  
{  
  Debug.Log("true");  
}  
else  
{  
  Debug.Log("false");  
}

image
Blurprintで実装すると図のようになります

image

ソースコードに慣れている人ほど、簡単な文法の図が思い浮かばないです

やっぱり、ソースコードの方が早いじゃん

こう思うのではないでしょうか

image

PCに接続しているMidiデバイスの名前を取得してください

さて、どうでしょう
Midiデバイスの名前ってどう取るのでしょうか?

大抵の人がわからないと思います
分かる人はDTMかVJをやっている人かMidiControlerを作成しているメーカーの人くらいなのではないでしょうか?

ノードの方がスゴイという例を出したかったのですが、そんなに変わらなくなってしまいました
ノードやライブラリを知っている人ほど強いです

image

ARをベースに技術の進化を見ていきましょう

  1. 研究
  2. ライブラリ化(OpenCV)
  3. フレームワーク(ARToolKit,Vuforia,SmartAR etc…)
  4. ノード(数年後にはARというノードになっているのではないでしょうか)

今までは、フレームワークを作っている人をプログラマと呼んでいました
これからは、たくさんあるノードを組み合わせるのが上手い人もプログラマと呼ぶようになると思います

4. 新しい価値を生み出すことの重要性(パズドラ 5000円)"#"

image

Puzzle Match 3 Template
https://www.unrealengine.com/marketplace/puzzle-match-3-template-game

動画を見てもらえればわかると思いますが、パズドラのパズルゲーム部分がBlueprintで作成されたアセットとして$49.99(2017/05/28 ¥5000)で販売されています

image
FlappyBirdというゲームがあります
簡単なルールの割に激ムズということで、一気に有名になりました
簡単なルールとシンプルなビジュアルだったのであっという間にクローンが出回りました
面白くて、人気になったゲームというのはリバースエンジニアリングされて、あっという間にクローンが出回ります

FlappyBird
https://flappybird.io/

UE4もサブスクリプション化された時に、Tappy Chicken というサンプルを公開していました
現在ラーニングタブから消えている?
https://wiki.unrealengine.com/Tappy_Chicken_Sample_Game

Clone BirdというUnityでの作り方を説明している動画リストもありました
https://www.youtube.com/watch?v=T7Nz_AulrrA&list=PLbghT7MmckI4Sazzc4bB3s6ZLIRbGrNyn

image
以前、新幹線について面白い話を聞きました

新幹線ってなんでしょうか?

思い浮かべるのは駅に到着している新幹線の絵だと思います
中国に行った時にも新幹線はありました

日本の新幹線ってなんでしょうか?

image
外国から来た人の日本の新幹線のイメージ図です

まず、時刻表どおりに新幹線が着くことが驚いたそうです
駅に着いたら、販売員が入れ替わったり、清掃して次の便が折り返されていく行き届いたサービスが実施されています

サービスも含めて、事故もなく、時刻表どおりに運行する それが日本の新幹線だ

その話を聞いた時に衝撃を受けました
 
image

5000円でパズドラが作れるといっても、ゲームの1部のロジックだけになります
新幹線と同様にパズドラを構成する様々な要素があります
パズドラをリバースエンジニアリングしたとしてもパズドラにはなりません

image

Infinity Blade Collection が無料で利用可能に
https://www.unrealengine.com/ja/blog/free-infinity-blade-collection-marketplace-release

ゲームタイトル1つ分のアセットが手に入ります

image

普段やっているゲームタイトルもどんどんノード化されてくるのではないでしょうか

パズドラのゲームロジック + Infinity Blade

これをポートフォリオに入れてきた学生をどのように現場は判断するのでしょうか
(まだ誰も「秒速でパズドラを作った」とは言ってきません)

また、ゲームロジック部分はBlurprintで書かれているので、パズドラのゲームロジックを勉強して、自分の作品に生かすこともできます

授業料って相当な額になります
授業料でアセットストアのアセットを買ってリバースエンジニアリングした方が正直すごい作品が出来ると思っています

『FFXV』インスパイアの中国産インディー『Lost Soul Aside』トレイラー映像
https://www.gamespark.jp/article/2016/08/01/67673.html

昨年この作品を見たときに、

こんな時代に何を教えたらいいかという疑問を持ちました

未だに答えが出ません

image

最近、UE4を選んでよかったなぁと思うのは、Epic Games CEO Tim Sweeney氏の考えが素晴らしかったからです

Tim Sweeney「ゲーム業界の未来? みんなをクリエイターにすることさ」
http://jp.gamesindustry.biz/article/1704/17041802/

【原文】Sweeney: “The future of the games industry? Make everyone a creator”
http://www.gamesindustry.biz/articles/2017-04-13-sweeney-the-future-of-the-games-industry-make-everyone-a-creator

引用

「Minecraftは1億人に行き渡っています。最初はプレイヤーですが,彼らのすべてがゲームデザインをし3Dシーンを作るコンテンツクリエイターになるのです。私はゲーム業界の未来とは,すべての人をクリエイターにすることだと思います」

引用

「YouTubeがすべての人をビデオクリエイターにし,Instagramがすべての人を写真家にしたように」とSweeney氏は語る。「我々はすべてのユーザーにこのようなものを作る力を与えなければなりません。なぜなら,未来のゲーム世界はどんなゲームデベロッパがすべてのものを作るのか予想できないくらい大きなものになりつつあるからです」

GithubでUnreal Engine4のソースが公開されていて、ゲームエンジンの中身を理解できるようになっています
有名タイトルのゲームロジックをリバースエンジニアリングしたり、Infinity BladeやRobo Recallのようなすでに完成された作品のアセットを使って、新しい価値観を生み出すことが出来るスタートラインが出来てきています

5. すべてがフラット初体験(VRとファミコンが初体験)"#"

image

先週の授業でVRとニンテンドウクラシックミニを持って行って生徒にプレイしてもらいました
ファミコンのゲームもVRのゲームも両方初体験で楽しんでいました

image
ゲーム機の進化を階段状にしてみました

  • 家庭用ゲーム機(ファミコン、スーパーファミコン)
  • 携帯ゲーム(ゲームボーイ(カラー))
  • 家庭用ゲーム機(3D・多様化) (PS,Wii)
  • スマートフォン(iPhone,Android)
  • VR・AR(Occlus,HTC、VIVE、PSVR、Vuforia)
  • MR(Holoscope)

image
30代くらいの人にとっては、ファミコンから順番に体験しています
階段を横から見ているので、下から積み上がっているように見えているのではないでしょうか

積み重ねが大事だ

若い人たちに教訓めいたことを言う事になります

ただ、昨年度から生徒に何度も言っているけどあまり伝わっている気がしません

image

生徒たちの世代になると、気づいたときにはモノがあるので、上から階段を見たようになります
彼らから見たら階段はグラデーションがある面積であって、体積の話をしても伝わらないのも何となく理解できました

image
歴史の授業が無くならないように、階段であることを認識してもらうことは大切だと思っています

文脈(context コンテキスト)

物事がどのように変化していったかを見ることで、今後何が起こるかといった法則性を見つけ出すことができます

予測が出来る = 準備ができる

ものすごい速さで技術が進歩していく中で、対応できるのはたくさんの経験則から時代の流れを読み取る力が必要だと日々試行錯誤しています

image

絵を描くのも、ツールの変化はあるものの、基本の機能は変わっていません

  • アナログ ; キャンバス、筆、絵具
  • デジタル : キャンバス、ブラシツール、カラー(RGB)

Photoshopにブラシツールがなければブーイングの嵐になるのではないでしょうか

未だにA,Bボタンや十字キーがなくならないのはちゃんとした理由があるのではないでしょうか

昔からの蓄積した本質的な部分に触れる機会は必要だと思っています

image
プログラミングの授業だからといって、プログラミングだけをさせるのではなく

  • 新・旧両方のゲームをプレイさせる
  • ゲームの歴史を解説したドキュメンタリを見せる

こういった要素も取り入れないと、プログラムは出来るが変化に対応できないようになってしまいます

ゲームするのも勉強だって先生に言われた

こういっていいよと言っています

【オススメのドキュメンタリー】
ドキュメンタリー映画「ビデオゲーム THE MOVIE」の予告編が公開。高橋名人,出演者の一人・小島監督のコメントも
http://www.4gamer.net/games/999/G999905/20150513011/

ビデオゲームの進化に迫るドキュメンタリー映画『ビデオゲーム THE MOVIE』 コメント&予告解禁!

Netflix,Huluで見られます

ただ、ブラシツールがないPhotoshopというのもあっても面白いのかもしれません
過去の歴史を学んでしまうことで、当たり前の回答しか出せなくなるというデメリットもあるかと思います
これからは、正解というのは何が正しいかという正確な答えはなくなっていくと思います

まとめ"#"

image
現在ではなく未来を予測した上で、C#ではなくBlurprintを教えることを選びました
以下、3点が選んだ理由になります

  • 未来はすぐにやってきます
  • 未来は作れる
  • 未来は予測できる?

3点目の予測できるかどうかというのは、正直ここ数年は予測できるかもしれませんが、5年10年後は予測できません

28歳以上の人たちほど、いまからビジュアルスクリプトに慣れておいたほうがいいということは伝えておきたいです

3回目授業(2017/05/26)"#"

1年生"#"

授業までに用意した資料・アセット"#"

4.16の正式リリースがあったので、少し授業内容が詰めきれませんでした

拡張可能なアセットを作ろう
http://denshikousakubu.com/2017/05/26/20170526_Create_RailingAndTilingAssets/

UE4 4.16 Built-in-cloth system
http://denshikousakubu.com/2017/05/25/20170525_PhysXAndAPEX/

UE4 Morph Targets Example Projectについて
http://denshikousakubu.com/2017/05/23/20170523_AboutMorphTargetsExampleProject/

UE4 案内板から考察する結合度の弱い再利用可能なアセット制作
http://denshikousakubu.com/2017/05/21/20170522_Asset_SinboardAndDegreeOfCoupling/

イベントについて説明するサンプルを作成

成果物として上がってきたレベルの考察"#"

またマネキンがスケールアップしていた

踏んだら玉が落ちてくるボタンが所々に散りばめられています
image

丁寧に作りこまれています
image

最後まで丁寧に作りこまれています
ゴール前をちゃんと作り込む生徒ほど完成度が高いレベルを作ってきます
image

コーンを使ってトライフォース
金色のコーンを使う生徒がなぜか増えていました
image

ファイアーマネキンになっていました
ジャンプで渡るところに回転する星があって渡りきるのがすごい難しかったです
image

浮かぶ螺旋階段
image

この世界観は才能を感じます
当たり前のことを教えて世界観を無くしてしまうのが惜しいです
このままもう少しゲーム性を取り込んで世界観を膨らませて欲しい
Photoshopにブラシツールがないのも面白いかもしれないと思ったのはこの作品があったからかもしれません
image

何かの儀式が行われていました
image

今回はマネキンの頭に草が生えていました
image

溶岩魔神
image

草に隠れて死んじゃうエリアがありました
image

5月が終わるにあたり、やる気がある生徒、やる気が少しなくなってきた生徒のバラつきが出てきました
復習や予習的なものはあまりしていない空気は感じつつ、授業中の取り組む姿勢で差が出てきたことを感じます
自由すぎてプレイするのも難しいゲームばかりなので、完成したレベルデザインを2,3渡した上で授業を進めたほうがいい気がします

ブループリントのサンプルのレベルを用意できたことで少しブループリントについて触れることが出来ました
ただ、要望が上がった生徒にのみ仕組みをハンズオンすることになってしまったので、事前準備をもっとしっかりしないと理解して実装まではいかないです
資料を印刷することの必要性を感じました

2年生"#"

VR Funhouseをプレイしてもらいました

NVIDIA VR Funhouse Available Now, Download For Free

Modもあるので、Modから実行して欲しかったのですが、準備不足でUE4からOculusで実行まではできませんでした
VRの授業の事前準備はなかなか難しいです
image

来週からは、少しずつUE4からOculusで確認できるようにしていきたいと思います

### 総括

4.16に夢中になってしまって準備が疎かになってしまった


スポンサードリンク