HTML5 による 2D ゲームの開発: 時間を操作する、第 2 回

タイム・トランスデューサーを使用してリニアでないエフェクトを実装する

この連載では、HTML5 のエキスパートである David Geary が、HTML5 で 2D テレビ・ゲームを実装する方法について順を追って説明します。今回の記事では、時間を思い通りに操作することによって、リニアでない動きや色の変化を作り出す方法について説明します。

David Geary, Author and speaker, Clarity Training, Inc.

David GearyCore HTML5 Canvas』の著者、David Geary は HTML5 Denver User's Group の共同設立者でもあり、Swing と JavaServer Faces に関するベストセラーの本を含め、Java に関する 8 冊の本の著者でもあります。また彼は、JavaOne、Devoxx、Strange Loop、NDC、OSCON などのカンファレンスで頻繁に講演を行っており、JavaOne Rock Star にも 3 度選ばれています。彼は developerWorks の連載記事、「HTML5 による 2D ゲームの開発」、「JSF 2 の魅力」、そして「GWT の魅力」の著者でもあります。



2013年 6月 20日

この記事の前提となる「時間を操作する、第 1 回」(developerWorks、2013年 2月) では、Snail Bait に登場するランナーのジャンプ・ビヘイビアを実装する方法について説明しました。その実装の結果、ランナーはリニアな動きをするようになりました。つまり、ランナーは一定の速度で上昇と下降をするようになりました。しかし現実の世界では重力があるため、ジャンプをすると、上昇する速度は次第に下がって行き、下降する速度は次第に上がって行きます。

今回の記事では、ランナーのジャンプ・ビヘイビアを変更することで、最終的にランナーのジャンプがより自然な動きに見えるように (図 1 に示すような動きになるように) することを目指しています。具体的には、スプライトの動きや色の変化など、時間の関数として表されるあらゆるものに対し、時間を操作することによってリニアでないエフェクトを作り出す方法を示すことを目的としています。

図 1. 自然なジャンプ・シーケンス
アニメーション化されたキャラクターのジャンプ・シーケンスの各段階を示した図

この記事では以下の内容について説明します。

トランスデューサー

Dictionary.com では、transducer (トランスデューサー) という語を以下のように定義しています。

名詞
あるエネルギーの形で信号を受信し、それを別のエネルギーの信号に変換する装置。マイクロホンは音響エネルギーを電気インパルスに変換するトランスデューサーです。

  • タイム・トランスデューサーを実装する方法
  • アニメーション・タイマー (トランスデューサーを備えたストップウォッチ) を使用して時間を操作する方法
  • タイム・トランスデューサーを使用してリニアでない動きを作り出す方法
  • タイム・トランスデューサーを使用してリニアでない色変化を作り出す方法
  • リアルなジャンプ、振動、バウンドを実装する方法
  • ビヘイビアを一時停止する方法

アニメーション・タイマーとタイム・トランスデューサー

私は電気工学や映画の分野で使われる「トランスデューサー」という用語を、時間の変換を表すために採用しました。タイム・トランスデューサーとは、図 2 のように 1 つの値から別の値へと時間を変換する関数のことです。

図 2. トランスデューサー
2 つのストップウォッチに異なる経過時間が示されており、左のストップウォッチの経過時間に JavaScript 関数 function (percentComplete) { return Math.pow(percentComplete, 6); } を適用した結果が右のストップウォッチの経過時間になっていることが示された図です。

リスト 1 を見るとわかるように、単純にタイム・トランスデューサーとストップウォッチを組み合わせ、時間を操作するアニメーション・タイマーを実装するのは簡単です。ストップウォッチの実装については、前回の記事の「アニメーションの時間を測定する: ストップウォッチ」セクションを参照してください。

リスト 1. アニメーション・タイマー
// AnimationTimer..................................................................
//
// An animation runs for a duration, in milliseconds. 
//
// You can supply an optional transducer function that modifies the percent
// completed for the animation. That modification lets you incorporate
// nonlinear motion, such as ease-in, ease-out, elastic, etc.
   
AnimationTimer = function (duration, transducer)  {
   this.transducer = transducer;

   if (duration !== undefined) this.duration = duration;
   else                        this.duration = 1000;

   this.stopwatch = new Stopwatch();
};

AnimationTimer.prototype = {
       start: function () { this.stopwatch.start();           },
        stop: function () { this.stopwatch.stop();            },
       pause: function () { this.stopwatch.pause();           },
     unpause: function () { this.stopwatch.unpause();         },
    isPaused: function () { return this.stopwatch.isPaused(); },
   isRunning: function () { return this.stopwatch.running;    },
       reset: function () { this.stopwatch.reset();           },

isExpired: function () {
      return this.stopwatch.getElapsedTime() > this.duration;
   },

getElapsedTime: function () {
      var elapsedTime = this.stopwatch.getElapsedTime(),
          percentComplete = elapsedTime / this.duration;

      if (percentComplete >= 1) {
         percentComplete = 1.0;
      }

      if (this.transducer !== undefined && percentComplete > 0) {
         elapsedTime = elapsedTime *
                       (this.transducer(percentComplete) / percentComplete);
      }

      return elapsedTime;
   },

};

アニメーション・タイマーは、基本的には 2 つの追加機能を持つストップウォッチです。

アニメーション・タイマーは、基本的にはストップウォッチであり、そこに 2 つの機能が追加されています。第 1 に、アニメーション・タイマーはタイマーなので、タイマーとしての設定時間 (ミリ秒で指定されます) があり、タイマーがその設定時間を経過したかどうかを返す isExpired() メソッドがあります。

第 2 に、アニメーション・タイマーにはオプションとしてタイム・トランスデューサーがあります。このトランスデューサーが指定された場合、アニメーション・タイマーの getElapsedTime() メソッドは、ストップウォッチの経過時間をタイム・トランスデューサーに処理させて、その結果を返します。


タイム・トランスデューサーを使用してモーション・トゥイーンを実装する

HTML5 の canvas 要素には、下位レベルの API として、強力な 2D グラフィックス API がありますが、他のグラフィックス・フレームワーク (Flash など) に見られるような上位レベルでの抽象化はありません。例えば、Flash ではアニメーションの開始フレームと終了フレームを定義することや、提供されるタイム・トランスデューサー (Flash ではトゥイーン機能と呼ばれます) に従ってフレーム間にフレームを作成することができます。この記事では Canvas を使用してモーション・トゥイーンを実装します。

図 3 は、典型的な 2 つのモーション・トゥイーンとして、イーズインとイーズアウトを示しています。この 2 つのエフェクトを説明するために、図 3 のアプリケーションには、実際の時間を表すタイムラインが垂直方向の線として描画されています。

図 3. イーズイン (左) とイーズアウト (右)
イーズインとイーズアウトを説明するために、Snail Bait のランナーを描画した一連のスクリーン・ショットが 2 種類示してあります。

図 3 で左側に上から下へと示したスクリーン・ショットはイーズインを表しています。イーズインは、最初は (タイムラインよりもはるかに遅れて) ゆっくり動きますが、最後は速く動きます。図 3 で右側に示したイーズアウトは、イーズインとは反対のエフェクトであり、最初は非常に速く動きますが、最後はゆっくり動きます。

イーズイン・エフェクトとイーズアウト・エフェクトは、数学的な観点では図 4 の 2 つのグラフに示す式によって実装されます。横軸は、アニメーション全体の時間に対して実際に経過した時間の割合を表しており、縦軸は、それぞれのトランスデューサーから返されるアニメーションが全体のどこまで完了しているかの割合を表しています。また、グラフ内の直線は実際の時間を表しており、曲線はエフェクトによって時間がどのように操作されるのかを表しています。

図 4. イーズイン・トランスデューサー (f(x) = x^2) とイーズアウト・トランスデューサー (1 - (1-x)^2)
イーズインとイーズアウトを表現したグラフ

イーズイン・エフェクト (図 4 左側のグラフ) の場合、トランスデューサーから出力される、アニメーションがどこまで完了しているかの割合は、実際に経過した時間の割合よりも常に低くなります。例えば、実際に経過した時間 (横軸上の時間) がアニメーション全体の時間の半分の時点では、イーズイン・トランスデューサーから出力されるアニメーションは、まだ全体の 1/4 しか進んでいません。

イーズアウト・エフェクト (図 4 右側のグラフ) の場合、トランスデューサーから出力される、アニメーションがどこまで完了しているかの割合は、実際に経過した時間の割合よりも常に高くなります。例えば、実際に経過した時間 (横軸上の時間) がアニメーション全体の時間の半分の時点では、イーズアウト・トランスデューサーから出力されるアニメーションは、全体の 3/4 まで進んでいます。

どちらの場合も、実際に経過した時間がアニメーション全体の時間の最後まで達するのと同時に、トランスデューサーから出力されるアニメーションも最後まで完了することに注意してください。

リスト 1 のアニメーション・タイマーはいつでも時間を操作できるようになっており、あとは時間を操作するタイム・トランスデューサーだけが必要です。リスト 2 は、タイム・トランスデューサーを作成する AnimationTimer メソッドを示しています。アニメーション・タイマーは、アニメーションがどこまで完了しているかの割合を示す値をトランスデューサー関数に渡し、トランスデューサー関数はその割合を示す値を変更して返します。

リスト 2. トランスデューサーを作成する
AnimationTimer.makeEaseOutTransducer = function (strength) {
   return function (percentComplete) {
      strength = strength ? strength : 1.0;

      return 1 - Math.pow(1 - percentComplete, strength*2);
   };
};

AnimationTimer.makeEaseInTransducer = function (strength) {
   strength = strength ? strength : 1.0;

   return function (percentComplete) {
      return Math.pow(percentComplete, strength*2);
   };
};

AnimationTimer.makeEaseInOutTransducer = function () {
   return function (percentComplete) {
      return percentComplete - Math.sin(percentComplete*2*Math.PI) / (2*Math.PI);
   };
};

AnimationTimer.makeElasticTransducer = function (passes) {
   passes = passes || 3;

   return function (percentComplete) {
       return ((1-Math.cos(percentComplete * Math.PI * passes)) *
               (1 - percentComplete)) + percentComplete;
   };
};

AnimationTimer.makeBounceTransducer = function (bounces) {
   var fn = AnimationTimer.makeElasticTransducer(bounces);

   bounces = bounces || 2;

   return function (percentComplete) {
      percentComplete = fn(percentComplete);
      return percentComplete <= 1 ? percentComplete : 2-percentComplete;
   }; 
};

AnimationTimer.makeLinearTransducer = function () {
   return function (percentComplete) {
      return percentComplete;
   };
};

これで時間を操作できるようになったので、このトランスデューサーを使用して自然なジャンプの動きを実装します。


自然なジャンプの動き

時間を操作する、第 1 回」では、ランナーのジャンプ・ビヘイビアをリニアな動きで実装する方法を説明しました。そこではジャンプの時間を測定するために 2 つのストップウォッチを使用し、1 つはジャンプの上昇時間測定用、もう 1 つはジャンプの下降時間測定用としました。上昇または下降の進行に伴い、ジャンプ・ビヘイビアは該当するストップウォッチの経過時間に基づいて、各アニメーション・フレームでそれぞれランナーをどの程度上または下に移動するかを決定します。

タイム・トランスデューサーの強力さを示すためにリスト 3 には、リニアな動きによるぎこちないジャンプの代わりに、リニアでない自然なジャンプの動きを実装する上で Snail Bait に必要な変更を記載します。

リスト 3. ランナーのタイマーを作成する
equipRunnerForJumping: function () {
      ...

      // On the ascent, the runner looses speed due to gravity (ease out)

      this.runner.ascendAnimationTimer =
         new AnimationTimer(this.runner.JUMP_DURATION/2,
                            AnimationTimer.makeEaseOutTransducer(1.0));

      // On the descent, the runner gains speed due to gravity (ease in)

      this.runner.descendAnimationTimer =
         new AnimationTimer(this.runner.JUMP_DURATION/2,
                            AnimationTimer.makeEaseInTransducer(1.0));
      ...

      };
   },
};

リスト 3 では、ジャンプの上昇時間と下降時間を測定するストップウォッチを作成する代わりに、アニメーション・タイマーを使用しています。上昇タイマーは、イーズアウト・トランスデューサーとともに使用されているため、上昇開始時は非常に速度が速く、上昇するに従って速度が落ちます。下降はゆっくりと開始され、イーズイン・トランスデューサーの効果で下降するに従って速度が増します。


タイム・トランスデューサーを微調整する

図 4 の曲線は、数値の累乗を使用して値を計算したものであるため、累乗曲線と呼ばれます。経済学からアニメーションのトゥイーンに至るまで、累乗曲線はさまざまな分野で広く使われています。図 4 には、累乗の指数が 2 である場合の曲線を示しましたが、指数を変えると図 5 のようにさまざまな累乗曲線が得られます。

図 5 はイーズイン・エフェクトの 3 つの累乗曲線を示しています。3 つの曲線は左から右に、それぞれ 2、3、4 を指数とする累乗を示しています。指数を増加するとイーズイン・エフェクトがより大きくなります。

図 5. エフェクトの度合いがそれぞれに異なるイーズイン・トランスデューサーの累乗曲線
エフェクトの度合いがそれぞれに異なるイーズイン・トランスデューサーの累乗曲線

リスト 2 に示した、イーズイン・トランスデューサーとイーズアウト・トランスデューサーを作成する AnimationTimer メソッドは、累乗曲線の指数の 1/2 を表す値を引数に取ります。デフォルトの値は 1 であり、その場合は累乗の指数は 2 となります。

AnimationTimer.makeEaseInTransducer()AnimationTimer.makeEaseOutTransducer() に渡す値を変更することで、エフェクトの強さを制御することができます。例えばリスト 4 では、ランナーがジャンプする際のイーズイン・エフェクトとイーズアウト・エフェクトの強さを 1.0 から 1.15 に変えています。この小さな変更により、どちらのエフェクトも少し誇張され、その結果ランナーはジャンプの最高点に少しだけ長くとどまって見えるようになります。

リスト 4. ランナーのタイマーを作成する
equipRunnerForJumping: function () {
      ...
      this.runner.ascendAnimationTimer =
         new AnimationTimer(this.runner.JUMP_DURATION/2,
                            AnimationTimer.makeEaseOutTransducer(1.15));

      this.runner.descendAnimationTimer =
         new AnimationTimer(this.runner.JUMP_DURATION/2,
                            AnimationTimer.makeEaseInTransducer(1.15));
      ...

      };
   },
};

これで、リニアでない動きの実装方法を理解できたことと思います。次は、時間の関数として表される他の要素にリニアでないエフェクトを実装する方法について見て行きましょう。


振動するプラットフォーム: リニアでない色変化

時間の関数として表される要素

物体が移動している場合、その物体の速度がわかれば (物体の移動速度は一定とします)、その物体の最初の位置と移動時間から物体の現在の位置を求めることができます。つまり、動き (モーション) は時間の関数として表される要素の 1 つです。時間を制御すると、動きや色の変化など、時間の関数として表されるあらゆる要素に自動的に影響が及びます。

この連載の過去数回の記事で説明してきたように、スプライトのビヘイビア (走る、ジャンプするなど) の状態は時間によって決まります。つまり、例えばランナーがジャンプしているときのランナーの位置は、ジャンプ開始からの経過時間によって決まります。

ここではリニアでないジャンプを実装することが目的でしたが、モーション・トランスデューサーは実装せず、代わりにタイム・トランスデューサーを実装しました。なぜなら、タイム・トランスデューサーを利用すると、時間の関数として表される任意の要素 (色の変化など) に対してリニアでないエフェクトを作り出せるからです (図 6)。

図 6. 振動するプラットフォーム
Snail Bait の振動するプラットフォームのスクリーン・ショット

図 6 に示すプラットフォームは、絶えず透明度を変更することで、振動して見えるようにしています。リニアに色を変化させると点滅するエフェクトになりますが、ここでは振動して見えるエフェクトにすることで、プラットフォームの表示が最初にぱっと濃くなり、その後徐々に薄くなり、その後再度ぱっと濃くなる、という繰り返しとなるようにします。そのエフェクトを実現するために、ここでもイーズイン・トランスデューサーとイーズアウト・トランスデューサーを使用します (リスト 5)。

リスト 5. 振動ビヘイビアのコンストラクター
PulseBehavior = function (duration, opacityThreshold) {
   this.duration = duration || 1000;
   this.brightTimer = new AnimationTimer(this.time,
                                         AnimationTimer.makeEaseOutTransducer());

   this.dimTimer = new AnimationTimer(this.time, 
                                         AnimationTimer.makeEaseInTransducer());
   this.opacityThreshold = opacityThreshold;
},

リスト 5 は、「振動する」ビヘイビア (振動ビヘイビア) のコンストラクターを示しています。コンストラクターの引数に指定する、振動ビヘイビアの持続時間は、1 回の振動を表示するのに要する時間の半分であり、不透明度のしきい値は、1 回の振動の間に画像が最も暗くなるときの値です。

リスト 6 は振動ビヘイビアの execute() メソッドの実装を示しています。

リスト 6. 振動ビヘイビアの execute() メソッド
PulseBehavior.prototype = { 
   ...

execute: function(sprite, time, fps) {
      var elapsedTime;

      // If nothing's happening, start dimming and return

      if (!this.isDimming() && !this.isBrightening()) {
         this.startDimming(sprite);
         return;
      }

      if(this.isDimming()) {               // Dimming
         if(!this.dimTimer.isExpired()) {     // Not done dimming
            this.dim(sprite);
         }
         else {                            // Done dimming
            this.finishDimming(sprite);
         }
      }
      else if(this.isBrightening()) {      // Brightening
         if(!this.brightTimer.isExpired()) {  // Not done brightening
            this.brighten(sprite);
         }
         else {                            // Done brightening
            this.finishBrightening(sprite);
         }
      }
   },
};

振動ビヘイビアの execute() メソッドは、スプライトの画像を暗くしていく処理 (暗化処理) と明るくしていく処理 (明化処理) との切り換えで構成される振動を、上位レベルで抽象化して実装しています。リスト 6 でスプライトの画像を暗くするために呼び出されているメソッドをリスト 7 に示します。

リスト 7. スプライトの画像を暗くする
PulseBehavior.prototype = { 
   ...

startDimming: function (sprite) {
      this.dimTimer.start();
   },
      
isDimming: function () {
      return this.dimTimer.isRunning();
   },
      
dim: function (sprite) {
      elapsedTime = this.dimTimer.getElapsedTime();  
      sprite.opacity = 1 - ((1 - this.opacityThreshold) *
                            (parseFloat(elapsedTime) / this.duration));
   },

finishDimming: function (sprite) {
      var self = this;
      this.dimTimer.stop();
      setTimeout( function (e) {
         self.brightTimer.start();
      }, 100);
   },
};

リスト 7 で興味深い部分は dim() メソッドです。このメソッドは、スプライトの画像の不透明度を下げることによってスプライトの画像を暗くします。不透明度をどこまで下げるかは、画像を暗くし始めてからの経過時間 (もっと正確に言えば、暗化タイマー (dimTimer) で計測された経過時間) に基づいて計算されます。

暗化処理が終了すると finishDimming() メソッドが暗化タイマーを停止し、短い時間の経過後に、明化タイマー (brightTimer) を開始します。

スプライトの画像を明るくするための振動ビヘイビアのメソッドをリスト 8 に示します。

リスト 8. スプライトの画像を明るくする
PulseBehavior.prototype = { 
   ...

isBrightening: function () {
      return this.brightTimer.isRunning();
   },

brighten: function (sprite) {
      elapsedTime = this.brightTimer.getElapsedTime();  
      sprite.opacity += (1 - this.opacityThreshold) *
                         parseFloat(elapsedTime) / this.duration;
   },

finishBrightening: function (sprite) {
      var self = this;
      this.brightTimer.stop();
      setTimeout( function (e) {
         self.dimTimer.start();
      }, 100);
   },
};

ほとんどのスプライトのビヘイビアはリニアでありません

物質界では、時間の関数として表される要素 (動きや色の変化など) のほとんどがリニアではありません。跳ね返るボールからスタートダッシュする短距離走者に至るまで、私達を取り巻くほぼすべてのものが、リニアでない動きをします。現実の世界では、リニアでない動きが至るところにあることから、ゲームの中にリニアでない動きを実装する方法を理解しておくことが重要です。

スプライトの画像を明るくするメソッドは、使用するタイマーを除けば、スプライトの画像を暗くするメソッドとほとんど同じです。また、リスト 7dim() メソッドはプラットフォーム・スプライトの不透明度を下げますが、brighten () メソッドはプラットフォーム・スプライトの不透明度を上げます。


ビヘイビアを一時停止する

この連載第 3 回の記事の「ゲームを一時中断する」セクションで、Snail Bait を一時中断する方法を説明しました。その後、Snail Bait にはスプライトのビヘイビアを追加したので、ゲームの一時中断時にはこれらのビヘイビアも一時停止させなければなりません。それを説明したものがリスト 9 です。

リスト 9. Snail Bait のスプライトのすべてのビヘイビアを一時停止、一時停止解除する
SnailBait.prototype = {
   ...

togglePausedStateOfAllBehaviors: function () {
      var behavior;
   
      for (var i=0; i < this.sprites.length; ++i) { 
         sprite = this.sprites[i];

         for (var j=0; j < sprite.behaviors.length; ++j) { 
            behavior = sprite.behaviors[j];

            if (this.paused) {
               if (behavior.pause) {
                  behavior.pause(sprite);
               }
            }
            else {
               if (behavior.unpause) {
                  behavior.unpause(sprite);
               }
            }
         }
      }
   },

   togglePaused: function () {
      var now = +new Date();

      this.paused = !this.paused;

      this.togglePausedStateOfAllBehaviors();
   
      if (this.paused) {
         this.pauseStartTime = now;
      }
      else {
         this.lastAnimationFrameTime += (now - this.pauseStartTime);
      }
   },
};

リスト 9 を見るとわかるように、ゲームのビヘイビアのすべてを一時停止させるのは簡単なことです。ただしそのためには、ビヘイビアに pause() メソッドと unpause() メソッドを実装する必要があります (これまでは一時停止の必要がなかったので、execute() メソッドを実装するだけでオブジェクトをビヘイビアにすることができました)。

ビヘイビアの pause() メソッドと unpause() メソッドの実装は、ケースバイケースで行われます。リスト 10 は、この 2 つのメソッドを振動ビヘイビアに実装する方法を示しています。

リスト 10. 振動ビヘイビアを一時停止する
PulseBehavior.prototype = { 
   ...

   pause: function() {
      if (!this.dimTimer.isPaused()) {
         this.dimTimer.pause();
      }

      if (!this.brightTimer.isPaused()) {
         this.brightTimer.pause();
      }

      this.paused = true;
   },

   unpause: function() {
      if (this.dimTimer.isPaused()) {
         this.dimTimer.unpause();
      }

      if (this.brightTimer.isPaused()) {
         this.brightTimer.unpause();
      }

      this.paused = false;
   },

振動ビヘイビアを一時停止、または一時停止解除するには、振動ビヘイビアに関する実行中のタイマーを一時停止、または一時停止解除するだけです。


次回は

この連載の次回の記事では、Snail Bait に衝突検出と爆発を実装する方法を説明します。その後の記事では、スプライトのビヘイビアを、重力を考慮に入れたものにして、スプライトを落下させる方法を説明します。


ダウンロード

内容ファイル名サイズ
Sample codewa-html5-game7-code.zip1.2MB

参考文献

学ぶために

  • Core HTML5 Canvas』(David Geary 著、Prentice Hall、2012年): Canvas API とゲーム開発について広範にわたって説明している David Geary の著書です。関連する Web サイトとブログにもアクセスしてください。
  • Snail Bait: HTML5 対応の任意のブラウザーで Snail Bait をオンラインでプレイしてみてください (Chrome のバージョン 18 またはそれ以降のバージョンが最適です)。
  • HTML5 Canvas を使用した目を見張るアプリケーション: Strange Loop 2011 での David Geary のプレゼンテーションを見てください。
  • The Making of an HTML5 Platform Game」: このプレゼンテーションで、背景のスクロール、パララックス、スプライト、衝突検出、爆発などを備え、iPad で 60 フレーム/秒で安定動作する横スクロール・テレビ・ゲームの実装方法を学んでください。
  • Platform games」: Wikipedia でプラットフォーム・ゲームについての説明を読んでください。
  • 「横スクロール」テレビ・ゲーム: ウィキペディアで横スクロール・テレビ・ゲームについての説明を読んでください。
  • HTML5 の基礎」: developerWorks の Knowledge path で HTML5 の基本について学んでください。
  • developerWorks の Web development ゾーン: Web ベースのさまざまなソリューションを解説した記事が豊富に用意されています。Web development 技術文書一覧に用意された、さまざまな技術記事やヒント、チュートリアル、技術標準、IBM Redbooks をご覧ください。
  • developerWorks テクニカル・イベント: これらのセッションで最新情報を入手してください。
  • developerWorks 最新イベント情報: IBM の製品およびツールについての情報や IT 業界の動向についての情報を迅速に把握してください。
  • developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
  • Twitter での developerWorks: 今すぐ登録して developerWorks のツイートをフォローしてください。

製品や技術を入手するために

  • レプリカアイランド: Android 用として人気の、オープンソースのプラットフォーム・ゲームのソースをダウンロードしてください。
  • IBM 製品の評価版: IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2、Lotus、Rational、Tivoli、WebSphere などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。

議論するために

  • developerWorks コミュニティーに参加してください。ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、Wiki を調べることができます。
  • Web 開発に関心を持つ他の developerWorks メンバーを見つけてください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Java technology
ArticleID=934573
ArticleTitle=HTML5 による 2D ゲームの開発: 時間を操作する、第 2 回
publish-date=06202013