Skip to content

HTML5/JavaScriptによるゲーム開発はプログラミング入門に最適なのだ

プログラミングを学びたいなら、HTML5とJavaScriptでゲーム開発するのが一番の近道だと思う。

なぜかというと、オブジェクト指向という、かなり面倒な概念をおそろしく具体的に学ぶことが出来るからだ。
たとえば「イージス・コマンド」というゲームを例に取ろう。

このゲームは迫り来る弾道ミサイルをイージス艦のミサイルで迎撃するというゲームだ。

このゲームの画面に表示されているものは、全てオブジェクトである。

しかも、このオブジェクトを使ったプログラムそのものは非常に簡潔に書くことが出来る。

例えば、迎撃ミサイルの後ろに煙が表示されているが、その煙部分のクラス定義は以下のようになっている。

Smoke = enchant.Class.create(enchant.Sprite,{  //Spriteクラスを継承
    initialize:function(x,y){
        enchant.Sprite.call(this,16,16);  //16x16でSpriteを初期化
        this.image = game.assets['smoke.png']; //画像ファイルを指定
        stage.addChild(this); // ステージに煙を出現させる
        this.x = x-6; //初期座標を指定
        this.y = y-4;
        this.scaleX=0.25; // 煙を実際のサイズよりも小さく表示
        this.scaleY=0.25;
        this.addEventListener('enterframe',this.move); // 毎フレームごとにmoveメソッドでアニメーションする
        this.cnt=0; //カウンタをリセット
    },
    move:function(){
        this.cnt++; //カウンタを更新
        if(this.cnt%4==0){ //4フレームに一度だけ煙をアニメーションさせる
            this.frame++;
        }
        if(this.cnt>16){ //16フレーム経過したら、自爆してこのオブジェクトを削除する
            this.removeEventListener('enterframe',this.move);
            stage.removeChild(this);
            delete this;
        }
    }
});

たったこれだけだ。
これは週刊連載に間に合わせるため、全てのコードは2時間弱という非常な短期間で作られている。
そのためリファクタリングなどは一切掛かっていない。それでもこれくらい簡潔に表現することができるのである。

さらにいえば、ミサイルの後ろに出現する煙のひとつごときにオブジェクトの生成と消滅をするなんて、一昔前の常識的なプログラミングスタイルから言えば、乱暴すぎてあり得なかった。

実際、これと同じようなスタイルでC++言語でプログラムを書くというのは、僕には恐ろしくてできない。mallocとfreeのコストや、それによって発生するフラグメンテーションを意識しているからだ。

ところが現代のJavaScriptではそういうことを意識する必要が全くない。
仮想マシン上で確保されるメモリはより入念に管理されているし、昔だったら、パフォーマンスを落とさないために自力でメモリ管理まで書くのがプロのゲームプログラマの条件と言っても良いほどだったが、JavaScriptで書く場合は、そういうややこしいハードウェア的な制約を全く意識することなく、「素直に」書けばそれなりの動作速度で動いてしまうのだ。

ハードウェア的な制約を一旦忘れて、力技でプログラミングるすスタイルを、慶應大学SFCの増井敏之教授は「富豪的プログラミング」と呼んだ。

そして今やJavaScriptとHTML5は、携帯電話の上でさえ、この「富豪的プログラミング」を可能にしている。
これは率直に言って驚くべきことだし、古くからのプログラマである僕は多いに驚いている。

昔はゲームプログラミングといえば、ロジックよりずっと以前にハードウェアの制約との戦いであり、ハードウェアの性能を限界まで引き出すのが、ゲームプログラマの腕の見せ所であり、誇りだった。

enchant.jsはもともとBASICでゲームを作るように気軽にゲーム開発につかえることを目指してHTML5/JavaScript向けに開発したものだが、実際には今のWebブラウザとハードウェアがあまりに進化していたために、BASICでは到底およばなかったような恐ろしく複雑で重い処理を、ほとんど制約を意識せずに書くことが出来る。

もちろん、かといって制約から完全に自由なわけではない。
けれども、これほど奔放にオブジェクト指向を、その設計された本来の意味で活用してかなり複雑なゲームを作る、という体験は今までにない大きな可能性を感じざるを得ない。

たとえばRubyやPythonといった言語からオブジェクト指向を学ぼうとすると、オブジェクト指向における「オブジェクト」とは、数字を入れる箱だったり、メソッドを入れる器としてしか認識できない。

しかしもともとオブジェクト指向とは、オブジェクト同士がメッセージをやりとりすることによって複雑な処理を協調動作させていく、というイメージから生まれたものだ。

今日メソッドと呼ばれているものは、もとは「メッセージ」と呼ばれていて、それはオブジェクト間が文字通りメッセージをやりとりする、というイメージの中で生まれたものだ。

言葉とイメージのつながりは初心者にこそ重要で、目に見えないなにものかが「オブジェクト」であるよりも、目に見える爆発やミサイルといったものが「オブジェクト」である、と言われた方が圧倒的に理解し易い。

そしてクラスの継承や多態性(ポリモーフィズム)、ダックタイピングといった直感的な理解がやや難しい概念も、ゲームでこそわかりやすくできる。

そのうえ、特に複雑な最適化の工夫や特殊な努力なしで、イメージ通りに書いたコードが素直に動く。
「思ったことが思った通りにできる」という手応えは、初心者にとってなによりもの励ましになるはずだ。

かくして、半日もしないうちにゲームプログラマーが誕生する。

それから少しずつ複雑なことを学んで行くことが出来る。
HTML5/JavaScriptはプログラマーへのスーパーフリーウェイだ。

実際、ARCで研究員の同級生で、全くの素人たちを集めて、JavaScriptによるプログラミングを教えてみたところ、夕方にはみんな自分の思い通りのプログラムをなんらかの形で書けるようになるところまで上達した。

パズルを楽しむように課題に挑戦し、自分の力で解いて行くことでプログラミングを自分のものにしていくという体験は、彼らを夢中にさせたのだ。

この経験をもとに、今現在、プログラムの全くの初心者がenchant.jsを使ってプログラミングの基礎を覚えることができるような教育プログラムを構築できないか模索中だ。

この教育プログラムをもとに、実際にイベントを開催して、うまくいったら、教育プログラム本体はオープンにして誰でも手軽に地元の友達や有志をあつめて勉強会を開けるようにできないかと思っている。

とにかく、今のJavaScriptは本当に学び易くて面白い。これは確かなのだ。

このエントリーをはてなブックマークに追加
はてなブックマーク - HTML5/JavaScriptによるゲーム開発はプログラミング入門に最適なのだ
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.js + node.jsで作る非同期型ネットゲームのプロトタイプ
  2. Canvasで3Dワイヤーフレームに挑戦!
  3. 札幌のプログラマー集まれ! HTML5 + JavaScriptによるゲーム開発ハッカソンを札幌で8月6日開催!
  4. shi3z式ゲームプログラミング入門 #9 同じソースから全く別のゲームを作り出す
  5. 10/21 enchant.js初のオフィシャルイベントを秋葉原で開催!発表者も募集中!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*