4連休の初日は、秋葉原Cocos2d-html5もくもく勉強会#4 に参加してきました。

秋葉原Cocos2d-html5もくもく勉強会#4 - connpass

参加経緯

僕はCocos2dもゲームプログラミングも業務経験がないド初心者ですが、実は、昔、学生の頃は僕もガラケー向けの落ち物パズルゲームを作ったり、ちょっと特殊なブロック崩しを作ったりしていました。せっかくだから、その頃の作品を最近のスマートフォンに移植したいと思いつつ、仕事が忙しいことを言い訳にしてなかなかできずにいました。

そんな中で、ちょうどこのイベントがGW中に開催されることを知って申し込みました。初参加です！

Cocos2d-js *1とは

Cocos2d（Cocos2d-x）主にモバイル向けのクロスプラットフォーム2Dゲーム作成ライブラリで、C++で開発することを基本としています*2。（http://www.cocos2d-x.org）

Cocos2d-jsは、Cocos2d-xのJavaScriptバインディング機能を利用して、同様のコードがWebブラウザ上で動作するようにしたライブラリです。言語はJavaScript†使います。Webブラウザとエディタさえあれば開発環境はが揃うので、非常に取っ付き易いライブラリです。

しかも、Chromeなどの最近のブラウザではネイティブとも遜色ないほど軽快な動きをするらしいです。Webビューに貼付ければそのままスマホアプリにできるとか。もっとも、端末の性能を最大限に活用するなら、Cocos2d-xでネイティブにコンパイルした方が良いらしく、その方法もあるようです。*3

Cocos2d-JS | Cocos2d-xにサンプルプログラムが公開されています。

これなら、JavaScriptなどのWebの知識を活用できるので、僕でも取っ付きやすそうです！

勉強会の様子

会場は株式会社あゆたさんの開発室です。以前、お茶の水の方に開発室があったときに別の勉強会でお邪魔したことがありましたが、岩本町のビルに移転していました。きれいな会場のご提供ありがとうございます。

自分は12時15分頃到着しましたが、既に2名の方が無言でカタカタしていました。 参加者が全員集まったところで、自己紹介と今日やる内容を発表し、最後にみんなでできたことを発表するというスケジュールで、あとは皆一言もしゃべらずひたすら黙々していました。

こういう雰囲気だと、集中できて良いですね！

自分がやったこと

下記のebookがAmazonで販売されていたので、購入してひたすら頭から写経していました。(500円！安い！)

書いたプログラムの内容はこのebookを読めば良いわけですから、ここでは紹介しません。（笑）

本の感想

本職の方々の意見はどうなのか分かりませんが、この本は説明も易しく、ゲーム開発者の気持ちも伝わって来て、良い本だと思います。自分は少しばかりゲーム開発の素地があったからかもしれないので、全くの初心者だとどういう感想があるかは分かりませんが、少なくとも僕はこの本一冊で入門は良さそうで、あとは公式ドキュメントやWebの情報でなんとかなると思いました。

やってみた感想

学生の頃すこしDelphiやC#でゲームを作ったりしてた経験に照らし合わせると、ハード面もずいぶん進化しているのか、ライブラリが良いのか、昔「これはダメ」と言われたやり方が全然大丈夫になっていて驚きました。

例えば、Delphiでもラベル（TLabel）をフォーム（TForm）に貼り付けて、ラベルのLeft, Topプロパティをタイマー（TTimer）で動かせば文字を動かすことができますが、そんなことをするとチラつくし、滑らかじゃなかったので、そうではなくて、1フレーム1/60秒になるように処理落ちを考慮しながら計算しながら、毎フレーム画面を再描画し、それも、都度描画するとチラつくから、裏で描画させたものをまとめてコピーして。。。（ｒｙ

このebookでは、宇宙船を操作して敵から避けるゲームを作っていくのですが、いきなり、ラベルをたくさん作って配列に入れたりするんですね。敵の動きはラベルの座標を動かす感じです。あと、フレームの計算とかも自分でしないで、60fpsなら60fpsと設定するだけであとは、update関数に処理を書くだけなんですね！ゲーム作りの最初数日を消費した苦労が。。。。*4

そもそも、言語がJavaScriptってのが楽すぎます！配列は事実上、メモリの管理とかもないしいいですねえ。。。

JavaScriptを書くのに良いエディタは？

JavaScript開発の環境として、以前このブログで下記のような記事を書きました。 EclipseのJavaScript環境（JSDT）を快適に使う方法 - susumuis Info

このときは、ExtJSというRIAライブラリを使おうとして環境を構築していたのですが、ExtJSとCocos2d-jsの共通点として、非常に巨大なJavaScriptライブラリをロードするというところがあります。従って、このライブラリを開発環境のライブラリパスに含めてしまうと、コード補完に数秒という、非常に残念な環境になってしまいます。なので、今回も、Cocos2d-js関連のライブラリは外してしまいました。プロジェクトのプロパティ画面から、下記のキャプチャのようにして、Cocos2d-html5-v2.2.3.min.jsを外しています。

これで、かろうじて開発できるようになったのですが、これはこれで、残念な開発環境でした。Cocos2d-jsのコードの特性上、ほとんど補完が利きません！例えば、次のようなコードを書くのですが

var Result = cc.Layer.extend({
    init: function() {
        this._super();
        var size = cc.Director.getInstance().getWinSize();
        // 省略
        return true;
    }
    , onTouchesBegan: function(touches, event) {}
    , onTouchesMoves: function(touches, event) {}
    , onTouchesEnded: function(touches, event) {}
    , onTouchesCancelled: function(touches, event) {}
});
var ResultScene = cc.Scene.extend({
    onEnter: function() {
        this._super();
        var layer = new Result();
        layer.init();
        this.addChild(layer);
    }
});

cc.Layer.extendみたいにして、継承を表現してしまうため、ResultSceneの定義の側でnew Result()とか、layer.init()が全く補完できません。これなら、テキストエディタによる語句補完の方がマシです。

ということで、最終的に僕が選んだのはAtomです。

Atom

別に、Web業界で大人気のSublime Textでも良かったんですが、JavaScript書くなら相性が良さそうな気もしますし、今後活用して行こうと思います。

会場にいた人にどんなエディタ使っているのか聞いたところ、IntelliJを使っているとか。。。。それは最強ですね。ｗ;

しょっぱなcocos2d-xサイトが落ちてたので、GitHubからライブラリをダウンロードしてサンプルを実行しました

たまたま http://www.cocos2d-x.org/ が一時的に落ちてました。（すぐに復旧しました）

早速、ライブラリをダウンロードして、サンプルを実行しようとした時にこうだったので、「僕は何をしたら良いんだ」状態になってしまったので、githubからソースを落としたりしてみました。

READMEに従って

$ git clone git://github.com/cocos2d/cocos2d-html5.git
$ cd cocos2d-html5/
$ git submodule update --init
$ python -m SimpleHTTPServer

とやりましたが、なぜか、http://localhost:8000/にアクセスしてもページがありません。 どうたら現在のdevelopブランチには、デモ用のindex.htmlとかがないようです。そこで下記のようにして、2.xブランチに切り替えたところ、サンプルのindex.htmlもダウンロードされてきました。

$ git branch -a
* develop
remotes/origin/HEAD -> origin/develop
remotes/origin/NPM
remotes/origin/develop
remotes/origin/gh-pages
remotes/origin/master
remotes/origin/v2.x
$ git checkout -b v2.x origin/v2.x
$ python -m SimpleHTTPServer

ただ、本の中で紹介されているライブラリソースを一個のjsファイルにコンパクションしたCocos2d-html5-v2.2.3.min.jsは含まれていませんでした。これは自分で生成できるのでしょうけど、そうこうするうちに、公式サイトが復活したので、普通に http://cocos2d-x.org/download から落としちゃいました。

ゲーム作ってみようかなあ

ゲームプログラミングには疎いのですが、思ったよりも短時間でゲームを作れることが分かりましたし、昔作ったブロック崩しゲームのようなゲームは簡単に実装できそうです。

昔はゲームプログラミングを勉強しようとすると、C言語でHello, Worldから入って、慣れて来たら、Windows SDKでウィンドウを作るだけのコードを書くのに何百行も書いて*5、Microsoftのヘルプファイルと格闘し、慣れて来たらDirect Xに挑戦して。。。という道を歩まなければならなかったので、今は良い時代になったなあと思います。

ゲームを作って利益を得ようとすると非常に大変な世界と聞きますが、趣味の範囲でちょっとした表現として、ゲームを作るというのは楽しいです。「なんか思いついちゃったんで、一晩でこんなクソゲー作っちゃったーｗｗｗ」なんてのを繰り返してたら、思ったより楽しいゲームができてしまったとか、そういうの良いですよね！

ピアノなんかと同じです。プロになろうとすると大変ですが、趣味でゲームプログラミングをする。へたくそで良いんです。楽しめれば。

よく人に雑談で言ってることを書いてみました。駄文です。忙しい人は読まないでください。

このブログのプロフィールとか、僕のTwitterのbioとかに「クリエイティブな人とコラボしたい」と書いています。でも、僕はコミュ力が高い方じゃなくて、初対面の人に積極的に話しかけるのも苦手な方です。人に頼むのがめんどくさいから自分でやってしまったりします。そんな僕がよく「コラボ」「コラボ」って言っているのはなにか不思議に聞こえるかもしれません。そう思った経緯を考えてみました。

初めて人とコラボして作品を作ったなと思ったのは、高校の時、先輩が作ったVBのゲームを当時出たばかりのiアプリ用Javaに移植したときでした。自分ではこんなアイデアは思いつかないし、そもそもベースとなる知識もないので、移植作業を行いながら先輩に尊敬の念を感じていました。ただ、プログラムの美しさについては、Javaで書いた僕のコードの方が上だという自信がありました。この作品がなければ、僕は人に「これを作った」と言える成果が学生時代に残せなかったと思います。

　　オリジナルはまだ公開されています。
　　物質作成 〜分子ができるよ〜 - 窓の杜ライブラリ

　　僕のiアプリ版はもうバイナリでの配信をやめてしまいましたが、
　　こちらにソースをpushしてます。*1
　　https://github.com/susumuishigami/bunshi2

次に強烈な経験としては大学時代の思い出です。当時僕はコンピュータサークルのプログラミング部門のリーダーをしていました。まあ、C言語のいろはを教えたりしますが、ただ、黒い画面にHello, worldと出してばかりではつまらなくて飽きてしまうので、何か工夫をしたりします。そこに、ある年入った新人が強烈なセンスのやつでした。

まずはHello, worldを教えて、次にじゃあ、「数あてゲーム」を作ってくださいと課題を出します。数あてゲームってのはこんなのですね。

私が思った数字を当ててください

1
もっと大きいです。
100
もっと小さいです。
50
もっと大きいです。
75
惜しい！
77
正解！

答えの数字はランダムじゃない方が面白いんですよ！どの数字を選ぶかは作る人次第ってわけです。特定の数字を入れたら面白いメッセージをいれるのもありです。その課題に対して彼が作って来た作品はこんなのでした。

1〜300までの話術であの子を口説け
次の話術は何にしますか？ > 1
きみはオヤジギャグを言った。あの子はしらけているようだ。
次の話術は何にしますか？ > 200
きみの話にあの子はクラっときた。
次の話術は何にしますか？ > 220
ここは日本の山の話をしよう
次の話術は何にしますか？ > 223
きみは富士山の話をした。。。君はあの子の心をゲットした

のような感じだった思います。正確な文章とかは残っていないので、適当に僕が書いているので異なっていると思います。
ソースコードは延々のif文でした。printfとscanfだけでよくここまで作るものだと、クリエイティブな人ってほんとちょっとしたものを与えるだけで、作品を作れるのですね。

次に与えた課題は、rand()関数を教えたので、じゃんけんゲームを作ってくるようにという課題でした。想像できますか？彼が作って来たものはこんな感じだったかなと思います。（記憶をたどっているので多分違って、もっとナイスな文体です）

君の話術で彼女を落とせ
君の精神力：100
彼女の精神力：100
1> 積極的な話題 2>無難な話題 3>必殺技

1〜3がじゃんけんになっていって、勝ち負けによって「精神力」が削られていくのですね。出力されるテキストがまた面白かったです。まあ、少々テーマが下品ではありますが、彼の文体はそれが許せる面白さがありまして。僕が書くとただのヘンタイみたいなのですが、そこら辺が彼のセンスでした。

悪のりした僕は、

「僕がビジュアルな画面を出力するインターフェース作るから、きみは黒画面にprintするだけのゲームを作ってくれれば、本格的なゲームが作れるよ！」

と言いました。ということで、作りました。
僕が人生で一度だけギャルゲー*2を作った黒歴史ｗｗ

それは、画面に

ぷるぷる

と書くとキャラクターがぷるぷる動くとか、ピカピカ光るとか必要なエフェクトを彼と話し合いながら、僕はJava Swingを使って作り上げました。この機会がなければ、まず作らなかったでしょう。僕がSwingを使った経験はこのときだけです。それにしても
学祭の当日は恥ずかしかった！！
けど今では良い思い出です。

そんなわけで何が言いたいかというと、僕にないものを人に提供してもらって、僕はその人にないものを提供する、その結果作品が残るというのが気持ちよかったというわけです。つまり、クリエイティブな才能を持っている人に、その才能を発揮する手段提供することの楽しさを感じてしまい、それが今の仕事にも繋がったと思います。

だから、昨年秋の発表（JJUG CCC 2013 Fall で発表してきました - susumuis Info）で、一緒に発表してくれたデザイナーさんが

「プログラミングできないのに、自分でプログラム作ってるみたい」

と言ってくれたことは、僕にとってこの上ないうれしい言葉でした。

自分は今Web業界に身を置いていますが、Webの好きなところは、誰でも簡単にページが作れて、それはCSSによって自由に見栄えをいじることができ、JavaScriptによって動かせてしまうところです。コミュ力の乏しい人間なのでSNSとか人と繋がってどうのこうのってのは実はあんまし興味がないんですよね。

はっきり言ってビジネスとしてうまく行くかどうか、人を幸せにするかなんて二の次です。コラボすること自体が楽しいんだから仕方がない。それができるなら、どんな努力もするわけで、それが僕が技術を勉強する原動力なのかなと最近思っています。

今日もそういうわけで、自分の技術を磨き、コラボ相手を探しています。

以上、何の価値もない駄文をここまで読んで頂きありがとうございました。