TwitterBootstrapとかhaxeでゲーム作ったときのメモ

こないだ公開したやつの技術的な話。前提として、何万人にも使ってもらうサービスを完成させるというよりは、そこに至るまでの企画の種を他のデザイナと議論するために一旦公開する、ぐらいの温度感です。

配布

  • 永続化したいデータはある
  • けど、一人プレイで完結させるためサーバ持ちたくない
  • ので、ネイティブアプリ

UI周り

  • 激しい演出とかアニメーションは無いからcocos2dxとかunityとかを使うほどでもない
  • マップとか戦闘シーンを描画するのにenchant.js、特にavatar.enchant.js使うと楽
  • 全体のレイアウトは特に変わったことはしないので普通にTwitter Bootstrap

その他、候補にあったものとしては

  • widget.enchant.js入れて全部enchant.jsで書く

余計なことせず全部canvasでやってしまうとそれはそれでスッキリするものの、細かいレイアウトの調整とかシーン管理とか全部手動でやらないといけなくてわりと大変。

  • AppFramework

モバイルっぽいUI作るセットが一式揃ってて楽な感じあるものの、ちょっと枠から出たことしようとすると結構大変。あと使ってる人があんまいないのか、情報が少ない。

  • おとなしくネイティブで書く

特にクロスプラットフォームにこだわったわけでもなく、仮にそうだとしても大した量じゃないので普通に書いても良かったものの、Twitter Bootstrapだと

<div class="progress progress-striped active">

て書いただけでアニメーションするゲージが出てきたりするのがとても楽。この楽さでネイティブUI組み立てれるのがあればそっちを考えたかも。

エンジン

UIとかデータIOとは別の、対戦の純粋な計算処理は結構複雑になる & そこをどんどん拡張していきたいみたいなのがあって、そこだけちょっと固めに書きたかった。

  • altJSでhaxeとかがTypeScript型付きで良い
  • ポケモンとかを想像すれば、ある程度は抽象化できても汚いswitch地獄避けられない気がするのでenumが良いらしいhaxe
  • あと、追々サーバーとかクライアントネイティブとかで同じロジックを動かすかもしれないことを思えばhaxeは魅力的

その他

  • 色々と生で書くのはツライのでslim, sass, coffee
  • をmiddlemanでビルド
  • Gruntでも同じことができるものの、Gruntfile結構書かないといけないので、今回やることの枠を出ないならほぼ何も設定しないで良いmiddleman
  • シーン切り替えも普通にページ遷移使うし他に激しいこともしないので、BackboneとかAngularでなくKnockout

やってみて思ったこと

  • 結局データ大して保存しなかったので全部localStorageに寄せてブラウザアプリにすれば良かった
  • haxeは手触りかなり良かったものの、constとかfinalとかimmutableを保証するのがinlineくらいしか無くて唯一そこだけ残念
  • LLVMとかEmscriptenを思えばC++で書くのも一考の余地ありかも
  • OSとか端末の違いでfastclickが上手くいかなかったり細かい挙動が違ったり、たかがこの規模でもWebViewの問題はきっちり表面化した
  • ここから品質上げてくならサーバ書いてクライアントはネイティブとかcocos

無職の森オフラインをリリースしました

f:id:blankblank:20140301233556p:plain

https://play.google.com/store/apps/details?id=net.uracon.lostjob

モンハンで攻略Wiki見ながら装備を考えてるときとか、ポケモンで対戦考察スレ見ながら作戦考えてるときとか、良いゲームはゲーム外の時間も楽しい。TCGにも作ったデッキで戦うプレイングとは別に、デッキを作る時点でのメタゲームというのがあって、例えばカードショップで知らない人と対戦するときは「最近こんなデッキが流行ってるから対策デッキを作ろう」とか「このデッキだとあのカードを出されると不利になるからあえてちょっとだけバランスを崩そう」といった環境下での読み合い、みたいな駆け引きがある。

 

そういう、メタゲームだけでも割りと面白いよね、というところからじゃあ逆にメタゲームだけでゲームになるんだろうか、という意図でデザインしました。上手くいけば場所と時間を同期せずにそこそこ競技性のある対戦が実現できるんじゃないかと、そういう「プレイングの無いTCG」を目指してます。

 

というのを、ゆけ勇者とか冒険者ギルド物語とか放置ゲーの文脈上に組み立てました。あと、古き良き(?)5連打ソシャゲも、散々言われたものの振り返ってみれば良いものだったなという気持ちもあって、このまま歴史に埋もれていくよりかは少しでも前に進められればという意図も含めました。

 

最終的に対戦ゲームを目指してる中で、まずはCPU戦でどんな感じになるか見てみようという意図でタイトルにわざわざオフラインを付けてます。

 

あとは最近の気分です。

グリー株式会社を退職しました

この数年間、とにかく前に進みたくて、届かないものに手を触れたくて、それが具体的に何を指すのかも、ほとんど脅迫的とも言えるようなその想いが、どこから湧いてくるのかも分からずに僕はただ働き続け、気付けば、日々弾力を失っていく心がひたすら辛かった。
そしてある朝、かつてあれほどまでに真剣で切実だった想いが綺麗に失われていることに僕は気付き、もう限界だと知ったとき、会社を辞めた。

秒速5センチメートル

f:id:blankblank:20130704185306j:plain
f:id:blankblank:20140131151506j:plain
f:id:blankblank:20131230165042j:plain





世話になったな!また仕事しようぜ!!

教育とかアジャイルとかゲームデザインとか

昔よく若手発掘的な、学生に投資してみようぜな意図のプロジェクトに応募したり実際にお世話になったりしていて、そこで培ったものが今役に立ってると実感している。そこで会った人、特にそういうことやろうって企画/遂行した人に感謝したいけど、今感謝しても仕方ない気もしている。というのも、プロジェクトが終わった時点ではめでたしめでたし程度のことしかなく、実際に何か利益を生んだかと言えばそうではなかった。きっと報告会とかがあって、上司なのかお金出してくれる偉い人なのかに、ねえねえどういう成果が出たのねえねえ?って問い詰められて返答に困ったのかなあと思えば、むしろ企画した人にお礼が言いたいというよりは、企画に懐疑的だった人にその正しさを説いて回りたい。そういう「ワシを育てたのはアイツだ」的な、教育やろうぜって度胸のあった人達が正しく評価される仕組みがあればいいのにと思う。


最近如何にしてチームで良いソフトウェアを作るかということを考えることが多くて、なにか活かせることは無いかとアジャイルサムライを読んでいる。なるほど納得できる部分が多くて、特にチーム全体のスキルセットがなるべく平滑化されてる状態が良く、特定のレイヤーに特化したスキルを持った人よりアレもコレもできる人が数人いるべき、というのが共感できた。そういうチームを作るためにどうするかまでは掘り下げられていなかったけど、結局は学習/教育する環境が大事なのかなあと。教育って言うと仰々し過ぎるかもしれない。
誤解を恐れず言えば、仕事って如何に誰にでもできることに分解していくことなのかなと思っていて、ハイパーなチームはきっと人が倍になれば二倍の速度が出る。それは流石に銀の弾丸が過ぎるとしても、タスクが常に並列化されてて人の増減に柔軟に対応できる状態というのは、目指すべき理想の一つなのかもしれない。


ゲームを作るのは、言い換えれば遊んでいる人を如何にゲームの熟達者にするかということでもあり、そのためにUIデザインであったりレベルデザインであったりを試行錯誤し続けていて、そこで培った知見ってきっと教育に適応できる部分が多いんだろうなと。周りにも教育系のことやってる/やりたがってる人結構いるらしく、そういう人達の取り組みが上手くいくといいなと思いました。

環境

仕事ですごい失敗をしてしまって三連休とても忙しくなるはずが逆にすることが無くなってずっとピクミンで遊んでいた。見たことのない生物に遭遇したときの何をしだすか分からない恐怖と、多数の犠牲によって徐々に敵の習性が分かってくるのが"未知の惑星に降りて食料を探す"という世界観を表現していてとても良い。


トレーディングカードの"環境"って言葉が好きで、これはザックリ言うと使えるカードの種類を指していている。例えば有名なマジック・ザ・ギャザリングだと、何年も前からあるゲームで全てのカードの種類をあわせると膨大なので、「ここ数年の間に出たカードだけで遊ぼう」というルールがある。直近数年なので、新しいカードが出ると昔のカードが使えなくなる。前まで凄い強いカードだったけど新しいカードの中に天敵が入っていて全然強くなくなったり、逆に日の目を浴びなかったのが邪魔者が消えて新たな価値を見出されたりする。そのルールで勝ち続けるには一つの戦法に拘らず、環境に応じて常に最適な組み合わせを考えて打ち手を変えなくてはならない。トレーディングカードの"環境"は「進化したものが生き残るのではなく、環境に適応したものを進化していると言う」という言葉が指す環境ともマッチしていて、良い名前だと思う。


すごい失敗した話に戻って、モバイルとかソーシャルのゲームは出た頃に比べて量も増えたし質もずいぶんと良くなっている。そういう環境でどういう手を打てば良いか、軽くて速い手で本当に良いか、やったとしてその意図は何か、というとこまで考慮できていなかったのが良くなかった。今いるチームは力x時間つまり仕事量だけでいうと結構なエネルギーが出る方だと思うから、力を使う方向とタイミングを間違えるととても悲しいことになる。


言われないと気付けなかったのと、色んな人に迷惑をかけてしまったのをとても反省している。でも今は敵の大群の中に数匹のピクミンを置き去りに帰還してきたことの方が反省している。彼らはもう助からない。

特定の条件で要素が重なったときChromeとSafariで表示が違う

どうも親要素と子要素それぞれに-webkit-transformが指定してあると重なったときの表示が異なるみたいです。

これをChromeで表示させるとアイコンが隠れ、Safariだとはみ出します。親要素の-webkit-transformを無くせばSafariでも隠れます(画面クリックでトグルします)。なぜだろう。GPUがどうこうという話でしょうか。

いきなりゲーム作れって言われても慌てないための方法

楽しくお酒を飲むための集まりに行ったらたまたま9分でゲームを作るイベントが始まってたまたまカバンに開発用のマシンが入っててたまたまエディタが立ち上がってたってこと、よくあるよねー。先日の9minではそんな状況でも慌てないための汎用的に使える方法が編み出されていたので紹介します。

テキストメソッド

決められたお題を順番にタップしていくゲーム。「秋葉原」「映画」「プログラマ」だとこんな感じになります。

どう見てもお題に沿っていますね。こちらはUEI近藤さんが発案されていました。ベテランの貫禄が溢れていますね。

アトラスメソッド

AtlusXを使った方法です。

有無を言わさずテーマに沿っていますね。こちら同じくUEI須田さん発。超えてきた無茶振りの数を感じさせますね。

餃子メソッド

最後は@さんの餃子メソッド。これはソースのコメントにテーマを書く手法で、テーマが「どらやき」「餃子」とかだと次のようになります。

...

// どらやきの処理
dorayaki = new Sprite(32, 32);
dorayaki.x = 100;
dorayaki.y = 100;
dorayaki.addEventListener(Event.ENTER_FRAME, function() {
    this.x += 2;
});

// あとで餃子も実装する

...

手間がかからなく、テーマに沿おうとする意志もビンビン伝わってきますね。


回を増すごとに9分で言い訳を考える集まりになってくると思いきや、先日の9minではPostScriptやCoqでゲームを作る人もいて未来を感じました。これからもenchant.js関連のイベントではうっかり開発環境を持ってきてしまうようにしたいですね!!