読者です 読者をやめる 読者になる 読者になる

おじさんの適当ブログ

技術のことやゲーム開発のことやゲームのことなど自由に雑多に書き連ねます

プログラミング学習のモチベーションと教育の必須化について雑感

2020年度から必修化されるプログラミング教育について、今更ながらぼんやーりと考えていました。

色々と考えを巡らす内に、大学院生のときに、毎週月曜日に受けていたある講義のことを思い出しました。

毎週月曜日に受けていたある講義

「講師の方がITの最新動向について解説してくれる」という講義でした。講師は大学教授の方ではなく、企業に所属している非常勤講師の方でした。

その時点でホットなトピックスはもちろん、MikuMikuDanceなどの(初音ミクを知っている学生にとって)身近な話題も取り上げていたことを覚えています。講師の方は、学生の興味を惹けるトピックスを厳選し、面白おかしく話してくれていた印象があります。そんな感じの講義内容だったので、非常に人気が高かったです。受講後にはいつも「ITってやっぱ面白いな!!」という妙な充実感に満ちていました。

この講義ではプログラミングに関する話は一切ありませんでした。しかし、プログラミング学習に対するモチベーションは向上していました。文系出身の友人もこの講義のあとは苦手なプログラミングに積極的に取り組んでいたような印象があります。

受講後の「ITってやっぱ面白いな!!」という充実感によって、このモチベーションは引き出されていました。また、講義で知らないサービスなどに触れることで、「自分でWebサービスやツールを調べてみよう」という意欲にも繋がっていました。

プログラミング教育についての雑感

ここからは、プログラミング教育についてざっくり調べてみたことと、先ほどの講義の存在を踏まえた感想(?)です。

授業について

とりあえず情報収集のために以下をざっと眺めました。他にも色々あるようなのであとで読んでみたいと思います。

  1. プログラミング教育:文部科学省
  2. 小学校段階におけるプログラミング教育の在り方について(議論の取りまとめ):文部科学省
  3. http://jouhouka.mext.go.jp/school/pdf/programing_guide.pdf

3つ目のリンク先に、授業に対する感想がいくつか掲載されていました。「おもしろい!大変だった!もっとやってみたい!」という声がたくさんありました。

いずれも、ものづくりの楽しさを感じながら、プログラミング的思考を向上させるような授業のようです。ドリルをひたすら解く作業的な授業になっていないか心配でしたが、杞憂だったようです。良かった良かった。

やる気を引き出すことを目的とした授業の存在

なんだかプログラミング的思考を向上させるような現在のカリキュラムは良さそうな感じでした!一方で、教材という観点だけで見ると、現在はオンラインのプログラミング教材が非常に豊富です。その気になれば、学校でなくともプログラミング的思考をいくらでも鍛えることができちゃいます。プログラミングの虜になった子は、家に帰ったら早速、これらの教材を使って勉強しはじめるかもしれません。

やる気のある子がレベルアップするための環境は、すでに整っているように感じます。一方で、やる気がなければ、いくら将来必要なことだと言われても勉強する気にはなりません。

プログラミング教育の必須化にあたっては、「授業時間が十分に確保できない可能性がある」という懸念もありますが、やる気を引き出すことで間接的に解決できるのかもしれないなぁと思いました。自主的に勉強するようになるので。

なので、「毎週月曜日に受けていたある講義」のような授業を通して、「もっと勉強したい!」とやる気を引き出すことは大切だと思いました。こうした授業があれば、授業を通してITに魅力を感じた子の世界を広げてあげることもできそうです。世界を広げてあげることも、プログラミング教育の役割なのかもしれません。純粋に楽しい授業になりそうですし、そうした授業も行われるといいなぁ。

途中から何を言いたいのかわからなくなってしまいましたが、ここまで書いたので投稿しちゃいます。思いつきの書き殴りなので色々とツッコミどころがありそう・・・

「Game Programming Patterns」を読んで

本の概要

  • 1章に1パターンずつ紹介されています。計19のパターンが紹介されています。
  • 2章〜7章は、「オブジェクト指向における再利用のためのデザインパターン」にも記載されているパターンです。
    • いずれもゲームプログラミングの視点で説明されています。
  • 特に、8章〜20章の13パターンがこの本の核となるパターン達です。これら13のパターンには以下の項目が記載されいてます。
    • 「パターン誕生の背景」
    • 「パターンに関する説明」
    • 「パターンの適用条件」
    • 「パターン使用上の注意」
    • 「サンプルコード」
    • 「検討項目」
  • 本書の例文はすべてC++です。例はいずれもシンプルなので、C++を触ったことがない人でも、プログラミングの経験があれば問題なく読め進められると思います。
  • 著者の人柄が伝わってくるようなユーモアな注釈が随所にあります。

私の概要

どんな人間が感想を書いたのかは重要だと思うので、はじめに明確にしておきます。私はゲーム制作初心者です。仕事ではなく、趣味でゲーム制作をしています。ゲーム制作にはUnityを使用しています。仕事では、C#, Objective-C, Swift, Pythonあたりを使っていました。本書を手に取った理由は以下です。

  • 以前より、ゲーム分野に特化したプログラミングの参考書を何か1つ読んでおきたいと思っていました。
  • ゲームの規模が大きくなるにつれて、煩雑になりゆくコードに危機感を抱いていました。今のうちに手を打っておきたいと思いました。
  • 趣味のゲーム制作なので、クソコードだろうとなんだろうと書き放題です。加えて、間違いを正してくれる偉大な仲間もいません。自分なりにクソコードにならないよう気をつけているのですが、それが本当にクソコードでないかどうかはわかりません。クソコードと判断するためのヒントを得られればと思いました。

感想

どのパターンも中立的な立場でその特徴が書かれています。パターンの良い面も悪い面も書いてあり、使うべきでないケースまで書かれています。そのおかげで、デザインパターンを勉強したときにありがちな、「とりあえずなんでもかんでもパターンに当てはめてみる」という症状に陥ることがないと思います。

特に、「パターン使用上の注意」「検討項目」の項目は、非常に勉強になりました。どちらの項目も、パターンを使っているかどうかに関わらず参考になりました。デザインパターンそのものを丸暗記するのではなく、それらが着目している問題領域に着目して理解するような読み方の方が多くを得られると思います。このデザパタ本に限った話ではないと思いますが。

様々なデザインパターンのサンプルに触れることで、コードを書く際に考慮できることが多くなったように感じています。「本書を手に取った理由」に対する直接的な答えは得られませんでしたが、それを考えるための十分なヒントを得られたように思います。

ふんわり感想になってしまいましたが、以上です。

TOKYO INDIE FEST 2017に参加してきました

www.tokyosandbox.com 参加してきました!国内外問わず、多くの方々が参加していてすごい盛り上がりでした!「いつか自分で作ったゲームを展示するぞ!」という思いが強くなりました。

時間の制約があったので全てのゲームをプレイできませんでしたが、プレイできたゲームだけでも紹介させていただきます!PV等がすぐ見つけられたゲームは動画へのリンクとしていますが、そうでない場合は、サイトや記事へのリンクとしました。

アイサルビア

www.youtube.com

ワープを駆使して、ガンガンステージを突き進んでいくアクションゲームです。簡単な操作でバシュ!と気持ちよい音と共に繰り出されるワープアクションは病みつきになります。ちょっとプレイしただけでも気持ちよかったので、ワープアクションを極めるとさらに気持ちよくなれそうです。ステージクリア後にプレイを評価してくれる機能があり、100点目指してプレイするとまた違った面白さが見えてきそうです。ちなみに私は61点でした(悲しみ)。

常世の塔

www.youtube.com

24時間ごとに自動生成されるステージを舞台とした2Dアクションゲームです。難易度は決して低くなく、何度か挑戦してみましたが、クリアできる気配がありませんでした・・・。死亡すると、その場所に墓標が立ちます。「あーここで死亡した人がいるんだなー」とニヤニヤしながらプレイするのも面白そうです。「書き置き」など、他のプレイヤーとのゆるいつながりがあるのも魅力的です。アクションが苦手な人でも、みんなで挑んでいるんだと思うと頑張れそう・楽しめそうです。

リバーシエストⅡ

www.youtube.com

リバーシRPGゲームです。Ⅰはプレイしたことがなかったので、初めての「リバーシエスト」でした。タイル状のマップを進んでいき、敵のいるタイルに侵入したら、リバーシ風戦闘が始まります。はじめは攻撃と回復が可能となるルールがわからず混乱していましたが、ルールを理解できてからは非常に楽しくプレイできました。そして、このゲームのビジュアル・・・私の好きなゲームである「タクティクスオウガ」ライクではありませんか!それだけでプレイしたくなっちゃいます!スタミナやガチャなどのソシャゲっぽい要素がないのもますます硬派な感じがして好印象でした。

コトダマ勇者

www.youtube.com

「名前」によって能力が決まるキャラクター達と一緒に冒険するRPGゲームです。「おだのぶなが」など、既存の名前を入力すると侍のキャラクターが生成されるなどの要素もあるらしいです。また、同じ名前を入力すると、まったく同じキャラクターが生成されるとのことでした。SNSなどで教え合いながらゲームするとさらに楽しくなりそうです。作成したキャラクター同士を合成することで、キャラクターを強化することもできます。合体するキャラクターの名前によっては、面白い絵が生まれるかもしれませんね。

STAY

www.youtube.com

STAYは、ポイント&クリックな会話型アドベンチャーゲームです。コンピュータ越しに、誰もいない空間に監禁された主人公と対話することで物語が進んでいきます。主人公を直接動かすのではなく、会話を進めることでゲームが進んでいくところがユニークだと思いました。もの哀しげな雰囲気とドット調のイラストが醸し出す雰囲気がすごく良いです。

Piczle Lines DX

www.piczle.club

同じ色、かつ、同じ数字が書かれた2つのブロックを、数字と同じ長さの線を引いて繋いでいくパズルゲームです。シンプルなルールですが、うまく線を引くために少しだけ頭を使う必要があります。難しすぎない難易度のおかげで、次々とプレイできます。家にあったらずーーっとやってしまいそうです。

Original Journey

www.youtube.com

死にゆく惑星を救うために、様々な武器を駆使して敵を倒していく2Dアクションゲームです。1画面1ステージの構成となっており、画面上の敵を全滅させると、次のステージに行くか、基地に戻って自機を強化するかを選択できます。アクションゲームは「1画面に収まりきらないステージをどんどん進んでいく」というイメージが強かったので、1ステージが1画面で完結するというのは新鮮でした。武器を惜しげもなく使って敵を倒す感覚は、メタルスラッグシリーズを彷彿とさせます。

Alchemic Dungeons

app.famitsu.com

風来のシレントルネコのようなローグライクゲームですが、このゲームの最大の特徴は、拾ったアイテムを合成して新たなアイテムを錬金できることです。制限のある状況下でのアイテムのやりくりは、ローグライクゲームの面白いところの1つだと思います。アイテム合成により、アイテムのやりくりにバリエーションが生まれ、面白さ倍増です!

ナナツキ戦記

acodebank.jp

こちらはシミュレーションRPGゲームです。ユニットキャラクターを育成して、そのキャラクターで戦闘するゲームです。町を作ったりといったことも将来的に実装されるようです。これから開発を進めていくとのことでしたので期待して待っています!

アカとブルー

www.youtube.com

画面をなぞることで自機を操り、敵を倒していく縦スクロールのシューティングゲームです。攻撃と弾消し性能を併せ持つボムがあります。ボムは時間経過によりレベルが上昇していき、レベルMAXの状態でボムを打った時の爽快感はとんでもないです。画面をなぞることによる自機操作に違和感はなく、すぐに慣れました。むしろ、快適です。久しぶりのシューティングゲームでしたが、自分が思うように操作して弾を避けることができました(クリアできたとは言っていない)。シンプル、かつ、気持ち良いゲーム性はスマホ世代にもぴったりだと思います。

OPUS: Rocket of Whispers

OPUS 魂の架け橋 — 公式WEBサイト — SIGONO

ぐっと引き込まれる幻想的な世界観・雰囲気を持つ、アドベンチャーゲームです。このタイトルは今回はじめて知ったのですが、前作もあるようです。前作の OPUS: The Day We Found Earth も世界観は異なりますが、幻想的な雰囲気はどちらも共通しています。展示コーナーにサントラCDがあったことが印象に残っています。

NONUPLE NINE -被験体:999999999-

www.youtube.com

ポイント&クリックな科学アドベンチャーゲームです。可愛いイラストにほいほい釣られて見に行ったら、突然の頭部破裂というワードに衝撃を受けました。プレイヤーは「観測者」として、ドローンが送ってくるリアルタイム映像を見ているというシチュエーションで話が展開されていきます。導入部を知ってしまうと、最後まで話が知りたくなってしまいますね!

Tokyo Dark

www.youtube.com

こちらはプレイできなかったのですが、横目で見ていて面白そうだなぁと思ったので紹介します。Tokyo Darkは、ポイント&クリックなミステリーアドベンチャーゲームです。このゲームでは、ユーザの行動がゲームの展開そのものに影響を与えるようです。「自分の判断がゲームの世界に影響を与えている」という実感が得られるゲームは非常に素敵だと思います。ゲーム性に加えて、主人公の女性も非常に好みです。

Project LUX

www.youtube.com

可愛すぎて悶絶しました。導入部のみの体験でしたので、全編見たくてしょうがないです。この手のVRをやるとひたすらニヤニヤしてしまうので、それを隠すためのフルフェイスVRデバイスの登場を望みます。

From_.

jp.automaton.am

以前から気になっていましたが、こちらも時間の都合上プレイできませんでした・・・素敵な世界観がゲームの世界を飛び越えて、展示にも表れていたのがとても印象的でした。

Anima2Dでアニメーションを作成したときのメモ

前回の記事に引き続き、Anima2Dを触った時のメモです。以下のことを記載しています。

  • Poseについて
  • アニメーションの作成
  • Bake Animation

前回の記事はこれです。

subarunari.hatenablog.com

Pose について

  • Poseは、対象のオブジェクトの状態をAssetとして保存しておくための仕組みです。作成したPoseは個別にAssetとして保存されます。
  • なんらかのオブジェクトにPose Managerをアタッチすることで、作成したPoseの読み込みや保存がInspector上でできるようになります。 f:id:subarunari:20170510140244p:plain:w300
  • 「Pose」はアニメーション定義の際に役立ちます。ある状態を保存したり、読み出したりするのが容易になるのでとりあえずデフォルトの状態だけでも作成しておくと便利そうです。各部位のオブジェクトを束ねる親オブジェクトにアタッチするのが良い気がします。

Animationの作成

  • 通常のアニメーションと同様にAnimationのClipを作成し、それに対してアニメーションの動作を定義します。Anima2Dの場合は、アニメーションを作成するためにIKのPositionだけ変更すれば良いです。 f:id:subarunari:20170510140319p:plain
  • 各Boneのアニメーションを定義する必要がないので、非常に簡単に、かつ、なめらかなアニメーションが作成できます。IKの位置情報を変更しただけでこんな感じでAnimation Clipを作成できました。

f:id:subarunari:20170510140336g:plain

Bake Animation

  • しかしながら、IKをランタイムで動かすと高コストな計算処理が発生してしまいます・・・この高コスト問題を解決するために使われるツールが、Bake Animationです。
  • Bake Animationをすることで、Boneを直接動かすアニメーションが作成されます。
    • Window -> Anima2D -> Bake Animation とすると、IKに関連しているすべてのBoneに対してアニメーションのためのプロパティをいい感じに焼き付けてくれます。 f:id:subarunari:20170510140401p:plain
  • IKを動かすたびに生じる高コストな計算処理を回避したいのであれば、IKはアニメーションの対象から外しておいたほうが良さそうです。スクリプト経由でもIKを操作するのは極力控えた方がいいのかもしれませんね。
    • Bakeしているのであれば、仮にIKのGameObjectを非Active、もしくは、削除したとしても、アニメーションを今まで通り動作します。
    • 高コストな計算処理は回避できますが、画像にある通り大量のKeyが追加されるのでデータサイズは大きくなってしまいます。

まとめ

前回の記事でうねうねさせて感動していましたが、IKはあくまでアニメーションを簡単に作成するためのものだったんですね。「IKで動作を定義し、Bake Animationsをすることで、Boneに対するAnimationを作成する」が基本的なアニメーション作成の流れのようです。

追記:Unite 2017でAnima2Dについてのセッションがありました!

www.slideshare.net

Anima2DでSpriteMeshとBoneを追加したときのメモ

趣味の開発で、マニュアルに沿ってちょろっと触ったのでちょろっとメモとして残しておきます。この記事では、以下のことを記載しています。

  • SpriteMeshの設定
  • Boneの設定
  • IKの設定

今回は、このエビフライみたいな魚の尻尾の画像を使っています。製作中のゲームに出てくるボスキャラの尻尾です。もっと複数のパーツがあるほうがメモとして良かったかもしれませんが、自分の練習も兼ねていたのでひとまずこれだけ。これをうねうねさせることを目的とします。

f:id:subarunari:20170510133506p:plain:w300

事前準備

  • Asset StoreからAnima2Dをインポートしておく。
  • Anima2Dで動かしたい一連の画像をひとまとめにして、単一のテクスチャ(アトラス)にしておく。
  • Sprite ModeをMultipleとし、Sprite Editorでスライスしておく。
    • Anima2Dは Sprite Mode が Multiple のときに手順通り作業できました。Sprite Editorから画像スライスもしておく必要があります。f:id:subarunari:20170510133700p:plain:w200
    • Singleだと、Boneをバインドした段階で画像が表示されなくなってしまいました・・・別途、表示可能な手順があるのでしょうか・・・。

手順

1. SpriteMesh の作成

まずは対象のオブジェクトの SpriteMesh を作成します。SpriteMeshはAnima2Dのための特別な形式のSpriteです。既存のSpriteを右クリックして、 Create -> Anima2D -> SpriteMesh で作成できます。対象とするすべてのSpriteに対して変換を実施しておきます。

以下の図のように、Spriteに対して、SpriteMeshが1つ作成されます。マニュアルには、この1対1の関係を保ちなさいと注意書きされています。

f:id:subarunari:20170510133935p:plain:w300

SpriteRendererがアタッチされたGameObjectに対して、 2D Object -> SpriteMesh することでも作成できます。間違えてしまったら、SpriteMeshクリック時に追加されたオブジェクトを削除しておけばOK。

2. SpriteMesh の設定

SpriteごとにSprite Meshを設定します。SpriteMeshの Inspector にある「Edit Sprite Mesh」ボタンをクリックすることで、SpriteMesh Editorを表示できます。このEditor上で、SpriteMeshをマニュアルで編集できます。必要に応じて、Meshをきめ細やかにします。 色々なパターンを試して、いい感じのポイントを探るしかないのかなーと思いますが、良いアテの付け方とかあるんでしょうか・・・。

f:id:subarunari:20170510134033p:plain:w200

続いて、 Sprite Mesh Instance コンポーネントをGameObjectにアタッチします。Inspector上のSprite Meshの項目が「None」になっているので、先ほど作成したSprite Meshを関連づけます。最終的に、以下のような Sprite Mesh InstanceSkinned Mesh Renderer の2つのコンポーネントがアタッチされた状態になりました。

f:id:subarunari:20170510134237p:plain:w200f:id:subarunari:20170510134209p:plain:w200

3. Boneの追加

SpriteMeshで表面の設定ができたので、続いて、内側の構造である Bone を追加していきます。 2D Object -> Bone や Alt + Shift + B でBoneを追加していきます。Boneの配置場所は、対象のオブジェクトの子である必要はありません。個人的には、Boneは対象の子オブジェクトにしておいたほうが散らかりにくいし、わかりやすいと思います。

Boneを追加できたら、InspectorでBoneを対象のオブジェクトにアタッチします。Boneが複数で構成されている場合、一番親のオブジェクトを Set Bones に持っていけば子も含めたすべてのBoneを設定できます。ここまで設定できたら、再度、Edit Sprite Meshを開いてBoneをオブジェクトにBindします。

f:id:subarunari:20170510134340p:plain:w200

Hierarchy上で対象のオブジェクトを選択すると「Bindボタン」が押せるようになります。選択しないと押せないことにしばらく気づかず詰まっていたので注意・・・画像のようにBoneがカラフルになれば、SpriteMeshに対して、Boneが設定できたことになります。Sceneウィンドウ上で、Boneを回転させてみると、画像がついてくるのが確認できます。Boneを動かしても画像がうんともすんとも言わない場合は、何か設定できていないことになります。

4. IK (Inverse Kinematics) の追加

ここまでの状態でSpriteに対して、SpriteMeshとBoneが追加できました。しかし、この段階ではまだBoneが個別にしか動作しません。冒頭に書いた通り、目的はうねうねさせることです。Bone同士が関連しあって動作しなければ、うねうねは実現できません。

そうした動作を実現するために、 IK を追加します。IKは Inverse Kinematics の略です。これはわかりやすく解説しているページがたくさんあるので、そちらを参照してもらえればと思います。私は、今回Anima2Dを使うにあたって、はじめてこの概念を知りました。末端のBoneに対して IK を追加します。IKのTargetパラメータにBoneを関連づけます。

f:id:subarunari:20170510134742p:plain

選択できるIKには、 IK CCDIK Limb があります。手足にはIK Limbを利用し、それ以外のものにIK CCDを利用すれば良さそうです。2D Object -> IK CCD2D Object -> IK Limb で各コンポーネントを追加できます。ここでは、IK CCDを追加しています。IKの各種パラメータを調整してやることで、より自然な動きに近づけることができるので、SpriteMesh同様、色々試して見て良いポイントを探ると良さそうです。

ちょっとわかりにくいですが、Boneが赤いほうがIKなし、白いほうがIKありです。いずれも末端のBoneを90度曲げただけですが、IKを設定したほうは全体が緩やかなカーブになっています。はじめにうねっとしたときは感動しました・・・!

f:id:subarunari:20170510135008p:plain

すごく初歩的な内容になってしまいましたが今回はここまでです。IKについては初めて知った概念だったので、これから3Dのゲームを作成することもあると思うので、よく理解しておかねばと思いました。

Anima2Dでのアニメーションについてはこっちに書きました。

subarunari.hatenablog.com

Unite 2017 Tokyoに初参加してきました

5月8日、9日と2日間に渡って開催されていた Unite 2017 Tokyo に参加してきました!人生初Uniteです! 会場にいた時間すべてが楽しく感じられました。Day1のながーーーい受付行列さえも、Unityユーザが今まさに一同に介しているのだと思うと興奮に変わりました。そんな Unite 2017 Tokyo の発表資料は以下のページで参照できます。 events.unity3d.jp

Twitterで、ハッシュタグ #Unite2017Tokyo をつけたツイートがたくさんされているので、そちらを眺めるのも面白いです。

ピックアップ

ゲーム製作歴が浅い私にとっては、すべてのセッションが新鮮で面白く感じました。その中でも、私が特に面白かったセッションをピックアップします。

Unity UI最適化ガイド 〜ベストプラクティスと新機能

www.slideshare.net

最適化が十分でないUIに少しずつ修正を施して、少しずつ最適化していくデモを披露してくれました。スライドではその過程を見られないので、動画がおすすめです。「Bitbucketにあるソースコードを見てね」と定期的に言っていたのも印象的でした。コードレベルで何が起きているか理解しておけば、更なる最適化への一歩が踏み出せそうです。昨日から早速少しずつ目を通しています。

bitbucket.org

いかにして個人制作ゲームで生きていくか〜スマホゲームレッドオーシャンの泳ぎ方〜

www.slideshare.net

これまでなんとなくで捉えていた物事が、1つ1つ紐解かれていくような感覚に陥りました。セッションを聴き終えると、まるで説法の後のような、妙にスッキリとした感覚になりました。ブランディングに関する話が、特に印象に残っています。

最適化をする前に覚えておきたい技術

www.slideshare.net

こちらは発表資料を後から見ました。Profilerの使い方など、Unityにおけるパフォーマンスチューニングに必要なことが非常にわかりやすく整理されていて勉強になりました。動画の公開が待ち遠しいです・・!

Unityで楽しむノンフォトリアルな絵づくり講座:トゥーンシェーダー・マニアクス

www.slideshare.net

難しそうという理由でシェーダーに関するセッションを避けていましたが、トゥーンシェーダーという言葉に惹かれました。 シェーダーに関する知識はまったくないので不安でしたが、却って、すべてが新情報で非常に面白かったです。シェーダー関連のセッションは他にもいくつかあったので、それらも後で見ておこうと思います。UTS2も使ってみたいなぁ。

好きなゲームを作り続けるために、僕らは何をすべきか

これはDay2のランチタイムに行われたトークセッションです。 https://madewithunity.jp/info/unite-2017-tokyo-day2/

インディーゲーム開発者の方々の生の声を聞ける非常に面白いセッションでした。トークセッションが終わった頃には、ゲーム製作意欲がとんでもないことになっていました。トークセッションについては動画公開されるかどうか不明です・・・されるといいなぁ。

(※動画はありませんでしたが、 まとめ記事が公開されていました!)

補足

タイムテーブル上で資料公開されていない「魔法使いプリキュア!」EDでのUnity映像表現の詳細解説」は、4Gamer.netさんに記事があったのでこちらからどうぞ。

www.4gamer.net

まとめ

Unite 2017に参加して、興味・視野の広がりを感じました。ゲーム製作に関する情熱がより強くなったのも確かに感じました。 来年もぜひ参加したいです。

シーン遷移時に暗転するようにしたときのメモ 〜DOTweenとUniRxを添えて〜

DOTweenUniRx をやっとこさ導入しました。 はじめは勉強の目的で、しばらく便利なアセットを使わず実装をしていました。そろそろいいかな?と思い、これらを導入しました。控えめに言って最高です。

今は勉強のために、DOTweenとUniRxでいろいろな処理をがむしゃらに書き換えているところです。シーン遷移時の暗転処理はその1つです。色々なところに適用してみることを目的としているので、あまり良くない使い方をしてしまっているかもしれません・・・。

public class CustomSceneManager : DontDestroySingletonMonoBehaviour<CustomSceneManager> {
    private const float FADE_DURATION = 0.5f;
    [SerializeField]
    private Image image;
    private CanvasGroup canvasGroup;

    protected override void Awake()
    {
        base.Awake();
        canvasGroup = image.GetComponent<CanvasGroup>();
    }

    public void LoadWithFade(string sceneName)
    {
        image.raycastTarget = true;
        var process = SceneManager.LoadSceneAsync (sceneName);
        process.allowSceneActivation = false;
        process.AsObservable().Where(p => p.isDone).Subscribe(p => 
        {
            canvasGroup.DOFade(0f, FADE_DURATION);
        });

        canvasGroup.DOFade(1f, FADE_DURATION).OnComplete(() =>
        {
            while(process.progress < 0.9f){ /* 何か処理があれば */ }
            process.allowSceneActivation = true;
            image.raycastTarget = false;
        });
    }
}

ポイント

DontDestroyOnLoad

DontDestroySingletonMonoBehaviourはその名の通り、Singleton かつ DontDestroyOnLoad なMonoBehaviourです。元のシーンで画面を真っ黒にして、ロードしたシーンで真っ黒解除という動きにしたかったので、シーンを跨いでも維持されるようにしました。

Imageオブジェクト

uGUIのCanvasに画面全体を覆う黒塗りのImageを作成しておき、ImageにCanvasGroupをアタッチしたものを作成しました。CanvasGroupの透明度を変更することでフェードイン・フェードアウトを表現するようにしてみました。

f:id:subarunari:20170505234517p:plain:w200

Imageの透明度ではなく、CanvasGroupの透明度を変更するようにした理由は、将来的に文字やプログレスバーを暗転後の画面に表示しようと考えているためです。 暗転の始まりと終わりのタイミングで、Image.raycastTargetのtrue/falseを切り替えています。演出中にあらゆるクリックを画面全体を覆うImageオブジェクトで雑にブロックしたかったからです。

DOTweenとUniRxを使ったところ

透明度を徐々に変更するところに DOTween.DOFade を使いました。DOFadeは、CanvasGroupだけでなく、SpriteRenderer, Image, AudioSourceなどにも用意されています。指定したalpha値まで指定した秒数をかけて変化させてくれるので非常に便利です。1行でシンプルに書ける点も好きです。

UniRxは画面をだんだん明るくしはじめるタイミングをコントロールするために利用しました。だんだん暗くする処理は、暗くしたいタイミングで処理を始めれば良いと思うのですが、だんだん明るくする処理は、シーンの読み込みが終わったタイミングで始めたいなぁと思いました。なので、allowSceneActivationtrueにしたタイミングではなく、AsyncOperation.isDonetrueになったタイミングで明るくしてみることにしました。変に作り込むのは避けたかったので、 以下のように、AsyncOperationを AsObservable() して、処理完了フラグが立ったタイミングで画面が明るくなるようにしてみました。果たしてこれで厳密にできているのだろうか・・・。

process.AsObservable().Where(p => p.isDone).Subscribe(p => 
{
    canvasGroup.DOFade(0f, FADE_DURATION);
});

参考

  • progress と isDone には、以下のような仕様があるので注意が必要です。私もこの仕様に気づかずにしばらくハマっておりました・・・ただ、よく考えてみると、allowSceneActivation = false としていてシーンの有効化をブロックしているのだから処理が完了しないのも当然ですよね。 answers.unity3d.com