6/11 (土) に鹿児島キャリアデザイン専門学校で HTML Party かごんま 2016 が開催されましたのでそのレポートその二です。
- HTML Party かごんま 2016 レポート (その一)
- HTML Party かごんま 2016 レポート (その二)
- [近日公開] HTML Party かごんま 2016 レポート (その三)
その一では四つあるセッションのうち、最初の二つを紹介しました。今回は残りの二つのセッションの紹介をします。
セッション
～ゼロから完成まで～シューティングゲーム「Rulikaces」制作レコード2015 (遠矢 龍平氏)
三時間目は会場となる鹿児島キャリアデザイン専門学校で教鞭をふるっている遠矢龍平先生による、学生と協業で HTML5 でゲームを作った時のお話でした。
実は去年の HTML5 Conference 2015 in 鹿児島で遠矢先生率いる鹿児島キャリアデザインゲーム制作サークル (GDC) にシューティングゲーム「Rulikaces」を展示をしていただきました。このセッションは、その開発記録となります。(GDC のみなさん、その節は大変お世話になりました!)
GDC では C 言語と Direct X を中心にゲームを開発をしており、HTML5 や JavaScript は未知の領域だったそうです。その中で HTML5 のゲームを作るために、GDC で使われているフレームワーク systemOZ を移植し、ゲームの部分を C 言語から JavaScript に移植できるのでは? とチャレンジを開始したそうです。
ゲームを作る上で非常に重要な「キーバッファ以外でのキー入力の取得」「60fps が出せるか?」などなど、重要なポイントを一つ一つ解決していき、ゲームが十分作れるのが分かったとのこと。
逆にできなかったことは「物体の色調整」。ゲームではよく、色違いでキャラクターを増やすという方法が取られますが、方法が見つけられなかったそうです。色違いのキャラクターを別の画像として持つことで解決したそうです。最近試したらできたそうですが、ちょっと重かったそうです。(詳しくご存じの方がいらっしゃったらぜひ教えてください!)
C 言語の部分は、意外と単純変換で移植できたとのこと。特に C 言語の関数ポインタを JavaScript の関数オブジェクトで簡単に置き換えられたのは大きかったそうです。(本日私の一番の驚きです!) もちろん、パフォーマンス的に問題がある書き方も出てくるのはわかっていたそうですが、二週間という短い時間で移植するために今回は諦めたとのこと。
その他さまざまな工夫をこらし、学園祭でも販売したそうです。
やってみての感想は、「ハードウェアに縛られない開放感がある」「テキストエディタとブラウザがあれば開発環境が出来上がるという軽さが魅力」とのこと。苦労する部分もありますが、手軽に始められて誰にでも見せられるのはウェブのいいところですね。
発表の内容が非常に濃く、なかなか文章だけだと伝えきることができません。ぜひ動画を見てください。
ちなみに、GDC では薩摩剣士隼人ボッケモンバトラーズ２を開発中だそうです。
最後に、私はゲームプログラマーを目指していたこともあり、非常に興味深いお話でした。機会があれば systemOZ とそれを HTML5 に移植した時のお話を詳しく聞きたいですね!
FLEXBOX-MEN: Apocalypse 〜display: flex で柔軟にレイアウトしよう！〜 (森 史憲氏)
最後のセッションは、地元鹿児島で活躍中のフリーランス、森史憲氏による 新しいレイアウト方法の CSS3 Flexbox の紹介です!
「Web のレイアウトはなやましい」「怪獣のように暴れまくる」。ホームページを作成されている方なら誰でも共感できるのではないでしょうか? 古のテーブルレイアウトや、float による回り込みを使ったもの、inline-block を利用したもの、position を使った直接的な指定など、さまざまな方法があります。ですが、これらは帯に短したすきに長し! Webzilla (怪獣) が暴れまくります。助けて! FLEXBOX-MEN! ということで、この問題を解決するのが Flexbox です。
通常、div 要素を連続して書くと、縦に並びます。display: flex を追加することで、これを横に並ばせることができます。
- 順番の反転や並び替え
- 縦方向に並び替え
- 垂直方向の位置の調整
- 隙間の調整
- 折り返しの定義
- 他...
本当にいろんなことができます。使わない手はないですね!
使い方だけではなく、地雷ポイントの解説もありました。
- ブラウザーサポートとしては IE が厳しい
- Android 4.3 以前の標準ブラウザーは、仕様策定前になるのでプロパティ名や値が異なる
- IE10、IE11 はいくつかバグがある
- 表示の順序が変更されても DOM の順序は変わっていないのでプログラムを書く人は注意!
その他、フレームワークの紹介もありました。Flexbox について分かりやすくまとまっていますので、ぜひ動画やスライドを見てください。また、デモで利用した教材は CodePen flexbox-men にて公開されています。こちらも合わせてご利用ください。
Webzilla が倒せたか気になる方は、ぜひ動画をご覧ください。
なお、森さんは鹿児島で「てげweb」という勉強会を毎月開催されています。今月は 6/30 (木) ですので、興味がある方はぜひこちらをご覧ください。(大体、月末の金曜日に開催されることが多いです)
まとめ
後半のお二人は地元鹿児島の講師によるセッションでした。
HTML5 がゲームを作るプラットフォームとしても大変有用なこと、Flexbox という新しく簡単に使える CSS レイアウト方法について詳しく知ることができ、非常に楽しかったです。
その三に続きます!