enchant.js Developers Blog

The Latest News on the HTML5 + JavaScript Game Engine enchant.js

Archive for November, 2011

やあみんな。shi3zだよ。

三日間の短期集中連載だからガンガンポストしていくよ。

さて、前回の最後のプログラムは実行してみたかな?
マウスカーソルに不思議な動きで宇宙船がついてくるね。

この動きの秘密は、もちろんプログラムにある。

ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
this.x += (mouseX-this.x)/10;
this.y += (mouseY-this.y)/10;
};

ひとつずつ解説しよう。

(続きは以下から)

まず、this.xのあとに続く記号、+=は、this.xに右の式の値を足し込むという意味になる。
this.x+=1だと、this.x=this.x+1と同じ意味になるわけ。これはゲームでは異常によく使う記号だから覚えておこう。

次に、mouseXという謎の変数が突然出てくる。
これはお察しの通り、僕の作った最速ゲーム学習用システムが用意している変数だ。

この変数には常にマウスカーソルのX座標が格納されている。
ではmouseYには・・・そう。マウスカーソルのY座標だ。

この式は、mouseXからthis.xを引いた値を10で割ったものをthis.x自身に足し込んでる。

これは一体どういうことなのか?

まず、プログラムとしてはマウスカーソルに宇宙船を近づけたい。
それにはいくつか別のもっとわかりやすい方法もある。

例えば次のようなプログラムだ。

ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
if(this.x > mouseX) this.x-=10;
if(this.x < mouseX) this.x +=10;                if(this.y > mouseY) this.y-=10;
if(this.y < mouseY) this.y +=10;
};

こんどは動きはどう変わっただろうか?前回のコードではヌルっという動きでマウスカーソルをまっすぐ追いかけた。

今回のコードでは斜めにしばらく進んだ後、横または縦方向にまっすぐカーソルを追いかけてくるようになるはずだ。

この動きの差はどうしてうまれるのか?すべての秘密はソースコードにある。

前回示したコードより、後者のif文を沢山使ったコードのほうが理解しやすいはずだ。

もし、自分の位置(this.xとthis.y)がマウスの位置と違ったら、それぞれ10ドットずつ移動しろ、という命令を書いているわけだね。

けれども、カーソルがたとえば45度以外の斜め方向に居るとき、x、yの増加量はともに10ずつとなって、結局斜め45度の動きになってしまう。

この動きは非常にぎこちなく、なんだか変な感じだ。

それにくらべると、最初の例に用いた式は、シンプルだが効果的だ。

この数式がどういう動きを生み出すのか。下の図を見てほしい。

マウスカーソルの座標から宇宙船の現在座標を引くと、これは宇宙船からマウスカーソルへ伸びるベクトルになる。

これを足すと、宇宙船がいきなりマウスカーソルの位置にワープすることになる。

これはもっとシンプルなプログラムで試すことができる。

       ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
this.x += mouseX-this.x;
this.y += mouseY-this.y;
};

10で割るのをやめてみると、いきなり宇宙船がマウスカーソルに張り付いたような動きになるはずだ。

これを10で割ることで、マウスカーソルに近づけば近づくほど細かい動きになっていき、あの独特のヌルっとした動きになるのだ。

このヌルっとした動きがなんとなく「気持ちよく」感じられるのはなぜだろうか?

ひとつはこの動きにリアリティ(現実感)があるからだ。

実は、こうした動きは実際のモノの動きに良く似ている。

クルマは急に止まれない、という言葉があるけれど、本当に急に止まれない。
止まるには少しずつ減速していかないとならない。

全速力で走っていて、急に止まろうとしたら勢いで二三歩余計に歩いてしまう、そんな経験が誰にもあるだろう。

そういう感覚がこうした動きにはあるのだ。

さて、宇宙船しかいなかったらつまらないから、宇宙船以外のものも表示してみよう。

宇宙だから岩がいい。それにはforループを使うのが簡単だ。

function onLoad() {     var ship= new Image('img/starship.png');
ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
this.x += (mouseX-this.x)/10;
this.y += (mouseY-this.y)/10;
};

for(i=0;i<10;i++){
rock = new Image('img/rock.png');
rock.x = Math.random()*320;
rock.y = Math.random()*480;
}
gameStart();
}

実行すると次のような画面になる。

白い宇宙空間に岩がゴロゴロ。
小惑星、というわけだ。

ところがこの宇宙船、小惑星にぶつかってもびくともしない。
それではつまらないから、小惑星にぶつかったらゲームオーバーになることにしよう。

function onLoad() {
var ship= new Image('img/starship.png');
ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
this.x += (mouseX-this.x)/10;
this.y += (mouseY-this.y)/10;
};

ship.onHit = function(){ //衝突した!
alert("CRASHED!");
}

for(i=0;i<10;i++){
rock = new Image('img/rock.png');
rock.x = Math.random()*320;
rock.y = Math.random()*480;
}
gameStart();
}

ただし、これは極めていい加減なプログラムなので、衝突すると「CRASHED」という警告ウィンドウが出続ける。

やめるにはマウスカーソルを正しい位置に逃がして、リロードする必要がある。

alertは、JavaScriptが元々もっている命令(関数)のひとつで、警告ウィンドウを表示する機能を持っている。
ship.onHit関数もまた、システムが呼び出す特別な関数で、なにか他のImageと衝突したときに呼び出される。

この場合、宇宙船(ship)がなにか別の物体とぶつかったとき、警告ウィンドウを表示する、というゲームになったわけだ。

これをもとにして、以下の課題に挑戦してみよう。また次回。次回はすぐだよ

1)rockをforループと乱数を使わずに並べて、電流イライラ棒ゲームを作ってみよう
2)rock.tickを定義して、隕石のほうも動かしてみよう
3)動く隕石と動かない隕石を作ってみよう

  • コメントは受け付けていません。
  • Filed under: Tutorial
  • 日本語版はwise9ブログをご覧下さい!

    http://wise9.jp/archives/5540

  • コメントは受け付けていません。
  • Filed under: イベント
  • やぁみんな!元気かな? shi3zだよ。

    さてさて、先日の環太平洋ミニゲーム開発オリンピック、個人的には参加する方としても見ている方としても大いに楽しめたんだけど、まあ正直、自分が優勝しちゃったのはどうかと思うんだよね。まあ立場もあるし、気を使ってくれたのかもしれないけど、とにかく、僕は次回からは参加しないことにしたんだ。

    でもこれって結構面白くて、ミニゲームそのものもそうだけど、この大会というひとつの大きな枠組みのゲームとして、ハマってきた。

    だからもう一回やりたい。

    と言ったら鎌田君が「いいですね。でも僕はもう体力の限界です」というのでリタイヤ。TAZZY委員長は仕事が忙しすぎてやってられないということで、近藤君と伏見君の二人だけになっちゃう、というのもつまらない。

    そこで、プログラム完全未経験のHidemyに僕がゲームプログラミングを三日でコーチし、大会で闘えるところまで育てることができるか!?という挑戦をしてみることになったよ。そんなこと本当にできるのかね?

    続きは以下


    実は昨日、alan先生からもらった連載原稿を先に全部出しちゃったのは、まずHidemyにプログラミングを学んでほしかったからなんだ。

    正直、教育学部卒で英文学専攻という彼女がどのくらいのスピードでこれをマスターできるかは多いに疑問だったんだよね。

    とりあえず昨日の夜、みんなでご飯を食べたあと、「Hidemyはalan先生の原稿を読んでから、自分なりのプログラムを作って提出して」と課題を与えてみた。

    それが八時くらい。

    そして12時。つまり四時間後だけど、早速Hidemyから課題が届いた。

    //おはな
    function flower(){
    for(i=0;i<180;i++){
    if( i<10 ){
    move(2);
    turn(1);
    }if( i>170 ){
    move(2);
    turn(1);
    }else{
    move(1);
    turn(1);
    }
    }
    }

    function onLoad(){
    logo.init();
    penDown();
    for(j=0;j<9;j++){
    flower();
    turn(90);
    }
    penUp();
    }


    これ以外にもふたつのプログラムをつくってきてくれた。

    彼女の飲み込みの速さに結構驚いたね。

    これならいけるかもしれない

    と思ったよ。

    そこでalan先生の連載とは別に、僕がゲームプログラミングを教える短期集中連載を始めることにするよ。

    alan先生の連載は丁寧でわかりやすいけど、ちょっと時間がかかるので、ここでは一足飛びに僕がゲームを学ぶために必要な教材をまとめてzipにしてみた。

    まずはこれをダウンロードしてほしい

    ゲームのもと(game.zip)をダウンロード

    とはいっても、alan先生の連載とファイル構成は似ている。

    違うのは、game.jsというファイルとimgフォルダがあることくらい。

    まずはmain.jsをテキストエディタで開いてほしい。

    例によって面倒だという人のために、ブラウザ上で試す環境も用意してある。

    http://junk.wise9.jp/game/

    さて、最初のプログラムはゲームのキャラクターを表示するものだ。

    function onLoad() {
    banana = new Image('img/banana.png'); // ここでキャラクターを出現
    }

    このプログラムのポイントは 「new Image」という部分にしかない。

    この命令は、新しいImageを作成してbananaという変数に入れろ、という意味になる。

    このImageというのは、実はゲームプログラミングを最速で教えるために僕が定義した新しいプログラムだ。
    実は、JavaScriptではプログラムの中から別のプログラムの塊を呼び出すことができる。

    こういうプログラムの塊を「クラス」とか「ライブラリ」とか言ったりするんだ。
    クラスとライブラリは本質的に別のものだけど、今回はそんなことを理解する必要はない。興味が湧いたら自分で調べてみてほしい(きっとそのうちalan先生の連載で扱うだろう)。

    とにかく、ゲーム開発に必要なことで、面倒なだけのことはあまりにも多い。
    そこで今回はオリジナルのゲームを作るために本当に最低限しかプログラムを書かなくてもいいように教材の方を工夫した。料理で言えばレトルト食品みたいなものだ。
    味は最高に良いとは言えないが、誰でも調理できてそこそこ美味しい。そういう連載なのだと思ってほしい。

    こうしたクラスにはクラスを設計したプログラマの経験が総て詰まっている。
    そのひとつが、このImageクラスというわけだ。

    秘伝のタレ、みたいなものだね。

    さて、このプログラムを実行するとどうなるか、まずは試してみてほしい。

    ここで注意事項。
    ゲームプログラムは、過激なプログラムだ。
    だから、「ゲームを実行する」というボタンを押したら、止めたりソースコードを書き直したりしたくなったら一度リロードする必要がある。

    リロードしても君の書いたコードが消えることはないのでご安心を。

    さて、new Imageのあとにつづく謎の文字の説明をしなくてはならない

    new Image(‘img/banana.png’);

    これは言わずと知れた「ファイル名」である。「img」はフォルダ名を指し、banana.pngはファイル名となる。フォルダとファイル名の間は「/」で繋ぐことになっている。まあこのへんはわりとお馴染みかな。

    banana.pngにはバナナの画像が入っている。
    バナナには見えないかもしれないが、これは断じてバナナである。
    実は今回のzipファイルには、ゲーム作りに最低限必要と思われる画像ファイルをこちらで用意したものを添付してある。

    バナナ以外にも、いろいろあるからフォルダを覗いてみてほしい。
    さて、次はキャラクターを動かしてみよう。
    バナナがひとりでに動く、というのも気持ち悪いので、宇宙船の絵に変えてみる。
    以下のようなプログラムを動かしてみてほしい。

    function onLoad() {
    ship = new Image('img/starship.png');  //A
    ship.tick = function(){ //B
    this.x = this.x + 1;//C ここで宇宙船の動きを定義する
    };
    gameStart(); //D
    }

    いくつか新しい命令が出て来た。

    Aの行でImageをshipに代入しているのはいいとして、Bの行はなんだろう?

    実はJavaScriptの変数は総てオブジェクト変数といって、数字だけでなくプログラムも入れることができるようになっている。

    ship変数のなかにtickという関数を定義しているわけだね。
    このtickは一定時間ごとに呼び出される特殊な関数だ。

    tickの中身を見てみよう(C)これも単純だね。

    this.x = this.x +1 ;

    this.xに1を足したものをふたたびthis.xに代入している。
    このthisが示すのはこの関数が定義されているオブジェクト自身、この場合はたとえばship自身を指しているんだ。this.xがあるということは当然、this.yもある。しかしこの式はなにをしてるんだ?

    実はこれは学校で真面目に数学をやっていると、けっこう混乱してしまう部分のひとつだ。

    「こんなthis.xはあり得ない」

    と思ってしまうのだ。しかしこの式はあくまでも代入式であって方程式ではない。解くための式ではないのだ。

    どうしても意味が分からないのなら、次のようなイメージで理解すると良い。

    this.x ← this.x +1 ;

    右のthis.xは過去のthis.xであり、左のthis.xは未来のthis.xである。矢印の向きで覚えると良いのだ。

    たとえばこの式の実行時点でthis.xの内容が0なら、この式が実行されたあとのthis.xの中身は1になる。

    実際、プログラミングで最初につまづくポイントがこの代入式と方程式の違いがわからないというところだったりする。

    解ればあまりにも簡単だが、いきなりそれまで習って来たことの前提が覆ってしまうと人はビックリしてしまうものだ。

    さて、これを実行すると、宇宙船が画面の中央に現れて、ゆっくり右へ移動していくのが見えると思う。

    一定時間ごとにthis.xに値を足していくと、this.xの座標が変わるワケだ。

    さて、一回目なのでそろそろやめにしたいが、最後にキャラクターを自分の思うがままに動かすプログラムを示して終わろうと思う。詳しい解説は次回行う。

    是非試してみてほしい。

    function onLoad() {
    ship = new Image('img/starship.png');
    ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
    this.x += (mouseX-this.x)/10;
    this.y += (mouseY-this.y)/10;
    };
    gameStart();
    }
  • コメントは受け付けていません。
  • Filed under: Tutorial
  • 日本語版は、wise9ブログをご覧下さい!

    http://wise9.jp/archives/5402

  • コメントは受け付けていません。
  • Filed under: Report
  • 日本語版は、wise9ブログをご覧下さい!

    http://wise9.jp/archives/5399

  • コメントは受け付けていません。
  • Filed under: Report
  • 日本語版は、wise9ブログをご覧下さい!

    http://wise9.jp/archives/5391

  • コメントは受け付けていません。
  • Filed under: Report
  • 日本語版 、wise9ブログをご覧下さい!

    http://wise9.jp/archives/5386

  • コメントは受け付けていません。
  • Filed under: Report
  • 日本語版は、wise9ブログをご覧下さい!

    http://wise9.jp/archives/5375

  • コメントは受け付けていません。
  • Filed under: Report
  • 日本語版はwise9ブログをご覧下さい!

    http://wise9.jp/archives/5312

  • コメントは受け付けていません。
  • Filed under: イベント
  • 日本語版はwise9ブログをご覧下さい!

    http://wise9.jp/archives/5235

  • コメントは受け付けていません。
  • Filed under: イベント
  • こんにちは! リョーヘイです。

    enchant PRO β2をリリースしました。主な機能追加は以下の通りです。

    • 「collada形式」(汎用的な3Dモデルデータの形式) のファイルを読み込むためのプラグイン collada.pro.enchant.js を追加
    • 3D描画のライティング・カメラ位置の変更をサポート

    SDKのダウンロードはこちら (zip形式)。ソースコードは github でも公開しています。

    あわせて、enchant PRO SDKを使って作られた9leap のゲームを遊ぶことができる「9leapアプリβ」もアップデートされています。

    SDKを使って作られたゲームは9leapに投稿することで、9leapアプリを通じてテストプレイすることができます。

  • コメントは受け付けていません。
  • Filed under: リリースノート
  • こんにちは!リョーヘイです。

    enchant.js の公式サイトに、逆引きリファレンスを追加しました。

    • 開発の基本
    • 逆引きリファレンス
      • 注意事項
        • enchant.js の基本的なテンプレート
      • 基本(描画)
        • Scene を作る/消すには
        • 画像を出すには
        • 文字を出すには
        • 音をならすには
      • 基本(制御)
        • 素材を読み込むには
        • フレーム処理をするには
        • タッチ(クリック)を処理するには
      • マップ
        • マップとは
        • マップを作るには
        • マップ上に障害物があるか判定するには
      • スプライト
        • スプライトを移動するには
        • スプライトを回転/拡大縮小するには
        • スプライトを透明にするには
        • スプライトにCanvasを使うには
        • スプライトで衝突判定を行うには
      • 文字(ラベル)
        • 文字色・フォントを変えるには
        • 文字を移動するには
        • 文字を透明にするには
      • その他
        • シーンの背景色を変えるには
        • ゲームのfpsを変えるには
        • ゲーム画面の倍率を変えるには
        • ロード時に表示されるシーンを変えるには
        • 素材のプリロードを行うには

    enchant.js Reference

    また、enchant.js のソースコードコメントを英訳したものをコミットしました。日本語版のコメントが入ったファイルは enchant-ja.js にリネームしています。今後 enchant.js にコミットされる変更は、同時に enchant-ja.js にも反映します。pull req をお送りくださるときもそのようにお願いします;-)[[

    ソースコードの改善点・バグ報告や、翻訳の間違いなどあればご指摘をお願いいたします。(githubのissuesや、このブログのコメント欄で受け付けています)

  • コメントは受け付けていません。
  • Filed under: お知らせ
  • about “enchant.js”

    enchant.js is an HTML5 + JavaScript based game engine. It is a standalone library that enables cross-platform application development for PC, Mac, iPhone, iPad, and Android from just 30 KB of source code.

    enchant.js was developed at Ubiquitous Entertainment Inc.'s Akihabara Research Center, and released April of 2011. Nearly 200 games have been created in its first two months of release, making it the world's most-used HTML5 game engine.

    enchant.js Official Website

    facebook Like