Pythonの勉強会(入門編)の事例紹介 ―― アプローチを変えてみる

特にこういった方によんでいただけたら・・・

今回のブログは主に次のような方に向けて、Python の社内勉強会を開催した事例を紹介します。

  • Python に興味があって学習したいと考えているが何から手をつけてよいかわからない
  • Python などプログラミング言語の勉強会をこれから開こうと考えている
  • TA(テクニカルアーティスト)やスクリプターなどに Python の使い手をもっと増やしたいと考えている

プログラミング言語を学ぶ側と教える側、両方の方にとって何か少しでもヒントになれば幸いです。

 

今回のブログで伝えたいこと

Pythonの勉強会(全4講演を予定)の入門編である第1回目の講演について予想以上に盛況となった自身の成功体験から得た知見を最初に共有させていただきます。

  • プログラミング(Python)を学びたいと思っているオトナでかつプログラミング経験ゼロないし初心者に対する入門としてはビジュアルプログラミング作業分解が教材としては有効である
  • いきなりPythonに手をつけることは一旦我慢して、まずはプログラミングの基本(順次処理条件分岐繰り返し)を学ぶことが近道である
  • 先にたっぷり自信をつけた上で少し困難なことにチャレンジして成功体験を得られるサイクルになるようになるべく交通整理することで挫折せず継続できる

 

それではPythonを学びたい方、教えたい方への入門の参考教材として、
勉強会当日の内容についてご紹介しようと思います。

第1回目の勉強会の内容とは

当日はワークショップ形式にて開催しました。ワークショップ形式にすることで、

  • グループ内での協力
  • 発想の違いの発見
  • 安心感の向上
  • チームメンバを意識することで集中力の向上

などの効果を期待して設定しました。

またパソコンは使わずに、運営側で鉛筆とプログラムを書くための用紙を準備して、手ぶらでも参加できるようにしました。

 用紙イメージ
f:id:sgtech:20200426204520p:plain

時間の使い方としては、

  • 事前説明に5分
  • 順次処理の学びに30分(ビジュアルプログラミング)
  • 順次処理+条件分岐+繰り返しの学びに25分(作業分解)

で設定しました。

順次処理の学びについて

最初はビジュアルプログラミングを通して、順次処理だけに集中して学んでいただきました。
ここでは、

  • 「自分はできるんだ」
  • 「プログラミングって想像してたより簡単かも」

などといった、自分に自信をつけていただくことが最大の目的です。後半の作業分解の課題の難易度が1段上がることがわかっているため、ここでどの程度自信をつけていただくかによって、後半の課題に対する印象がガラッと変わります。

あともう1つ大事な目的があります。それはプログラミングすることで課題を解決する力を高めることです。

 

教材としては、コマンドをつかってキャラクタを操作して宝箱まで導くといったプログラミングのアナログ的なゲームを準備しました。

それでは、コマンドから見ていきましょう。

コマンドの紹介

キャラクタは各コマンドの内容にしたがって動かすことができます。 

コマンド(記号) コマンドの内容

f:id:sgtech:20200426204457p:plain

向いている方向に1マス進む

f:id:sgtech:20200426204501p:plain

時計回りに90度回転

f:id:sgtech:20200426204505p:plain

反時計回りに90度回転

コマンド3つを理解したところで早速課題に移りたいと思います。

 課題その1

下図の青いキャラクタを先ほど学んだコマンドをつかって宝箱まで到着できれば、課題クリアです。参加者にはプログラムを書く用紙の縦1行を使って、コマンドを鉛筆で書き足してプログラムを完成させていただきます。

正解はたくさんあります。正解の1例としては、下図右側の「プログラム例」をご覧ください。

f:id:sgtech:20200426204509p:plain



またこの課題その1において難易度をあげたければ、以下のような条件を加えてあげましょう。

  • 課題その1-A:コマンド(どれでも構わない)を9つぴったり使って宝箱まで導いてください
  • 課題その2-B:3種類すべてのコマンドを使って宝箱まで導いてください
 課題その2

新しいルールとして「岩」を追加します。岩のあるマスはキャラクタは通ることができません。課題クリアの条件は課題その1と同じですが、参加者は岩をうまく避ける形でプログラムを作成する必要があります。ルールを追加することで課題の難易度をバランスよくあげていきます。

こちらも正解はたくさんあります。正解の1例としては、下図右側の「プログラム例」をご覧ください。

f:id:sgtech:20200426204514p:plain

マスを増やしたり、岩の位置や数を変える(必ず宝箱には到達できる並びにしました。)ことで、難易度を調整することもできます。その場合はよりプログラムが複雑になり、コマンドを書き込む枠を増やす必要があるかもしれません。

ぷちエピソード

勉強会当日、道を岩で完全に塞ぐように配置して宝箱への道を絶ったあとに参加者の皆様に「この場合、どういうプログラムを書けば、宝箱まで到達できますか」と無茶ぶりな質問をしてみました。

すると1人の優秀な方が、「マスの外は歩けないというルールは聞いてないので、マスの外に出て迂回して移動するようにコマンドを書けば良いと思います」という異次元の回答を出してくれました。

f:id:sgtech:20200426204524p:plain



「とっても素晴らしい正解です!」と賞賛させていただきました。

回答者の方が一枚上手でした。

わたしはまだまだプログラマとして、ルールの詰めの部分で修行が足りていなかったというわけです。。。

プログラミングの世界ではこういったルール抜け、欠陥のことをバグといいます。バグによってこちらが意図しないような想定外の問題を引き起こします。

色々な状況や問題を事前にすべてもれなく想像できるようになれることが最高です。

 

このブログを今よんでくださっているあなたも時間が許すようなら鉛筆と紙を準備して、今回の課題のプログラムをご自分の手で書いてみてください。

プログラミングと聞くとパソコンで何か作業をするイメージがとても強いですが、実はそうではないことがわかっていただけたのではないでしょうか。

順次処理がどういったものかイメージはつかめたでしょうか?

プログラミングって意外とカンタンではありませんか?

今回、記号(絵)を使ってプログラムを書きましたが、絵や図を用いるプログラミングを ビジュアルプログラミング といいます。ビジュアルプログラミングとして有名なものとして「ScratchJr(スクラッチジュニア)」、「Scratch(スクラッチ)」などがあります。無料のアプリケーションですので気になる方は調べて触ってみてください。

ちなみにPythonはというと、文字や数字、また記号を用いるプログラミングで テキストプログラミング といいます。


前半は以上となります。

順次処理に加えて、繰り返し、条件分岐の学び

後半では作業分解を行うことで、プログラミングの三種の神器である

  • 順次処理(シーケンスともいいます)
  • 繰り返し(ループともいいます)
  • 条件分岐

について学んでいただきました。

どんな作業でもこの3つを駆使すれば再現できます。

では、当日準備した教材についてご紹介します。

カレー作りの工程を作業分解して学ぶ

まずはカレー作りの工程の例をあげて、「作業分解する」ということがどんな感じなのか学んでいただきました。

わたしなりにカレー作りの工程を作業分解したものがこちらになります。

  1. 野菜の皮をむいて野菜やお肉を一口大に切る
  2. 野菜やお肉を油で炒めて鍋に入れて水を足す
  3. 煮込む
  4. 野菜がやわらかくなったか?
    Yesなら5へ、Noなら3へ
  5. ルゥを溶かして煮込む
  6. カレー完成(※作業ではないですがわかりやすくするために)

f:id:sgtech:20200426204528p:plain

基本的には1から順に行う順次処理となりますが、ポイントは4の作業です。
野菜がやわらかいのかそうでないかでその後の進むべき道が枝分かれすることが条件分岐の考えです。
そして「野菜がやわらかくなる」という条件が満たされるまでひたすら3→4→3→4→…を繰り返して野菜を煮込み続けることが繰り返しの考えです。

几帳面な方だと、3と4の間にアクをとる作業を追加で入れたりするかもしれません。

また人によっては2と3の間に隠し調味料を入れる作業を追加するかもしれませんし、野菜を水で洗ってないことには気づきましたか。あなたならどこに追加しますか?

「作業分解する」ことについて、なんとなくイメージは掴んでいただけましたでしょうか。

 

次は参加者に日頃よく行っているあることについて、実際に作業分解を行っていただきました。

お題は「洗濯」

当日はグループごとにメンバ全員で相談し合って「洗濯」の作業を分解していただきました。

複数人で考えることで、他のメンバの考えを聞いて何か発見があったり、あと前半よりも難易度が上がっている点にみんなで考えれば怖くないといったことなどに期待しました。

また自由に想像・発想してほしかったこともあって、あえてこちらからは条件はつけずに、どういう設定でどこまで細かく分解するかも含めて考えていただきました。

当日の回答を少しだけ

参考に勉強会当日に、あるグループが作成した洗濯の作業分解の回答を1つだけのせておきます。

f:id:sgtech:20200426204532p:plain



条件分岐と繰り返しをちゃんと理解して使っていることがわかります。
今回紹介した回答はブログで掲載するためにぱっとみてわかりやすいものを選びましたが、他の回答ではもっと複雑に作業分解されているものも多くあったり、どのグループも理解力の高さに驚かされるものがたくさんありました。
たまたま賢い方ばかりが勉強会に参加されていた可能性も十分に考えられます。

あなたが日頃無意識に行っている洗濯ではどういう手順で行ってますか?試しに書き出してみると、意外と色々なことを行っている自分(人)の優秀さに気づくかもしれません。

もしロボット(コンピュータ)に洗濯させるとなると一から十まですべて手とり足とり教えてあげないといけません。

 

以上が勉強会の内容となります。

日頃の業務において何か改善したいと思ったときに、どういう手順でどの作業を行って解決するか、その一連の流れを考えることがとても大事です。作業分解を実際に行うことで、この課題を解決するための力、すなわちプログラミング能力を高めることが大いに期待できます。

講師としての成功体験とは

Pythonの勉強会の講師を行っての成功体験をいくつかご紹介しようと思います。

  • 参加人数110人は過去最高を記録
  • アンケート結果がおおむね良好で、特に講演の理解についてはアンケート結果的に全員理解できた様子なのでわたし自身の目標としていた脱落者0についてはおそらく達成できた
  • アンケートの所感欄でも非常にポジティブな所感を多くよせていただいた
実際のアンケート結果

設問:当セッションの内容は如何でしたか?
f:id:sgtech:20200426204535p:plain

設問:講演の内容は理解できましたか?
f:id:sgtech:20200426204542p:plain

設問:講演は今後の業務に役に立ちそうですか?
f:id:sgtech:20200426204546p:plain

印象に残る所感として

60個程度の勉強会に対する所感をいただきましたが、どの所感もわたしにとってはありがたい内容ばかりで、その中でも特に印象に残るものをピックアップしました。 

  • グループの方と交流しながらできたのは楽しかったです。プログラミングへの難しそうという意識がなくなった気がします。

  • ムズカシいのを覚悟していたのですが、非常に楽しく参加できました!

  • 分かりやすかった。プログラミングに対する恐怖感が減った気がした

  • プログラミングに苦手意識があったので、絵を使った導入で、これなら自分でも続けられるかも・・・?と思いました。Pyson使える様になればよいな・・・最後ちょっと慌ただしかったかも?

  • プログラミングをしたことがなかったので、理解できるのか不安でしたが、理解することができました。ありがとうございます。

以上の所感からは参加者の中にはやはり苦手意識や不安などをお持ちの方がそれなりにいらっしゃって、そういった方がプログラミングに対して自信を持ってくれたことが自分としては一番の成功体験でした。

また「次回も楽しみ」といった次への前向きな所感も数多くよせていただいたことも講演者としては非常にありがたく、第2回目への準備にもさらに力が入るきっかけを与えてくれました。

 勉強会あとの反響として

今回はまだ第1回目ということもあって反響は少ないものの、資料に関するお問い合わせがあったり、別のグループ会社様からプログラミングの勉強会に関する相談の打ち合わせをさせていただいたりしました。とにかく評判がよかったことだけは確かなようです。 

そういえば。 Python勉強会の開催のキッカケについて

わたしがPythonの勉強会を企画するきっかけを与えてくださったのは何名かのTA(テクニカルアーティスト)の方の以下の声を拾ったからでした。
(声をあげていただいたTAの皆様にはこの場をお借りして心よりお礼申し上げます。)

  • TAをもっと増やしたい
  • Python使いを増やしたい

Pythonの勉強会を開くにしても、ふたをあけてみて需要がなければ開催の意味がないので先に本当に需要があるのかどうか裏をとるために各部デザインセクションのマネージャの皆様のご協力の元で、グループ内のデザイナーの方へのアンケート調査を行いました。
するとアンケート結果から、

  • Pythonの勉強会に参加したい割合は確かに多い(90%)
  • Pythonを触ったことがないもしくは少ししか触ったことがない方の割合が多い(76%)

という非常に興味深い傾向がわかりました。

今回のPythonの勉強会はまさにこの約76%をターゲットにした内容になっています。

またプログラミングの入門から行うのであれば、デザイナーだけに職種を絞る必要はないことなどから職種は問わないように最終的に変更しました。

職種を絞らなかったことが、結果的に参加人数100人を超える勉強会につながりました。
(アンケート結果:デザイナー62%、それ以外の業種38%)

最後はこのブログの「オチ」をあてようのコーナー

最後はこのブログのオチをあてようのコーナーです。

すでに過去のセガの技術ブログに足を運んでいただいた方や、他の企業様のエンジニアブログなどをよくご覧になっている方なら、すでにこのブログのオチがかんたんに予測できているのではないでしょうか?

まだオチがわからない方は、いくつか過去のブログをチェックしてみてください。この記事や、この記事や、この記事などにヒントが隠されてます。

そのまま行って帰ってこない可能性ももちろんありますが、そういったオチも正解の1つだと思います。

 
弊社ではPython勉強会以外にも、月例の勉強会としてグループ内の色々な立場の方が講師を行ってくださっています。社外からゲスト講師をお招きしてすることもあります。また月例の勉強会以外にも SDC各種イベント(GDCやCEDEC)の報告会、プロジェクト内の勉強会などグループ内には多種多様な勉強会があります。

弊社では、勉強会などを通じて自他共栄を行える人を求めています。

みんなで共に成長して感動体験をたくさん創造しあえたら幸いです。(開発技術部 菊川) 

www.sega.co.jp

©SEGA

スケジュール作成をもっと簡単に。内製アプリケーション「ScheduleCanvas」

早速ですが皆さん。

プロジェクトの計画を立てるとき、スケジュールの作成が面倒だと感じたことはありませんか?

汎用的なExcel等のツールを使って作成すると、まずは管理するためにフォーマットを決めなければならず、途中でのタスクの入れ替えやパスの変更はなかなか容易ではありません。

市販のツールを使おうにもただ試すだけにはハードルが高すぎたり・・・。

そういった悩みを解消するために社内開発に踏み切ったのが、内製アプリケーション「ScheduleCanvas(スケジュールキャンバス)」です。

f:id:sgtech:20200206212358p:plain

今回のBlogではこのツールの仕様と、スケジュール作成がどう変わったのかを紹介するとともに、ツール実装におけるノウハウの一部を少しだけ紹介します。

今回このブログを担当するのは、セガゲームス 第3事業部 第3開発2部 テクニカルサポートセクションの麓です。

まずは私からScheduleCanvasとはどんなアプリケーションなのかなど説明していきたいと思います。

ScheduleCanvasってどんなツールなの?

単体で使用できるアプリケーション

このツール開発は、スケジュール表の作成、タスクの入れ替えをExcelから脱却し、煩雑なフォーマットを統一するためにスタートしました。

また、WebサービスやDBを社内向けに作ってしまうと、外部協力会社との連携のときの障壁が多かったことと、とりあえずアプリケーションを作ってみることでどこまで効果があるのかを見てみるには大きなシステムは向かないということで、単体で動くexe、アプリケーションとして開発されました。

f:id:sgtech:20200206212540p:plain

アイコン

ガントチャートと各リストで構成

画面要素はガントチャートをベースにそこに表示されるデータがリスト形式になっています。

ガントチャートによって、スケジュールの可視化ができ、マウス操作を充実させることで、簡単にタスクの入れ替えや調整ができるように作られています。

主な動作をいくつか紹介します。

タスクの作成

f:id:sgtech:20200206213605g:plain



タスクをガントチャート上で簡単に登録でき、タスク名も即座に変更することができます。

担当者変更

f:id:sgtech:20200206215139g:plain

担当者の追加とタスクのアサイン変更もドラッグ&ドロップで手軽に行えます。

休日の自動調整

f:id:sgtech:20200207160420g:plain

タスクの長さは工数(日数)ベースで設定されていますので、休日を跨ぐと自動で長さを調節します。

オート整列機能

f:id:sgtech:20200207160951g:plain

複数のタスクを並べ直して総工数を確認する機能も充実しています。

 

また、ガントチャートに表示される情報は全てリスト形式で管理され、リストの編集性もできるだけExcelに近づくように(完全再現への道はまだ遠いですが)設計されています。

例えば、リスト項目のコピペや追加、削除、順番の入れ替えは簡単にできるように作られています。

リスト処理「タスク一覧」

f:id:sgtech:20200207185005g:plain

Excelのような外部アプリケーションのリストから、コピー&ペーストでタスク登録、一覧のセルの内容のコピーペースト、値も外部アプリケーションからコピーペーストで設定することもできます。

リストのフィルター機能

f:id:sgtech:20200207192447g:plain

各要素のフォーカスを切り替えられるようなフィルター機能は大量のタスクを管理するのには重要な機能です。

 

また、スケジュール作成の簡便化やフォーマットの統一等はScheduleCanvasを使ってもらうことで解決していますので、印刷や報告書などに活用できるようにExcel出力機能も用意しています。

f:id:sgtech:20200207193346p:plain

このように、主だった機能はゲーム開発者であるユーザーのニーズに常に答えるようにしてアプリケーションは開発されました。

外部連携

Excelの他にも各種チケット管理やバグトラッキングシステムなどと連携させて、ガントチャート視覚化も実装済みですが、今回は記事のボリュームを考慮して割愛させていたできます。

その効果は?

機能実装がある程度落ち着き、現在では多くのプロジェクトで試用してもらっています。

そこで今後の開発継続に向けて参考にするために、ちょっとしたアンケートをとって見ました。

集計結果は…。

質問:ScheduleCanvasを利用するメリットを感じますか?

f:id:sgtech:20200207194313p:plain

質問:ScheduleCanvasを利用して、効率化した部分はありましたか?

f:id:sgtech:20200207194316p:plain

ここでは概ねポジティブな印象です。

また、意見として以下のようにもいただいていますので、ひとつひとつを参考にさらに使いやすいツールにするために開発を続行していきます。

良い意見
  • スケジュールの入れ替え、パスの調整等にかかる時間が短縮した。
  • ユーザーのタスク負担度が一目でわかる。
  • 今までバラバラだったスケジュールのフォーマットが統一され、見やすくなった。
改善が必要な意見
  • タスクの検索がExcelの検索より一覧性がない。
  • 開発会社に委託する業務が多く、他社提出のスケジュール(Excel)との共存が難しい。
  • 動作をとにかく軽くしてほしい。

他にもアンケートとは別にExcelで管理してたときよりも確実に30%は効率化できているという声もありました。

社内ツールを開発する上で定期的なアンケートはとても有用で、現在主にどう使われていて、何が一番ボトルネックになっているのかのスコープを探るときに活用しています。

今後も・・・

内製アプリケーションということで、手軽なカスタマイズや要望に応じて機能実装を即時対応できるというのが大きなメリットとなります。

単純なスケジューラーは数あれど、ゲーム開発の現場でゲーム開発の状況に応じて作られているアプリケーションは他の会社だったとしても同じような問題に行き当たることが多いと思います。

こういったゲーム会社に特化した内製ツールだからこそ、会社の枠を超えていつか提供できるようにして、業界に貢献できたらという願いで製作しています。

ご興味ある方は…と言いたいですが、現時点ではそういった準備が整っていないので今しばらくお待ち下さい。

実装ノウハウをちょっとだけ

ここからは実装担当の清水から、このアプリケーションの実装について軽く触れてもらおうと思います。

 

というわけで本パートを担当させていただきます、セガゲームス 第3事業部 第3開発2部 テクニカルサポートセクションの清水です。

 

今回は、いろいろと応用ができそうなExcel出力に関する実装について紹介しようと思います。

 ScheduleCanvasのExcelファイルの出力にはClosedXMLというオープンソースライブラリを使用しています。(https://github.com/ClosedXML/ClosedXML

f:id:nobutoshi_shimizu:20200213162255p:plain

簡単なコードでExcelワークシートを作成することができ、Excelファイル(.xlsx)で保存することができます。

また、PCにExcelのソフトウェアがインストールされていなくてもExcelファイルを作成することができます。これは、スタンドアロンツールであるScheduleCanvasにとって、とてもありがたい特徴でした。

NuGetからインストールできるのでVisual Studioを使用しているならば、インストールも簡単にできます。 

 

ClosedXMLを用いてExcelファイルを作成するには以下のようなコードを書きます。

//新規ワークブックを作成
var workbook = new XLWorkbook();

//新規ワークシート「Sample Sheet」を作成し、先ほど作成したワークブックに追加
var worksheet = workbook.Worksheets.Add("Sample Sheet");

//作成したワークブックを"HelloWorld.xlsx"として別名で保存
workbook.SaveAs("HelloWorld.xlsx");

このコードでは、初めに新規ワークブックを作成し、そのワークブックに新たなワークシート「Sample Sheet」シートを作成、ワークブックを「HelloWorld.xlsx」として保存しています。

f:id:sgtech:20200223205604p:plain

作成されたHelloWorld.xlsx

では次に、ワークシートに何か値を入れてみましょう。

//新規ワークブックを作成
var workbook = new XLWorkbook();

//新規ワークシート「Sample Sheet」を作成し、先ほど作成したワークブックに追加
var worksheet = workbook.Worksheets.Add("Sample Sheet");

//「Sample Sheet」シートのA1セルの内容に"Hello World!"を記入
worksheet.Cell("A1").Value = "Hello World!";

//作成したワークブックを"HelloWorld.xlsx"として別名で保存
workbook.SaveAs("HelloWorld.xlsx");

このコードでは、初めに新規ワークブックを作成し、そのワークブックに新たなワークシート「Sample Sheet」シートを作成、「Sample Sheet」シートのセルA1に「Hello World!」を記入して、ワークブックを「HelloWorld.xlsx」として保存しています。

f:id:sgtech:20200223205713p:plain

A1セルにHello World!を入力した出力結果

//「Sample Sheet」シートのA1セルの内容に"Hello World!"を記入
worksheet.Cell("A1").Value = "Hello World!";

この部分がセルに値をセットする部分です。

セルの指定方法は、複数あります。
以下のコードはいずれもA1セルを指定しています。

//セルのアドレスの文字列で指定
worksheet.Cell("A1").Value = "Hello World!";

//セルの行と列の数字で指定 ※最小は1、0だとエラーになる
worksheet.Cell(1, 1).Value = "Hello World!";

//セルの行は数字、列は文字列で指定
worksheet.Cell(1, "A").Value = "Hello World!";

実際にプログラムを組む際は一番よく使うのは、行と列ともに数字で指定する方法になるかと思います。

 

セルには値だけでなく、背景色、フォント、文字列の配置位置、数値の書式、枠線のタイプ、枠線の色なども設定できます。

//「Sample Sheet」シートのA1セルを変数に入れる
var cell = worksheet.Cell("A1");
 

//セルの背景色(R=255,G=0,B=0)に設定
cell.Style.Fill.BackgroundColor = XLColor.FromArgb(255,0,0);

//セルの文字のフォントをHGS創英角ポップ体に設定
cell.Style.Font.FontName = "HGS創英角ポップ体";

//セルの文字の水平方向の配置位置を中央に設定
cell.Style.Alignment.Horizontal = XLAlignmentHorizontalValues.Center;

//セルの文字の垂直方向の配置位置を中央に設定
cell.Style.Alignment.Vertical = XLAlignmentVerticalValues.Center;

//セルの数値の書式を"yyyy/mm"に設定 任意のフォーマットに指定可能
cell.Style.DateFormat.Format = "yyyy/mm";

//セルの周りの枠線を点線に設定
cell.Style.Border.OutsideBorder = XLBorderStyleValues.MediumDashDotDot;

//セルの周りの枠線の色を黒色に設定
cell.Style.Border.OutsideBorderColor = XLColor.Black;

 

//文字の配置位置をわかりやすくするためにセルの大きさを変更
worksheet.Column(1).Width = 50;
worksheet.Row(1).Height = 50;

f:id:sgtech:20200223205717p:plain

セルにいろいろ設定した出力結果

手作業でExcelを編集するときと同じように、セル単体ではなく範囲を対象に設定することもできます。

//「Sample Sheet」シートのA1セルからC5セルの範囲を変数に入れる
//範囲の指定は左上のセルと右下のセルを指定する
var range = worksheet.Range(worksheet.Cell("A1"), worksheet.Cell("C5"));
 
//範囲内の全てのセルの背景色を青色に設定
range.Style.Fill.BackgroundColor = XLColor.Blue;

f:id:sgtech:20200223205722p:plain

複数のセルを範囲指定して背景色を設定した出力結果

このほかにも、

複数のセルを一つのセルにする「セルの結合」

//結合したいセル範囲を指定して...
var mergerange = worksheet.Range(worksheet.Cell("B2"), worksheet.Cell("D4"));

//Merge()で範囲のセルを結合する
mergerange.Merge();

 

//値を設定してみる
mergerange.Value = "結合セル";
//文字の配置位置を中央に設定
mergerange.Style.Alignment.Horizontal = XLAlignmentHorizontalValues.Center;
mergerange.Style.Alignment.Vertical = XLAlignmentVerticalValues.Center;

f:id:sgtech:20200223205727p:plain

セルの結合を設定した出力結果

ワークシート上のデータを抽出して表示できるようにする「オートフィルタの設定」

//例示のために


セルにデータを入力

worksheet.Cell("B2").Value = "名前";
worksheet.Cell("C2").Value = "味";
worksheet.Cell("D2").Value = "知名度";
worksheet.Cell("E2").Value = "値段";
 
worksheet.Cell("B3").Value = "リンゴ";
worksheet.Cell("C3").Value = "甘い";
worksheet.Cell("D3").Value = "一般的";
worksheet.Cell("E3").Value = "500";

worksheet.Cell("B4").Value = "みかん";
worksheet.Cell("C4").Value = "甘い";
worksheet.Cell("D4").Value = "一般的";
worksheet.Cell("E4").Value = "300";
 
worksheet.Cell("B5").Value = "チリドッグ";
worksheet.Cell("C5").Value = "辛い";
worksheet.Cell("D5").Value = "低い";
worksheet.Cell("E5").Value = "700";

//オートフィルタを設定したいセル範囲を指定して...
var filterrange = worksheet.Range(worksheet.Cell("B2"), worksheet.Cell("E5"));

//SetAutoFilter()でオートフィルタを設定する
filterrange.SetAutoFilter();

 

//見やすいように範囲内のセルに枠線を設定
filterrange.Style.Border.OutsideBorder = XLBorderStyleValues.Thin;
filterrange.Style.Border.InsideBorder = XLBorderStyleValues.Thin;
//見やすいようにセルの幅を設定
worksheet.ColumnWidth = 20;

f:id:sgtech:20200223205732p:plain

オートフィルタを設定した出力結果

特定の行や列を固定表示したままシートをスクロールできるようにする「ウィンドウ枠の固定」

//固定するワークシートの1~2行目とA列B列をピンク色に設定
worksheet.Column(1).Style.Fill.BackgroundColor = XLColor.Pink;
worksheet.Column(2).Style.Fill.BackgroundColor = XLColor.Pink;
worksheet.Row(1).Style.Fill.BackgroundColor = XLColor.Pink;
worksheet.Row(2).Style.Fill.BackgroundColor = XLColor.Pink;

 

//行と列の数字を指定して「ウィンドウ枠の固定」を行う
//Freeze(2, 2)だとC3セルを指定して「ウィンドウ枠の固定」したときと同じ状態になる
worksheet.SheetView.Freeze(2, 2);

 

//セルの指定では0を指定するとエラーになったが、この処理は0が指定できる
//0を指定すると、行方向だけ、または、列方向だけにウィンドウ枠の固定ができる
worksheet.SheetView.Freeze(2, 0);

 

//行方向だけ、または、列方向だけウィンドウ枠の固定をするための別メソッドもある
worksheet.SheetView.FreezeColumns(2);
worksheet.SheetView.FreezeRows(2);

f:id:sgtech:20200223205738p:plain

ウィンドウ枠の固定を設定した出力結果

上記のとおり、Excel上で設定できるものは基本的にコード上で設定することができます。

 

ScheduleCanvasでは、これらを使ってツール上で表示している見た目と同じようなExcelファイルの出力を実現しています。

以下の2つの図はScheduleCanvas上での見た目と出力したExcelの見た目をそれぞれキャプチャしたものです。

f:id:sgtech:20200223205743p:plain

ScheduleCanvasの見た目

f:id:sgtech:20200223205750p:plain

ScheduleCanvasから出力したExcelファイルの見た目

なかなかの再現度ではないでしょうか。

ここまで見た目にこだわるとコードも結構複雑になりますが、データを出力する際に見出しの行に色を付けたり、オートフィルタを設定するだけならば簡単に実装できます。

皆さんも試してみてはいかがでしょうか。

 

ひとまずはツールの実装の一例としてExcelファイルとの連携をご紹介しましたが、ユーザーの要件に応えるために一つのツールには他にも多くの技術が盛り込まれて実装されています。

このようなゲームを作るための周辺ツールやワークフロー、ゲームエンジンのノウハウが豊富で、情報共有が盛んな職場で働いてみたいという方はぜひ、以下をチェックしてみてください。

 

www.sega.co.jp

(C) SEGA

ゲームジャムでUnreal Engine 4を使ってみよう

ごあいさつ

はじめまして、セガ・インタラクティブ 第三研究開発部の若井です。アーケードゲームのプログラマーをしています。携わったタイトルはえ~でる すなばWCCF FOOTISTA 2019 などです。Unreal Engine 4 (以下UE4)の活動としては昨年の「UNREAL FEST EAST 2019」にてWCCFシリーズのUE4移行について発表いたしました。スライド(リンク先の説明欄より、動画と台本付きの資料をダウンロードしてください。)

記事の対象

今回はゲームジャム(文章中は「ジャム」と略します)の定義を、会場へ集まって1、2日で制作するものから期間1ヶ月程度までのコンテストとします。期間が長いものは当てはまりません。当てはまらない例:期間が10年もあるジャム

また、記事内容はジャム特化の内容となっておりますので、製品開発に必ずしも役立つものではない(技術的負債になりえる)ことをご了承ください。

記事のモチベーション

今回は私がUE4を使用したジャムで実際に活用したノウハウの内、他のジャムにも転用できそうなものをご紹介します。全体の話もしますが、主にプログラマー向けの初歩的なものが多いです。

ジャムでは結果よりもプロセスを楽しむことや経験することが重要であります。とはよく言われるものの、躓きが多いと楽しくない印象で終わることもあります。記事内のコンテンツで皆さんのジャムを快いものにすることができれば幸いです。

f:id:sgtech:20200126210259g:plain思惑と違ってしまうジャムもしばしば

おまけで記事の末尾にこれまでに制作したジャム作品を羅列しておきました。

ジャム当日までの準備

前日の十分な睡眠の他に、開発環境など事前に用意できるものがあります。

開発PCや実行環境

UE4を用いた開発PCについて、公式の推奨環境があります。会場に集まるジャムの場合はノートPCを持ち込むことになります。ご自身のノートPCスペックを確認してみてください。ジャムの会場によってはPCの貸し出しを行っている場合があります。

経験上UE4を使用する場合は3Dゲームを作ることが多いので、グラフィックカードの搭載された「ゲーミングノートPC」を持ち込むことをおすすめします(プログラマーの場合は特に必須)。

ノートPCの例

私はMSIのノートPCを愛用しています。冷却性能が優れておりジャム中に安定稼働しています。MSIさんのPRではございませんが製品名を挙げさせていただきます。各PCのスペックを参考にしてください。

・PS63 Modern

ジャムに持ち込んだときにゲーミングノートPCとしての役割を持てます。コンパクトでバッテリーも多いので、ジャム以外にも長めの勉強会などでメモ取り用として持っていける機種です。スペックとしては最低限で、2日程度の期間内でも処理負荷が大きいとゲーム開発中のカクつきが見受けられます。

・GE75 Raider

スリムでありながらVRゲームの開発にも対応できます。MSIのノートPCにはボタン1つでクーラー出力が最大(プロファイルの変更)となる機種があり、私はこのボタンをとても気に入っています。

スペックが低い環境の極端な例

おまけの④では、コンパクト性のためシングルボードコンピュータ (Latte Panda)上でアプリケーションを動作させました。デフォルトの状態では処理速度が追いつかなかったため、ジャム中にゲームのプロファイリングをして重い処理を取り除いていく必要がありました。おすすめしません。

f:id:sgtech:20200126210128p:plain←FlyingTemplateで10FPS

マウスを使用する(重要)

テンプレートを使用したゲームではカメラ視点操作をマウスで行ったほうが楽な事が多々ありますので、用意しましょう。

ビジュアルスクリプト「Blueprint」を使って開発することになります。慣れた操作でBlueprintノードを組み立てるためにノートPCと一緒にマウスを持ち込みましょう。

特にプログラマーは短時間で大量のBlueprintノードを操作すると腕が痛くなります。湿布を用意するか軽いマウスを使用することをおすすめします。

↓ ノードの総量はこのグラフ(おまけの⑩のBlueprint)くらいの量になるのではないでしょうか。ジャム中は試行錯誤でノードの作成と移動、ワイヤー接続と切断を繰り返しますので、グラフの見た目以上に手を動かすことになります。

f:id:sgtech:20200126210317j:plain

おまけの⑩では、制作時のグラフ切り替えやクラス間の画面切り替え時間を減らすためにほぼ1つのグラフに処理が集約されています。

仕事では書かないグラフなので見せるのはちょっと恥ずかしいです。

USBメモリ

どのジャムでも、素材やプロジェクトを共有するための手段が必要になります。1人1つUSBメモリを持っておくのが吉です。

共有ドライブが整備されたジャムもありますが、多くの会場では貧弱な無線環境ですのでUSBメモリのほうが共有しやすいです。

チーム内の数が少ないとUSBメモリ使用のための待ち時間が発生することがあります。発生したことがあります。

コントローラ

XInput形式のものを持ち込む

UE4は標準でXInputに対応しており、UE4のテンプレートは最初からキャラクターやカメラ操作のインプットアクションがアサインされています。

ジャムで制作するゲームはXboxコントローラのようなインターフェースが適することが多く、キーボードが必須であるアイデアは稀です。

持っている人は持ち込んでみましょう。

f:id:sgtech:20200126210552j:plain

年季の入ったコントローラや自作のアーケードコントローラ

お気に入りのコントローラを持っていて、ジャムで使用したくなることがあります。しかしXInputに対応していないことがあります。

UE4はDirectInput形式に対応しておらず、実際にUSBで繋げてみたがUE4のゲームで認識されない場合は概ねこちらが原因でしょう。

DirectInput形式はXInputより古い形式であり、UE4で扱うにはコードを書く(OSSのPluginを導入するのが楽)必要があります。こちらの導入については後述します。

f:id:sgtech:20200126210612j:plain自作コントローラそれはロマン

やってみたいことの妄想

こんなゲームを作りたい、こんな技術を作りたいといった思いはジャムに反映されやすいです。アイデア出しの種にもなりますので、考えてみてください。末尾のおまけには私のジャム参加前のモチベーションを添えてみました。

ジャム当日:アイデア出し

アイデア出しの裏で、UE4がインストールされていない人はこの間にインストールしましょう。

ワードマップから始める

私がよく使う手法を紹介します。

ゲームジャムはテーマとして単語や文章が与えられることが多いです。与えられたテーマより連想するワードを付箋などに書き出し、ワードマップにします。

このとき、名詞・動詞・状態(ゴールや目的)などを意識します。

f:id:sgtech:20200126225159j:plain

出てきたマップについてみんなで議論することになります。ここでの強力な手法の1つに「EMS Framework Method」というものがあります。

EMS Framework Methodについて紹介されている記事

こちらを少し簡略化して、「プレイヤー(名詞)が〇〇して(動詞)、□□という結果になる(状態)」という枠にワードを当てはめます。名詞、動詞、状態のうち2つ当てはめれば、ワードマップに無い言葉も生まれてくることでしょう。 

例えばおまけ⑫では、「☆」というテーマが与えられて「ヒトデ」「流れ星」といったワードが出てきました。枠内の名詞・結果に当てはめてみると、「ヒトデが〇〇して(流れ)星になる」となるので、残りの〇〇を皆で考えた結果、ビッグなスターになるということで「巨大化」という動詞が生まれてきました。

f:id:sgtech:20200126210936p:plain

アイデアの大枠が決定した時、UE4のテンプレートが使えそうか考える

UE4の使用経験のあるプログラマーは、決定されたアイデアにUE4のテンプレートを流用できるか考えてみましょう。流用できる場合は制作が楽になります。

f:id:sgtech:20200126210623p:plain

流用しない場合は考える楽しみがあります。おまけ⑨ではテンプレートを使用しませんでしたが、未知のものを作れそうなワクワク感がありました。

末尾のおまけでは、各ゲームが使用したテンプレートを記載しました。

ToDoリストを作成する

ゲームに必要な機能、要素を分割して、やるべきこと・やっていることを可視化します。

f:id:sgtech:20200126210428p:plain

運用につきましては過去の記事に詳しく書かれておりますので、こちらをご覧ください。

techblog.sega.jp

 

ジャム当日:最初にやること

テーマ決めより使用するテンプレート(または空のプロジェクト)はプログラマーが判断すると思うので、その方がプロジェクトを作成して配布するといいでしょう。

バージョン管理システム(VCS)を決める?

今現在Blueprintは更新が衝突したときのマージをマージツールで実現することが難しいです。よって衝突を防ぐためにファイル単位で担当を決めて作業することになります。

もし衝突した場合はUE4プロジェクトを両方開いて、Blueprintグラフ上で作業することになります。幸いBlueprintグラフはコピペが効きます。

おまけの⑪では、画像↓のようにPlayerやEnemy、大砲(Cannon)から放たれるMEGA DRIVEなどに分けました。Playerと大砲を担当する人とEnemyを担当する人に分かれ、各々でクラスファイルを実装しつつ相手のクラスに処理を追加したい場合は相手に仕込んでもらうようにしました。

f:id:sgtech:20200126210419p:plain

では、どのVCSを選びましょうか。

VCSを使用せずにUSBメモリを使用する

私のオススメUSBメモリを使用することです。経験上これがベストでした。

最初にプロジェクトを共有した後は図のような手順でローカルからUSBメモリへの更新と、USBメモリからの更新をローカルに適用します。

 f:id:sgtech:20200126210424p:plain

②のUSBメモリにコピーする際、周りのメンバーに何を更新したのか共有することを忘れないようにしてください。

私のオススメは定期的に全員で進捗確認の時間を設け、確認後にUSBにコピーすることです。確認をしたので、どんな更新がマスタープロジェクトに入っているか把握することができます。もちろん、プランナーやレベルデザイナーが最新の状態を触るために細かくやり取りすることも大事です。

USBメモリ側でもバックアップをしてもいいですが、ジャムの後半になるとそんなことは忘れます。①の部分も忘れられ②と③になることでしょう。しかし、このファイル共有作業において自分の更新分がどこかで消滅するとモチベーションが結構下がってしまうものです。面倒でも自分のローカルでバックアップを取るようにしましょう。そうすれば手違いが起きてしまったときに担当者がバックアップから取り出して確認し復旧しやすいです。

私の主観ですがUSBメモリの受け渡し形式はコミュニケーションの機会が増えるので、実装内容や予定の相談を行いやすいと感じます。

VCSを使用する場合
  • 安定したネットワーク環境であること
  • VCSを全員が操作できて問題解決もできる

といったチームであれば問題ないと思います。また、チームのプログラマーが3人以上であれば検討してよいと思います。

私は無線環境での更新の遅さやSVNのCleanupに悩まされた経験があります。ジャムの後半に問題が起こるととても焦ります。

Content直下にゲームジャム用のフォルダを作成する

このとき、名前を「数字_ゲームジャム(プロジェクト)名」にします。記号や数字を頭に持ってくることで並びが一番上に来ます。フォルダ名をチームで共有して、作業フォルダを明らかにしましょう。

f:id:sgtech:20200126210121p:plain

ゲームジャム後半などで、作業フォルダを見失うことを避けることができます。

例えばテンプレートやスターターコンテンツまたはMarket Placeのアセットなどを導入すると、Content「コンテンツ」フォルダ以下が肥大化することが多々あります。

下図は過去のゲームジャム(おまけの③)フォルダ構成なのですが、主な作業フォルダである「SGJ201707」を見つけることに苦労します。

f:id:sgtech:20200126210125p:plain

ゲームジャム2日目などはフォルダ名がとっさに思い出せないことやアルファベット順に並んでいることも頭から抜けていることがあります。ぜひ一番上に表示されるような名前を付けてみてください。

「Debug」フォルダを作成するときも「00_Debug」などにすると探しやすくなります。

各々の名前のフォルダで作業する

個人名のフォルダを作成し、自分の名前のフォルダ以下で開発を行うで複数人が同じアセットに対して作業することを防ぐことができます。

デバッグフォルダと同様、先頭に数字を入れると探しやすくなります。

f:id:sgtech:20200126210940p:plain

外部デバイスや使用したいコードのプラグインがある場合は、C++プロジェクトを作成する

UE4の標準機能では実現できないために外部のOSSを使用するときは、プロジェクト作成時にブループリントベースではなくC++ベースのプロジェクトを作成する必要があります。

これまでジャムで使用したことがあるサードパーティのプラグインを紹介します。

UE4Duino:Arduinoとのシリアル通信

傾きや照度などセンサー情報の受け取りや、回路へシグナルを出力してLEDを点灯させる等の場合に使います。(おまけの④で使用)

GitHub - RVillani/UE4Duino: Unreal Engine 4 plugin for COM communication on Windows

使用方法はGitHubのREADMEに載っている画像がわかりやすいです。

OpenSerialPort関数で得たSerialObjectの参照を使用してメッセージ送受信の関数を呼びます。Arduinoからメッセージを受け取る場合はRead〇〇関数、メッセージを送る場合はPrint関数です。

f:id:sgtech:20200126210730p:plain

 

おまけ④では複数発のLEDを制御するため、やりとりするメッセージの形式を「LED_(インデックス)_(点灯か消灯か)」に決ました。

Arduino側では受け取ったメッセージを解釈してLEDを点灯(消灯)させる処理を書き、UE4アプリ側では形式に合ったメッセージの文字列を合成して送信する処理を書きました。

f:id:sgtech:20200126210734p:plain

 

おまけ④以外のジャムでもUE4Duinoを使用する機会があり、傾きセンサの情報の取得を試みましたが、期間中にうまくいかず挫折したことがあります。

2日間のジャムで1日目にUE4で挫折して2日目でUnityを使って1から作り直したという苦い思い出です。悔しくて家でUE4バージョンも作り直しました。

f:id:sgtech:20200126210133g:plain

DirectInput:Joystickの使用

XInput非対応のコントローラを接続したいときにOSSのPluginを導入します。

GitHub - Ikarus76/UEJoystickPlugin: Unofficial Joystick Plugin for the Unreal Engine

 フォーラム:Joystick Plugin - Unreal Engine Forums

 

UEJoystickプラグインではスティックの軸値関数とボタンのインプットイベントより、望みの値を簡単に取得できます。PluginのReadmeにもあるように、Input用のActorまたはComponentを配置することを忘れないようにしてください。

f:id:sgtech:20200126210619p:plain

 

おまけの④ではAmazonでアーケードコントローラのDIYセットを購入し、専用のコントローラを作成しました。よく売っているタイプのエンコーダ接続は下図のようになります(4ボタン)。

f:id:sgtech:20200126210615p:plain f:id:sgtech:20200126210946j:plain

スティックはAxis値が中途半端(1.0ではなく、0.999などの値)になっていることがありますので、0.0や1.0を計算のしきい値にするような場合は注意してください。

OceanProject:リアルな海と浮力のシミュレーション

おまけの⑪では、海と船を使用するためOSSのOceanProjectを使用しました。

GitHub - UE4-OceanProject/OceanProject: An Ocean Simulation project for Unreal Engine 4

f:id:sgtech:20200126210556g:plain

とてもリアルな海、浮力のシミュレーションなどが含まれています。

素早く自分の好きな物体へ浮力を適用するためのヒントとしては、OceanProject内で既に浮力が与えられているBlueprintのメッシュを差し替えて流用することです。

↑の動画で見えるように、オブジェクトへ◇型をした浮力シミュレーション用のテストポイントがアタッチされています。テストポイントの位置や、細かい浮力パラメータを調整することができます。

OceanProjectを初めて触る場合、導入して使い方を覚える時間を考慮すると2日のジャムでは時間が足りないかもしれません。三角関数の単純な浮き沈み処理を書いた方が早くて楽だと思います。

プロジェクト作成者が最初に配布する内容

以下のフォルダを共有します。

  • Configフォルダ
  • Contentフォルダ
  • DerivedDataCacheフォルダ
  • 〇〇.uproject ファイル
  • Pluginsフォルダ(追加した場合。中のIntermediateは除外)
  • Binariesフォルダ(C++プロジェクトの場合)
  • Sourceフォルダ (C++プロジェクトの場合)

また、大きなテンプレートやアセットを最初から導入していた場合、共有DDCを設定してあげると初回のシェーダコンパイルが走らず、親切です。こちらの記事を参考に、

[UE4] DDCを共有してストレスフリーな開発を!|株式会社ヒストリア

「Path=%GAMEDIR%/DDC」を記述、.uprojectと同じフォルダに「DDC」という名前のフォルダを作成してプロジェクトのエディタを起動しましょう。

エディタを起動し、シェーダのコンパイルが終了したらDDCファイルごと共有します。

おまけの⑪では、サイズの大きいOceanProjectというOSSを最初に導入しました。導入時の共有DDC設定をすることで、渡してすぐに実行を試してもらうことができました。

初めてUE4を触る方・初めての方に教える方

おまけ⑫のジャムではメンバー5人のうちUE4の経験者は私だけでした。教えながら・調べながらのスタイルもゲームジャムですので、やってみたいという気持ちだけで当日を迎えても大丈夫です。

操作方法を教わりながら、初めての方が間近で挑戦されているところを見てきたので、事例を紹介します。

書籍を見ながらコインを実装

おまけ⑥のジャムでは、学生のプログラマー(UE4やUnityの経験無し)が書籍を見ながら、プレイヤーが触れると消滅するコインを作成しました。

Unreal Engine 4 で極めるゲーム開発 | ボーンデジタル

f:id:sgtech:20200126210326p:plainf:id:sgtech:20200126210330p:plain

f:id:sgtech:20200126210349p:plain

具体的には15章3節の「ピックアップアイテムを作る」の部分です。

UIのチュートリアルを見ながらメニュー、ゲーム中UI、結果画面を作成

おまけ⑫のジャムでは、内定者学生のプログラマー(Unityの経験者)が公式webのチュートリアルドキュメントを見ながらUIを実装しました。

UMG UI Designer Quick Start Guide | Unreal Engine Documentation 

f:id:sgtech:20200126210334p:plainf:id:sgtech:20200126210338p:plain

f:id:sgtech:20200126210341p:plain

制限時間を表現する処理にも挑戦していました。

レベルデザインやランドスケープツールの利用

おまけ⑫のジャムでは、Unity経験者のプランナー2人がプレイヤーのパラメータ調整とステージ作成を分担や協力をしてレベルデザインや見た目の調整をしていました。

f:id:sgtech:20200126210949p:plain f:id:sgtech:20200126210954p:plain



Unity経験者は慣れるスピードが早いのだとは思いますが、右の画像の海感は素晴らしいです。パラメータ調整も小数点第二位の値までこだわっており、完成度の高いゲームができあがっていました。

わからないところは質問しよう、わからなさそうなところに気づいたら教えよう

エディタ操作方法やBlueprintの実装方法など、初めての方にはわからないことが沢山あります。UE4の経験者は都度補足してあげることが重要ですし、初心者の方はわからないことを都度経験者に伝えることが重要になります。

初心者の方はUE4エディタに慣れてきたら、次はwebで検索して試すことにチャレンジしてみましょう。

こちらの写真は前回記事の写真でして、↑のUIチュートリアルを進めている方に対してドキュメントの内容と自分たちのゲームを照らし合わせて補足しているときのものです。

f:id:sgtech:20200126210345p:plain

よく聞かれたもの

UE4初めての方よりどういった質問や回答が多かったかを挙げてみます。

ビューポートやアウトライナについて

レベルデザインにおいて物体の配置(移動や回転)や見たい位置へのカメラ移動のとき、操作に対して思ったより動きが小さい場合や大きすぎる場合があります。

ビューポートの上部にある設定項目をいじりましょう。特にカメラ速度とフィールドの大きさが噛み合っていないと移動に時間をとられます。

f:id:sgtech:20200126210756p:plain

 

アウトライナの中でフォルダ分けしたいときは、フォルダのアイコンを押します。

おまけの⑫では捕食対象の種類によってフォルダ分けし、パラメータ変更時に選択しやすくなっていました。

f:id:sgtech:20200126210759p:plain f:id:sgtech:20200126210825p:plain

 

フィールドが広大な場合は、オブジェクトをアウトライナで選択した状態で「F」キーを押すとカメラがオブジェクトの近くに移動してフォーカスされます。

f:id:sgtech:20200126210830g:plain 約1.5kmの距離を一瞬で移動

Blueprintの基本的な操作

隣に座って画面を操作してもらいながら口頭で説明することが多いです。ドキュメントを見て貰う場合はマウス操作の説明や、画像に赤い枠などの印をつけて説明されているものを紹介しましょう。 

 

さわりとして、マウスの操作方法や画面の説明をすることが多いです。

↓こちらのドキュメントと同様な話をします。

【UE4】ブループリント入門【第1回】 | TECH Projin

 

算術演算子や、変数の定義方法もよく聞かれます。

↓こちらのドキュメントと同様な話をします。

ブループリントの基本を覚えよう | Think IT(シンクイット)

 

Blueprintワイヤーの切断方法

Blueprintワイヤーの切断方法は質問率ナンバーワンです。しかし多くの入門ドキュメントでは接続方法の近くに切断方法が書かれておらず、「Blueprint 切断」といったキーワードで検索しなおすケースが多いです。

切断と、ついでに付替のショートカットを覚えましょう。

  • 切断:ワイヤー上でAlt+Click
  • 付替:ワイヤー(切断側)上でCtrl+Click

f:id:sgtech:20200126210803g:plain

ノードのピンから右クリックでも切断できますが、ショートカットの方が早く便利です。

プランナー、ゲームデザイナー向け(プログラマーも見てね)

アイデア出しが終わったあとには、プレゼン資料の作成や詳細仕様を考えることに頭を悩ませると思います。今まで一緒にジャムをした方の立ち回りについてプログラマーの目線からご紹介します。

レベルデザイン

動くものを触ってみることが重要です。触ってみた結果、当初考えていたイメージと異なっていることに気づき、改修や調整の判断ができます。レベルデザイン担当者の試行回数が多かったときほど、手触りのよいゲームになっていると感じます。

なので、プログラマーにお願いしてパラメータを調節できるようにしてもらいましょう。プログラマー向けTipsにヒントを書いておきました。

例えばおまけの⑫では、プログラマーがプレイヤーの成長率(ジャンプの高さや身体の大きさ、乗り越えられる段差の高さなど)を調節できるようにして、プランナーの2人が地形とパラメータの調整を進めました。↓の画像は地形の調整用マップと、見た目の最終マップです。

f:id:sgtech:20200126210404p:plain f:id:sgtech:20200126210408p:plain

 

待ち時間が発生したとき

まだ基本的な動きが完成しておらず、ゲームを実行しての確認ができず手が空いてしまうケースはよくあります。むしろ、動きを早期に確認できるジャムは稀だと思います。

仕様を簡略化できるか・どこまで削ってよいか考える

アイデア出しのとき、ゲームが単調にならない要素を考えると思います。ゲーム中のキャラクターや制限の種類を増やすと面白そうなものになるでしょう。しかし期間の短いジャム中にアイデアの全てを入れ込むことは至難です。

アイデア出しの部分で言及したToDoリストなど要素分けしてリスト化したものに優先度をつけて、最低限必要なものが何であるか考えましょう。

 

おまけの⑫において削った仕様の例を紹介します。

・ゲームの終了条件

アイデア段階では「ゴール地点にたどり着く」「制限時間に達する」「自分より大きい捕食対象より一定のダメージを受ける」でした。開発を進める中で、ダメージを受ける要素が無くてもゲームになることに加え、捕食対象の動作(ダメージを与えようとしてくる)実装と調整の時間が足りないと判断してダメージの仕様は無くなりました。

・キャラクターの種類

アイデア段階での捕食対象は大きく4種類、さらにカラー変更で見た目のバリエーションも増やす考えがありましたが、最終的には3種類(最低限、水中・陸上・空中に存在するもの)となりました。プログラマー側から提案して種類を減らさせていただきました。

チームにサウンドさんが居ない場合、音素材を集めましょう。

UE4で使用できるオーディオファイルの形式はWAV形式です。UE4.22以降ならAIFF、FLAC、Ogg Vorbis形式を使用できます。

フリーの音源など外部より取得したものは音量にばらつきがある可能性がありますので、確認して波形の正規化をしてあげると扱いやすくなります。

フリーソフトのAudacityを使用した正規化とWAV形式への変換を紹介します。

Audacityはこちらより入手します。https://www.audacityteam.org/

Audacityへ音源をインポートしたときに、波形の枠上下いっぱいになっていなければ音量が小さいです。右の画像は-1.0dbで正規化されたものです。右の画像のようになっていれば扱いやすいです。

f:id:sgtech:20200126210531p:plain f:id:sgtech:20200126210548p:plain

 

正規化をします。Ctrl+Aで波形を全選択したあと、「エフェクト」>「ノーマライズ」を実行します。出てくるウィンドウはそのままでOKです。

f:id:sgtech:20200126210535p:plain f:id:sgtech:20200126210540p:plain

 

WAVファイルのエクスポートは、「ファイル」>「書き出し」>「WAVとして書き出し」を実行します。

f:id:sgtech:20200126210544p:plain

UE4へのインポートは、フォルダを選択してインポートボタンです。右クリックからもできます。

f:id:sgtech:20200126210706p:plain f:id:sgtech:20200126210710p:plain

 

インポートされたアセットを右クリックし、キューを作成します。

f:id:sgtech:20200126210714p:plain f:id:sgtech:20200126210718p:plain

 

例えばBGMの場合はループさせたいので、キューアセットを開いてWave Playerノードを選択し、詳細パネルのLoopingにチェックを入れます。

また風の音や爆発音といったSEについて、アウトプットノードを選択したときの詳細パネルでピッチ項目を弄ってゲームの雰囲気と合わせます。

f:id:sgtech:20200126210726p:plain f:id:sgtech:20200126210721p:plain

プログラマー向けTips

タイトル→ゲーム→リザルト→タイトルのゲームシーケンスループを作成

ゲームに備わっているべきシーケンスだと思います。もちろん、ゲームの部分を作ることに熱中して作成できなかったとしてもOK。それもゲームジャムです。

このシーケンスがスムーズに作られていると、プレイする人の頭が準備されるだけでなく、試遊する方がプレイするときに制作者がいちいちスタートボタンや停止ボタンを押さなくても良くなります。

ゲームジャムでは試遊の時間が設けられていることが多いです。自分のゲーム近くで案内操作している時間が多いと、他のジャム作品を遊ぶ時間が少なくなります。それはもったいないので、ぜひ自立したゲームシーケンスを目指してください。

f:id:sgtech:20200126210252g:plain

↑おまけ⑥を制作したジャムで配布されたテンプレートにおける遷移動作です。

マップを分割し、遷移処理を作成

ゲームジャム中はメインとなるゲームのマップを繰り返し実行して開発するので、タイトルを切り離しておくべきです。

ゲーム中にリザルトを表示させようとなると、表示の裏で動く様々な処理を止める必要があるかもしれません。意外と手間である場合もありますので、リザルトも分かれていると悩まなくて良いです。タイトルやリザルトの表示は一瞬でも、それを遷移する時間がちりつもで嵩んでいきます。

分割することで、UI作成+表示+マップ遷移の役割としてゲーム部分の役割と切り離すことができます。これは重要なことで、プログラマーが2人以上の場合はプレイヤー+ゲーム部分担当と、UI+シーケンス(+他のキャラクター)担当に分かれることがとても多いです。同じマップファイルを触らなくなるので、更新が衝突することも無くなります。

 

レベルの遷移はOpenLevelノードで行います。正しく該当のマップに遷移するか、必ず確認するようにしましょう。

f:id:sgtech:20200126210437p:plain

実行時にLevel Nameの名前を持ったマップアセットの探索が走ります。ジャム規模のプロジェクトで探索時間が問題になることは無いと思いますが、Gameからのフルパスを指定しておけば転ばぬ先の杖です。指定方法は、マップアセットを右クリックして「リファレンスをコピー」を実行してペーストした結果より、「World'」から「.マップ名'」までの文字を抜き出します。例えば

「World'/Game/00_GameJam2020/Map/Result.Result'」がコピーされるので、「/Game/00_GameJam2020/Map/Result」を使用します。

f:id:sgtech:20200126210440p:plain f:id:sgtech:20200126210445p:plain

繰り返しになりますが、正しく該当のマップに遷移するか必ず確認するようにしましょう。

得点などをリザルトで表示したい場合はGameInstanceクラスを作成して情報を持たせる

Mapを遷移するとActorがベースクラスのBlueprintは破棄されます。プレイヤーのキャラクタークラス等に得点情報を持たせてしまうと、マップ遷移時に情報が失われてしまいます。

GameInstanceクラスはプロジェクトに1つだけ設定され、アプリケーション起動時より常駐となります。このクラスにリザルトの情報を持たせる実装が楽です。

GameInstanceクラスの作成

コンテンツブラウザ上の右クリックメニューよりブループリントクラスを選択し、親クラスの選択ウィンドウにて「すべてのクラス」を展開した中よりGameInstanceクラスを選択します。

f:id:sgtech:20200126210456p:plainf:id:sgtech:20200126210502p:plain

 

今回はBP_Jam_GameInstanceという名前にしました。

f:id:sgtech:20200126210506p:plain

 

「編集」 > 「プロジェクト設定」で開いたウィンドウより、左側の「マップ&モード」を選択、中の「ゲームインスタンス」に先程作成したクラスを設定します。

f:id:sgtech:20200126210512p:plainf:id:sgtech:20200126210509p:plain

 

作成したゲームインスタンスの参照を取得するには、GetGameInstanceノードのアウトプットをキャストします。関数ライブラリなどに取得関数を作成すると便利です。

f:id:sgtech:20200126210518p:plain

※技術的負債ポイントです。GameInstance参照が各所に飛び散ると、起動と同時に芋づる式に参照アセットがロードされるので、規模が大きくなるうちに気づけば初回起動にとても時間がかかる問題にぶち当たります。

回避策の1つに、BlueprintInterfaceを使用する方法があります。ジャムではおすすめしませんので、もしあなたがジャム中であれば読み飛ばしてください。

他のBlueprintクラスと同様に右クリックからクラスを選択します。

f:id:sgtech:20200126210849p:plain f:id:sgtech:20200126210852p:plain

 

ダブルクリックでクラスの編集画面に入り、「+」ボタンでインターフェース関数を追加します。続いて引数や返り値を定義します。

f:id:sgtech:20200126210855p:plain

 

次に今回プロジェクトのGameInstanceクラスを開き、「クラス設定」よりBlueprintInterfaceクラスを指定し、インターフェース項目に追加された関数の中身を実装します。

f:id:sgtech:20200126210900p:plain f:id:sgtech:20200126210905p:plain

 

使用するときは、GetGameInstance関数のアウトプットから呼び出すことができます。右上にメールが開封されたようなアイコンが付いているものがインターフェース関数です。

f:id:sgtech:20200126210910p:plain

ジャム中にこの方式を使用するデメリットとしては、ノードをダブルクリックしても実装した部分が開きません。BlueprintInterfaceクラスが開きます。実装内容を調整したいときは自分でBlueprintInterfaceクラスを実装したクラスを開いて該当の関数を見つけるい必要があります。ちょっとした手間が貴重な時間や精神を削ります。

もしジャムのGameInstanceに適用する場合、何度も調整する必要がないように変数のSet, Get程度にとどめましょう。

もう少しこの辺りの問題について知りたい場合、こちらの記事の「プログラム編」を読んでみてください。

特徴的なアートスタイルはこうして作られた。「OCTOPATH TRAVELER」開発秘話 - GamesIndustry.biz Japan Edition

 

UIのWidgetBlueprintをGameInstanceに持たせた例

おまけの⑫では、この図のような構成で作りました。

f:id:sgtech:20200126210433p:plain

WidgetBlueprintクラスをGameInstanceに持たせておくと、ゲーム中のUI情報をリザルト画面で流用することができて楽になります。リザルトのマップにおいて、ゲーム中に更新されたWidgetBlueprintを表示(AddToViewport)してUI上部のゲージを非表示にするだけで、スコアのリザルトを反映することができました。

f:id:sgtech:20200126210448p:plain f:id:sgtech:20200126210453p:plain


パラメータを調節してもらうようにする

例えば、Blueprint関数ライブラリにパラメータを取得する関数を作成して、ゲームデザイナーの役割の人にアウトプットの数値を弄ってもらうようにします。

f:id:sgtech:20200126210354p:plain f:id:sgtech:20200126210357p:plain

 

関数ライブラリではなくマクロライブラリにする場合は、FormatText(テキストをフォーマット)ノードなどに気をつけましょう。この場合、関数ライブラリの出力は正しく値が渡りますが、マクロライブラリの出力値はnullとなります。
f:id:sgtech:20200126210401p:plain

値を画面に表示し続ける

PrintTextやPrintStringノードにおけるDuration(表示時間)を0にすると1フレームだけ描画されるので、Tickで毎フレーム呼び出すことで常に1つ表示されているように見えます。

例えば以下のように残り時間、体力、得点といったパラメータを表示しておくことをおすすめします。FormatText(テキストをフォーマット)ノード内に{hoge}を記述することでInputピンを増やすことができます。

f:id:sgtech:20200126210608p:plain


ずっと左上に出続けます。
f:id:sgtech:20200126210116g:plain

見ながら動作確認やレベルデザインに活用できます。短い期間でも数値の扱いでバグが生まれやすいので、おかしいなと思ったときにすぐ気づくこともできるでしょう。

 

デバッグキーを用意する

「ゲームをクリアしたことにする」「アイテムを取得したことにする」「次のレベルへ飛ばす」といったショートカットはレベルデザインやデバッグ作業を高速化します。キーボードを押した時に呼ばれるイベントを作成しましょう。

f:id:sgtech:20200126210914p:plain

グラフ上で右クリックして任意のキーボードイベントを検索するときに、なかなか見つからず苦労している方をジャム中によく見かけます。

たとえば「a」キーの場合、日本語環境では「a キー」、英語環境では「a keyb」まで入力することでサジェストを絞り込むことができます。

f:id:sgtech:20200126210918p:plain f:id:sgtech:20200126210922p:plain

 

または検索窓に「@」を入力(サジェストにキーボードイベントしか出てこない!)してインプットイベントをとりあえず作成し、イベントノードを選択した状態の詳細パネルから、Input Key部分から対応するキーやボタンを変更します。グラフ上で右クリックするよりも探しやすいと思います。

f:id:sgtech:20200126210927p:plain f:id:sgtech:20200126210932p:plain


エディタで配置するか、外部ファイルで配置するか、ランダムに任せるか

エディタでの配置

ゲームプレイのイメージをしやすく、プレイの実行自体もすぐに行えるので思ったことをすぐ試せる強みがあります。

熱中しだすと時間を消費するので、レベルデザインの担当者が時間を区切って取り組む必要があります。

f:id:sgtech:20200126210653p:plain

プログラマー側では、調整してほしいパラメータを公開するようにしましょう。

ブループリント変数 | Unreal Engine ドキュメント

 

おまけの⑥ではコインのBlueprintに「BigCoin」フラグを設けて、レベルデザイナーがフラグをオンオフすることでサイズとスコアの異なるコインの使い分けができるようにしました。

f:id:sgtech:20200126210703p:plain f:id:sgtech:20200126210656p:plain

外部ファイルに記述

設定箇所が多くエディタ内の操作では時間がかかる場合には、外部ファイルでまとめて設定できるような方法を検討するといいでしょう。

おまけの⑩では、ステージの起伏設定箇所が100個以上有ったため、Excelに入力してcsvよりUE4のDataTableへインポートするようにしました。Excelを使用する場合は、「条件付き書式」> 「セルの強調表示ルール」を設定することをおすすめします。

f:id:sgtech:20200126210626p:plain

 

例えばゲーム中の見た目と同様な色の使用や、設定の種類によって色をアサインすることで入力の段階から動作イメージをしやすくなります。

f:id:sgtech:20200126210630p:plain f:id:sgtech:20200126210642p:plain

CSVのインポートや、どのようにCSVを記述したらよいかは、こちらの記事がわかりやすいです。

ランダムに任せる

限られた時間の中で、手が回らない場合はランダムな配置に任せるのも手です。

プレイごとに内容が変わるので、いままで判明していなかった面白い部分や面白くない部分が見つかります。またジャムの終了後、試遊のために並んでいる人や気になって近くで見ている人達が自分でプレイするまでに飽きないです。

ただし同じゲーム内容を再現できないので、バランスを担保することが難しいです。

おまけの⑨のゲーム設計は、プレイヤー進行方向より流れてくるアイテムを取り続けるというものでした。しかし、アイテムをステージ上に手動配置する時間が足りず、ランダムを使用することにしました。

f:id:sgtech:20200126210634p:plain f:id:sgtech:20200126210647p:plain

 

0.35秒ごとに前方の4箇所からランダムで出現させる処理(右の関数)を書きました。

f:id:sgtech:20200126210638p:plain

40秒程度のゲームで100個以上のアイテムを出現させています。プログラムは1時間以内で書けましたが、同じ量を手動で配置して調整するとなると2, 3時間必要でしょう。

「とりあえず爆発させましょう」

ジャムの終盤でよく聞く言葉です。

理由はどうあれ、もう爆発させるしかない。爆発は全てを解決します。

Content Examples(機能別サンプル)より爆発を持ってきてみましょう。

 

Epic Games LauncherのUnrealEngine(左側)より、ラーニング(上側)より「機能別サンプル」を探してプロジェクトを作成します。

f:id:sgtech:20200126210138p:plain

 

作成してプロジェクトを開いたら(シェーダコンパイルを待つ必要はありません)、コンテンツブラウザの検索窓に「explosion」と入力します。

f:id:sgtech:20200126210156p:plain

 

爆発アセット「P_Explosion_Bomb」を右クリック、「アセットアクション」→「移行」を選択します。(英語環境では「Asset Actions」→「Migrate」)

f:id:sgtech:20200126210144p:plain

 

下図のように爆発アセットに参照されているテクスチャやマテリアルが階層表示されます。OKを選択し、移行先プロジェクトのContentフォルダを選択してOKします。

f:id:sgtech:20200126210147p:plain

 

画面右下に移行完了のメッセージが出ます。

f:id:sgtech:20200126210152p:plain

 

移行先のプロジェクトを開き、アクターを作成します。コンテンツブラウザで右クリック→ブループリント→ブループリントクラスを選択。

f:id:sgtech:20200126210202p:plain

ウィンドウからActorを選択します。

f:id:sgtech:20200126210246p:plain

 

作成したActorは「BP_Explosion」としました。

f:id:sgtech:20200126210206p:plain

 

ダブルクリックで開き、コンポーネントタブの「コンポーネントを追加」をクリック、検索窓に入力して「ParticleSystem」を絞り込んで選択します。

f:id:sgtech:20200126210210p:plain

 

コンポーネントタブはこのようになります。このParticleSystemを選択した状態(色が黄色になっている状態)にします。

f:id:sgtech:20200126210214p:plain

 

同じ画面の詳細タブから、「Particles」の項目を探し、中の「Template」行にあるプルダウンエリアをクリック、出てきたサジェストより移行してきた「P_Explosion_Bomb」を選択してください。

f:id:sgtech:20200126210219p:plain

 

Templateに適応された状態です。

f:id:sgtech:20200126210224p:plain

 

ちょっとだけ余裕がある人は、イベントグラフタブに移動してください。ない人はこれで「BP_Explosion」での作業は終わりです。画像を2個飛ばして「爆発の起動」から読んでください。

f:id:sgtech:20200126210229p:plain

 

BeginPlayノードより、Delay(2秒を設定)、DestroyActor(self:自分自身)とノードを作成して接続します。これで2秒後に自分自身を破棄します。

f:id:sgtech:20200126210232p:plain

爆発の起動

「BP_Explosion」をSpawnActorするだけで起動します。例えばレベルブループリントのBeginPlayでSpawnしてみます。爆発させたい位置(Transform内のPosition)をステージ真ん中辺りに指定しました。

f:id:sgtech:20200126210236p:plain

 

実行するとすぐ爆発します。終わり。

f:id:sgtech:20200126210241g:plain




ジャム中の注意点など

巨大なアセットが本当に必要か検討する

UE4のMarketPlaceやラーニングコンテンツでは高品質なアセットが並び、中には無料で手に入るものがあります。

これらは使いやすいと思いきや、大きいリソースはジャム中のイテレーションを鈍化させる原因になります。

おまけの⑧では広大な3つのステージを同時に使用しました。

  1. シューティング ゲーム | Unreal Engine ドキュメント

  2. Infinity Blade: Fire Lands:Epic Games:Epic Content - UE4 マーケットプレイス

  3. Infinity Blade: Ice Lands:Epic Games:Epic Content - UE4 マーケットプレイス

ShooterGameのビル内に、Fire LandsとIceLandsを入れこむ贅沢な使い方をしました。入れこむための配置調整に時間がかかった上に、結果としてマップを開く時間がとてつもなく長くなり、アプリのパッケージング時間も膨大となりました。

結果として提出するための動画撮影時間が足らずに中途半端なコンテストのエントリーになってしまいました。

f:id:sgtech:20200126210412g:plain

ゲームの本質的に不要であれば、無理に入れない方が良いかもしれません。

ゲーム画面の発表時には電源を接続する

ノートPCがバッテリー動作の場合、充分な電力がグラフィックカードへ送られず3Dゲームの実行が不安定になることがあります。

発表場所近くで電源を使用できるよう運営に手配していただくようにしましょう。

f:id:sgtech:20200126210523j:plain

ゲームジャムでUE4チームを作るには

テンプレートの活用やBlueprint開発、エディタでの高速なイテレーションによって、UE4はジャムの強力な味方になります。

しかしUE4だけの制限をしていないジャムにおいて、UE4チームが生まれる機会は少ないです。Global Game Jam (毎年世界同時に開催される最も大規模なジャム)では、Unityに比べてUE4で制作されるゲームの数は10分の1程度です。世界中の比率と日本国内の比率は同じくらいです。

UE4を使いたいなと思っていても、チームではUnityを使用する場合が多いと思います。

ジャム運営の方へ

UE4チームが組まれるためには、ジャム運営側の協力が必要だと思っています。あらかじめ参加者に希望(リーダーや使用ツール)を募るケースが多いと思いますので、参加時にエンジンの希望を出してもらうようにしてみましょう。

次に参加者の希望を公開 (公開する旨は伝わるようにする)して、ジャムのwebページで見えるように並べます。UE4の希望者は他にUE4の希望者が居ると集まりやすいです。

または、ジャムの参加枠にUE4枠を作成してみてください。どこからともなく集まります。connpassなどのサービスで枠を作成できます。

ジャム当日のチーム決めの後に、選択肢として考えてみる

チーム内にUE4経験者が居る場合は、UE4チームになってみることを検討してみてください。UE4未経験者が経験者に教わりながら触り始めて、機能実装やレベルデザインを主体的に行っている様子を何度も見てきました。ここでの経験者は私以外であるパターンもいくつか知っています。

おわりに

今回は個人的な活動を書き起こしてみました。私が活用したことのないものは書いておりませんので、良さげなノウハウや苦労した話を持っているよ!という方は、ぜひブログやスライドにして公開していただけたらと思います。

セガではグループ内で定期的にゲームジャムを開催しており、私のように毎回UE4を使う人や、その時によってアナログゲーム制作や電子工作を絡める方など、やりたいことを試す機会に恵まれています。ご興味がありましたら、ぜひ採用情報をチェックしてみてください。

採用情報| 株式会社セガ・インタラクティブ

そして私とUE4のチームを組んでください。

 

おまけ:これまでの制作物

簡単な説明・期間・画像を載せてみました。

Sega Game Jamで制作したものは[SGJ]とつけました。

画像の下にジャム前のモチベーションを書きました。


①: [SGJ]超電磁的なコインを飛ばすVRゲーム:1日

f:id:sgtech:20200126210958g:plain

ジャム前は、VR元年ということもありVRゲームを作りたいモチベーションでした。

バーチャルリアリティのテンプレートを使用しています。


②: クレー射撃のようなVRゲーム:2日

f:id:sgtech:20200126205831g:plain

ジャム前はとにかくVRゲームを作りたいモチベーションと、オリンピック競技的なものを作りたいと思っていました。

バーチャルリアリティのテンプレートを使用しています。

 

③: [SGJ]巨大化して求婚するゲーム:2日

 ※Sega Game Jam内に限り、セハガールモデルの使用が認められていました

f:id:sgtech:20200126210107g:plain

ジャム前は特に何も考えずに挑みました。

サードパーソンのテンプレートを使用しています。

 

④:[SGJ]コントローラやLED連動システムごと作った宇宙探査ゲーム:2日

f:id:sgtech:20200126225439g:plain

ジャム前はアーケードゲーム筐体を作りたいと思っていました。

フライングのテンプレートを使用しています。


⑤: 爆弾の設置側と解除側のゲーム:1ヶ月程度

f:id:sgtech:20200126205856g:plain

ジャム前はUE4のリプレイ機能(DemoRec)を使いたいなと思っていました。

サードパーソンのテンプレートを使用しています。

 

⑥: 昼と夜を切り替え対応する足場を乗り継ぐゲーム:2日

f:id:sgtech:20200126205842g:plain

ジャム前はUE4のライトシナリオ機能を使いたいと思っていました。

ジャム専用のサイドスクロールテンプレートを使用しています。

 

⑦: [SGJ]おじさんが失った青春を取り戻すゲーム:2日

f:id:sgtech:20200126210112g:plain

ジャム前は特に何も考えずに挑みました。

サードパーソンのテンプレートを使用しています。

 

⑧: プリンがぷるぷるするゲーム:1ヶ月程度

f:id:sgtech:20200126205917g:plain f:id:sgtech:20200126210741g:plain

ジャム前は、ゲームにならなさそうなものを無理やりゲームにしたいと思っていました。

サードパーソンのテンプレートを使用しました。プリンの軟体シミュレーションにはNVIDIA FleXを使用しています。

 

⑨: つばめが綺麗な円を描くゲーム:2日

f:id:sgtech:20200126205932g:plain

ジャム前は特に何も考えずに挑みました。

テンプレートは使用していません。

 

⑩: 地形をリバースさせ、せり上がる衝撃でジャンプし続けるゲーム:5日

f:id:sgtech:20200126210004g:plain

ジャム前は、アプリケーション容量を小さく収めるチャレンジ枠に挑戦したいと思っていました。地形をランタイムで生成しています。(ProceduralMeshComponent)

テンプレートは使用していません。

 

⑪: [SGJ]大崎オフィスにグループ会社が集結するということで、各事業所を回ってグループシナジーを集めていくタイムリーネタだったゲーム:2日

f:id:sgtech:20200126210045g:plain

ジャム前は、メガドライブミニ要素をどこかしらに入れたいと思っていました。実際にプレイヤーの前方より発射されます。

テンプレートは使用せず、OSSのOceanProjectを使用しています。

 

⑫: [SGJ]ヒトデが魚や人を食べて大きくなって星になるゲーム:2日

f:id:sgtech:20200126210021g:plain

ジャム前は、チーム分けでUnityチームのプログラムリーダーになっていたのでUnityの復習をしていました。当日の話し合いでUE4を使うことになりました。

サードパーソンのテンプレートを使用しています。

 

以上です。ここまで見ていただき、ありがとうございました。

SEGA GAME JAM 再始動!テーマは☆!!

f:id:sgtech:20191207144708j:plain

セガゲームス、セガ・インタラクティブ含め、セガサミーグループが大崎に集約され、いよいよシナジー効果が期待される中、先月11月2日にSEGA GAME JAMが再始動しました。

皆さんこんにちは。SEGA GAME JAM運営の麓です。

SEGA GAME JAMの運営としてはデザイナー向けの対応や、ポスターデザイン、ロゴデザイン、Tシャツデザインの調整などを担当しつつ、当日は主にデザイナーとして参加しています。

普段私はテクニカルアーティストとしてツール環境整備周りを担当していて、アセットを作らなくなって久しいのですが(元々はデザイナーでした)、GAME JAM中はただひたすらデザインアセットを作り続けることになる刺激的な時間をいつも過ごしています。

f:id:sgtech:20191207145048j:plain
f:id:sgtech:20191207145029j:plain

SEGA GAME JAMって?

今さらですが、今回初めてこのブログから読み始める方のために簡単にSEGA GAME JAMについて説明します。

SEGA GAME JAMは2日間の限られた時間で、小規模グループに分かれて、それぞれのグループで一からゲームを作ってしまおう!というイベントで、2012年7月の初回から年2回程のペースで開催されているイベントです。

参加するのはセガサミーグループ全体を対象とし、ゲーム制作部門ではない人も過去には参加しています。

CEDEC2013で効果や詳細は公表していますので、ご興味をお持ちの方は以下にアクセスしていただけるとより詳しく知ることができます。(要ログイン)

SEGA Game Jamがもたらした組織活性化の効果

SEGA GAME JAMの変化について

さて、今まで十数回にわたって、羽田は大鳥居で開催されていましたが、グループ各社が大崎に集約されて取り巻く環境や事情が変化してきました。

あえて挙げるとすると3点。

  1. 参加者の裾野が広がった
  2. 会場がすごくイベントっぽくなった
  3. ゲーム制作の作業時間が短くなった
f:id:sgtech:20191207145439j:plain
f:id:sgtech:20191207145705j:plain

参加者の裾野が広がった

昨年まではセガゲームス、セガ・インタラクティブは羽田の大鳥居に社屋を構えていて、SEGA GANE JAMの会場も大鳥居でした。

そのためか、基本的に参加者は自然と大鳥居に近い場所に住んでいるセガゲームス、セガ・インタラクティブのメンバーに偏っていました。 

大崎に集約された後、その新社屋が会場となることで距離的な制約などは緩和され、セガサミーグループ内の様々な人が気軽に参加できるようになりました。

内定者の皆さんもより参加しやすくなったのではないでしょうか。

f:id:sgtech:20191207151552j:plain
f:id:sgtech:20191207151529j:plain

※写真左は会場の隣でやっていた『ぷよぷよ!!クエスト』のイベントから差し入れのカレーです。

会場がすごくイベントっぽくなった

新社屋内の多目的スペース「TUNNEL TOKYO」を活用できるようになり、イベント感が増しました。

※「TUNNEL TOKYO」についての詳細は以下を参照してください。

tunnel-tokyo.jp

会場がイベントらしくなることで、テンションも上がりますし、より楽しい雰囲気の中で時間が過ごせるようになります。

f:id:sgtech:20191207151139j:plain
f:id:sgtech:20191207151237j:plain

ゲーム制作作業時間が短くなった

一見ネガティブな印象を持たれがちですが、会場の事情や昨今の働き方改革に合わせる形でイベント自体も時間の効果的な使い方へのチャレンジが必要になりました。

改めて、当日のタイムスケジュールを振り返ってみましょう。

 

一日目 (11/2)

  • 8:30  受付開始
  • 9:00  開始
  • 9:05  テーマ決め
  • 9:20  チーム分け
  • 15:00 企画発表
  • 20:00 α 版発表
  • 20:30 写真撮影
  • 21:30 会場 Close

二日目 (11/3)

  • 07:30 会場 Open ~ 随時制作再開
  • 12:00 β 版発表
  • 18:00 制作終了
  • 18:15 発表会
  • 19:00 試遊会&順次撤収開始
  • 20:00 完全撤収
  • 20:30 打ち上げ 参加は任意

 

以上から、ゲーム制作に使える時間は22時間程度というのがわかるかと思います。

そんな中でもちゃんと一つのゲームを作り上げることができたのは、参加した皆さんの実力の高さを実感しました。

SEGA GAME JAMの効果について

効果の程は?というと、SEGA GAME JAMの根本の趣旨は変わらないのでそこは今までと変わりません。例えば、

  • グループ会社、事業部、世代を超えた絆が生まれる!
  • 失敗を恐れずチャレンジできる!
  • 変わるきっかけが生まれる!

グループ会社、事業部、世代を超えた絆が生まれる!

このイベントが終わるとまた日常の自分たちの仕事へと戻っていきます。

しかし、ここで一緒にゲーム制作できた経験と記憶は消えることがありません。

仕事の中での再会もありますし、連絡を取り合って新しいアイデアを元に何かが生まれたりすることもあります。

f:id:sgtech:20191207145830j:plain
f:id:sgtech:20191207145859j:plain

失敗を恐れずチャレンジできる!

普段ふと思いついたことも、やりたいなーって思っていることも何かきっかけと時間がないとなかなか手をつけられなくて悩むことも多いと思います。

せっかく2日間という時間と協力してくれるメンバーを得る機会なので、いろんなチャレンジができます。

例えば普段プログラマーの仕事をしている一参加者もこの二日間は延々写真とビデオを撮り続けて、最後にはSEGA GAME JAMのプロモーションビデオを完成させました。また、私も普段使うことのないデザインアセット作成用のツールをいくつも試してきました。

そして過去には、モバイル開発にいた人もボルダリングを体験できるVRゲームをチームの力で作り上げることができました。

f:id:sgtech:20191207152537j:plain
f:id:sgtech:20191207145452j:plain

変わるきっかけが生まれる!

実は過去に、総務などゲーム開発をしない部門にいた人もこのイベントをきっかけに開発へと転身したということもありました。

f:id:sgtech:20191207152338j:plain
f:id:sgtech:20191207152308j:plain

これからも・・・

手短ですが、今回のBlog記事ではSEGA GAME JAMの再始動を改めて宣言し、ここ大崎で起きた変化を少しでも紹介したかったので筆をとってみました。


ゲーム作りの本質は変わりません。遊んでくれる方が笑顔で感動体験をしてくれる事が何よりの喜びです。

 

そのための、チャレンジの場、交流の場として、そしてゲーム作りを楽しむためにも SEGA GAME JAM は引き続き開催していきたいと思っています。

f:id:sgtech:20191208195859j:plain
f:id:sgtech:20191208195841j:plain

※最後のプレイ会の一場面

最後に、そんなGAME JAMが開催できるような社内交流が盛んで、開かれた職場環境で働いてみたいという方は以下をチェックしてみてください。

 

www.sega.co.jp


おまけ 

ここまでTech blogなのに何のノウハウも公開していないことに気づきました。

イベント開催レポなのでそんなにお話しできることもないのですが、一つだけ、社内GAME JAMを開催していたり、これから開催しようと思っているゲーム業界の皆さんへ・・・。

参加者のモチベーションが上がる要素の一つとして「いろいろな業界関係者が見学してくれるとモチベーションが上がる」という意見が過去の開催アンケートにいくつか見られました。

「社内」ということで多少難しい面もあるかと思いますが、少し調整を頑張ってゲーム業界周辺の関係者を見学に誘ってみてはいかがでしょうか?

 

それでは、ここまで読んでいただきありがとうございました。

良いJAM生活を。

 

そして良いお年をお迎えください。

セガのモーションキャプチャースタジオ紹介

はじめに

はじめまして。セガゲームスのモーションキャプチャーチームに所属している北川と申します。

業務内容としてはモーションキャプチャーエンジニアとしてワークフローの構築や収録オペレーターといったことをしています。(簡単にいうとモーションキャプチャーの撮影周り全般です)

モーションキャプチャーチーム内では、以下の三つの班に分かれて業務を行っています。

・撮影班:撮影~収録したマーカーデータの処理や小道具作成など

・エディット班:収録データのキャラクターへの流し込みと修正作業

・サポート班:上記の班をサポート

私はその中でも撮影班として収録業務を行っているので、今回はなかなか話をする機会のないセガのモーションキャプチャースタジオについてお話をさせていただきます。

 

 

セガモーションキャプチャースタジオとは

セガモーションキャプチャースタジオの歴史

セガは『バーチャファイター』(1993年発売)の開発時からと業界でもかなり早くモーションキャプチャーをゲーム開発に導入しました。

導入当初はモーションキャプチャーの専門チームとしては存在せず、2000年頃よりモーションキャプチャーチームとして部をまたがってプロジェクトをサポートするようになりました。

写真は過去のスタジオ写真の一部になります。スタジオも数回引っ越しをしていますし、使用しているシステムも様々な変化があります。

f:id:sgtech:20191127214712j:plain
f:id:sgtech:20191127214716j:plain
f:id:sgtech:20191127214705j:plain
f:id:sgtech:20191127214708j:plain
f:id:sgtech:20191127214722j:plain
f:id:sgtech:20191127214728j:plain

現在の所属はセガゲームスになりますが、セガ・インタラクティブ、アトラス、サミー、マーザ・アニメーションプラネットなどセガサミーグループの様々なプロジェクトに関わっています。

直近のタイトルでは以下のモーション収録に携わりました。

『龍が如く7 光と闇の行方』『東京2020オリンピック The Official Video Game』『新サクラ大戦』
『ファンタシースターオンライン2』『WCCF FOOTISTA』『Wonderland Wars』『けものフレンズ3』
『Fate/Grand Order Arcade』『艦これアーケード』『ペルソナ5 ザ・ロイヤル』『キャサリン・フルボディ』

  

スタジオスペック
  • カメラ:Vicon社 反射光学式カメラ 約100台          

    f:id:sgtech:20191127214815j:plain

  • 収録エリア:18m x 10m x 4m(横幅 x 奥行き x 高さ)
  • 常設設備:壁面鏡・ワイヤーアクション用設備・チェック用大型モニター

過去のモーションキャプチャーを利用するタイトルがバーチャファイターシリーズをはじめとした格闘アクションだった事もあり、『シェンムー』(1999年発売)制作の頃から立体的なアクションの要求に応えるためワイヤーアクション用の設備を設置しました。
現在のスタジオではワイヤーアクションの為に天井からのH鋼を二本に増やすだけでなく、床内にワイヤー用の専用フックも設置してより複雑なアクションがとれるようになっています。 

f:id:sgtech:20191127214737j:plain
f:id:sgtech:20191127214741j:plain
f:id:sgtech:20191127214638j:plain
f:id:sgtech:20191127214732j:plain

 

収録環境の工夫

リファレンス用のビデオ収録

反射光学式のモーションキャプチャーは収録しただけだとただの点データ(座標データ)になってしまいます。そうするとマーカーを付けていない部分の動きや表情などは収録することができません。

そのため、後作業で参考にするためにキャプチャー収録と同期をしてビデオを録画することが非常に有用になってきます。

昔はSD画質でも問題なかったのですが、指の表現や表情も撮影時のものを参考にすることが増えてきたことによってHD画質での録画の要望が高まってきました。しかし、要望の増え始めた頃はVicon社のキャプチャーシステムと同期してHDで録画するシステムは存在していない状況でした。

その話をモーションキャプチャーチームをサポートしてくれているプログラマーに話したところ、プログラマー同士の雑談から動画の処理に詳しい者がシステム作成に手を挙げてくれました。

そこからモーションキャプチャーチームの要望をヒアリングしたうえで、ハードの選定や録画・エンコードソフト、キャプチャーシステムとのリンク部分などを作成してくれました。

これによって国内でも非常に早い段階でHD画質でのリファレンス映像の収録環境を構築することができました。このシステムは今でも欠かすことのできないものとして運用されています。

社内のふとした繋がりによって当初想定していたより素早く期待以上の環境構築をすることができたと同時に、セガ社内の人材の厚さを実感しました。

f:id:sgtech:20191127214651j:plain
f:id:sgtech:20191127214655j:plain
f:id:sgtech:20191127214701j:plain
 リアルタイムプレビューのクオリティアップ

ビデオ収録でも触れましたが、収録したデータは座標情報のみとなり点と線の表示となってしまいます。そのため、MotionBuilderというソフトを同時に使用して確認用にキャラクターを動かす事が一般的です。
ただアクター(演者)さんとキャラクターとの体型の差などから不自然に動いてしまう場合も多々あり、エディット班では後処理を行う際にセガ独自のリターゲット方法を利用しており、アクターさんとキャラクターの動きの誤差を少なくすることで作業の軽減を図っています。

そこでエディット班とサポート班に協力をしてもらい、リアルタイムプレビューにも同様のリターゲットが行えるように改良を行っていきました。これによって収録をしている段階で動きの誤差が少なくなり、アクターさん・プロジェクトスタッフ双方のイメージの共有の齟齬が少なくなり再収録などのリスクも非常に低くなりました。

f:id:sgtech:20191127214646j:plain



指の収録

最近では指の動きを収録する事例なども多く見かけるようになりましたが、セガでは2010年頃からボディと一緒に簡易的な指のモーションの収録も行うようになりました。

それ以前は必要に応じてグローブデバイスを使うなどしたこともありますが課題も多く、指は収録後にビデオやイメージを基にプロジェクトのモーションデザイナーが手作業で動かすことがほとんどでした。その手法だと数をこなしたり、自然な動きを再現するのに非常に時間がかかってします。そこで収録時のアクターさんの動きを体と一緒に収録できれば指の自然な表現ができるのではと実装に向けて検証を始めました。

検証当初は5本の指全てにマーカーを付けての収録など様々なテストをしました。しかし出来上がるクオリティとデータクリーンアップ作業の工数を鑑みて、親指・人差し指・小指の3か所のみにマーカーを付け、その動きを基に5本の指を動かすようにしました。これによって手の開閉タイミングや細かい動きのニュアンスも収録できるようになり、プロジェクトからも好評で今ではすべての撮影で欠かせないものとなっています。

導入当初はリアルタイムプレビューでは満足に動かすことができず、撮影後のデータ処理の段階で初めて動く状況でしたが、改良を重ね現在ではリアルタイムプレビュー上でも動かせるようになっています。

末端の動きではありますが開閉や指差しなどだけでも表情のように印象が大きく変わるので、特にダンスやイベントシーンの収録時にイメージ共有がしやすくなりました。

f:id:sgtech:20191127214750j:plain



 

 

その他

小道具やセット

モーションキャプチャーの収録はカメラやソフトなどを見るととても複雑なシステムを使用しているように見えますが、実際の収録現場はアナログな作業が非常に多く存在しています。

生の動きであるアクターさんの動きをデジタルデータに変換するのがモーションキャプチャーです。なので、可能な限り演じやすく・ロスなくデータ化することが非常に重要になってきます。もちろんそのまま使用することはほとんどありませんが、だからこそその素材になる収録データはできる限りアクターさんの動きをしっかりと撮ることが最終的なクオリティにも貢献できると思っています。

収録しやすくなるように小道具やセットも可能な限りリクエストに応えられるように様々な準備を行います。演技しやすいように発泡スチロールや塩ビパイプなどを組み合わせて大きくても軽い小道具を作成したり、イメージに近くデータ収録に問題がないセットにするなど様々な工夫をして収録をしています。この部分は実際に現場で動きながら作業をするので、テクニカルなだけでなくADや大道具的な作業も行っています。

以下の画像はごく一部ですが、すべてチーム内のスタッフが作成したものです。よく見るとわかりますが、マーカーがついており小道具の動きも収録を行っています。収録したオブジェクトの動きもリアルタイムプレビュー上でしっかりと反映し武器などを構えた状態も確認できるようにしています。

 

f:id:sgtech:20191127214755j:plain
f:id:sgtech:20191127214800j:plain
様々な収録システム

モーションキャプチャーといっても様々なメーカーのいろいろな収録システムが存在します。セガのモーションキャプチャースタジオも当初から現在のViconのシステムではありませんでした。古くは磁気式といわれるものやVicon社以外のシステムを運用していました。

それらの経験は現在の収録にも活かされており、メインで使用しているシステムだけでなく他のシステムに関しても情報を収集したり撮影によっては他のシステムを運用したりしています。

例えばスタジオの広さが室内ではとても足りない場合や、収録をしたい環境(セットなど)を再現するのが困難な場合は持ち出して収録をすることができる慣性センサー式のシステム(Xsens MVN)を使用して収録を行ったりもしています。

また、映画製作で行われているパフォーマンスキャプチャーについても要望が高まっていることからフェイシャルキャプチャーやバーチャルカメラも同時に撮れる環境づくりを順次進めています。市販のものを購入するだけでなく、使い勝手を考え顔の動き・表情を収録するためのHMC(ヘッドマウントカメラ)や3DCG上のカメラを操作することができるバーチャルカメラを独自に作成もしています。

社内のスタジオとしてできるだけ多くの要望に応え、より良いものをプロジェクトに届けるべく様々な検証やサービスの展開を行っています。

f:id:sgtech:20191127214810j:plain
f:id:sgtech:20191127214805j:plain

 

 

最後に

今回はモーションキャプチャースタジオでの収録に関連した部分にスポットを当てて書いてきました。収録現場はPCでの作業もありますが、実際に自分が動いて対応をすることが多くあります。ビデオの収録やキャラを見ながらの確認などをしっかりと整備したことによって、イメージを共有しやすくしたり現場での撮影補助に集中することができるようになりました。動き回ることの多い現場だからこそ周辺のツールなどのありがたみを感じます。

f:id:sgtech:20191127214746j:plain



写真:撮影班一同

 

モーションキャプチャーチームでは一緒にプロジェクトを支えるメンバーを募集しています。

興味のある方はぜひサイトにアクセスしてみてください。

www.sega.co.jp


©SEGA

 

Powered by はてなブログ