プログラミング講座

2009年07月01日

Google Visualization APIを使ってグラフを描いてみる

昨日に引き続いて、Google APIを使ってみようのコーナーです。
今日はグラフを描いてみたいと思います。

簡単にプログラミングが楽しめるように、まずはGoogle AJAX APIs Playgroundを開いてみましょう。(Chromeで開くのが一番オススメです。)

Google AJAX APIs Playground
http://code.google.com/apis/ajax/playground/

画面の左上「Pick Sample」の中から、「Visualization API」を選んで、その中の「Bar Chart」を開いてみましょう。

右側にソースプログラム、ちょっと間をおいて、下の画面にグラフが表示されたはずです。

Google AJAX APIs Playground

このプログラムを見て、内容を確認してみましょう。

まず、
function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  data.addColumn('number', 'Expenses');
  data.addRows(4);
ここで、DataTableというObjectを作っていますよね。そこに、列を3つ加えています。それが、「Year」「Sales」「Expenses」です。そして、addRows(4)で4行追加、となります。ここまでで、つまり、

YearSalesExpense
   
   
   
   

という表を作ったと言うわけです。
  data.setValue(0, 0, '2004');
  data.setValue(0, 1, 1000);
  data.setValue(0, 2, 400);
  data.setValue(1, 0, '2005');
  data.setValue(1, 1, 1170);
  data.setValue(1, 2, 460);
  data.setValue(2, 0, '2006');
  data.setValue(2, 1, 660);
  data.setValue(2, 2, 1120);
  data.setValue(3, 0, '2007');
  data.setValue(3, 1, 1030);
  data.setValue(3, 2, 540);
これで、データを埋め込んでいっています。
setValue(行番号,列番号,値)
ということだと分かりますね。
  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data, null);
}
そして、これで id="visualization" の <div> にグラフ描画をしているわけです。

では、ここに同じグラフを埋め込んでみましょう。

-----ここから-----

-----ここまで-----
前回のMap APIのときもそうでしたが、livedoorブログで動かすためには、
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['barchart']});
</script>
<script type="text/javascript">
  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170);
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 660);
    data.setValue(2, 2, 1120);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);
 
    new google.visualization.BarChart(document.getElementById('visualization')).
        draw(data, null);
  }
 
</script>

<input type="button" value="実行する" onClick="drawVisualization();">
<div id="visualization" style="width: 300px; height: 300px;"></div>
をというスクリプトを、「ここから」〜「ここまで」の中に入れてあります。詳しくはソースを表示で確認してみてください。

次回は、前回のデータを使いますが、Googleドキュメントで入力された数字を使って、グラフを描画する、というテーマでいきたいと思います。


dmatsu2005 at 00:23コメント(0)トラックバック(0) 

2009年06月30日

Googleドキュメント:フォームの利用

数回に分けて、Google Appsを使ったWebサイトのマッシュアップについて書いてみようと思います。なかなか取っつきにくいのかな?と思ってしまいますが、使ってみるとそれほど難しくなく、これまでやってみたかったこと、なんかが簡単にできてしまいますので、びっくりしますよ。プログラマーの私としては職が無くなるんじゃないかと、不安にすら陥りますが、まぁ、それはさておき。

今回はまずGoogleドキュメントのフォーム機能を利用して、アンケートを集めてみます。これは、後で使うデータを作りたいからなんですが、詳しい使い方は、Googleアカウントを取っていただいた後、Googleドキュメントを開いて「フォーム」を新規作成すれば、後は簡単にできると思います。

こちらにも掲載されています。↓↓↓
シャニム:Googleドキュメント「フォーム」でWebアンケートの作成にトライ!
http://www.shanimu.com/pdf/2009/05/it-waza.html

私が作ったサンプルはこの通り。ちょっとこちらのアンケートに答えてみてください。

http://spreadsheets.google.com/viewform?formkey=ckV6T2drYy16OVlMcEI1NVVaRUltcGc6MA..



私もデータを入れましたし、このサンプルをいじってもらった人の分も反映します。すぐにデータを見ることができるようにしておきましたので、何回か、いじってもらえれば、仕組みがわかるんじゃないかな、と思います。

で、このアンケートの結果にはグラフが表示されているわけですが、このデータを使って、自分のWebサイトにグラフを表示するにはどうしたらいいだろうか、というのが、今回のプログラミング講座の趣旨ですが、次は、とりあえず、グラフイメージを表示させてみよう、というのをやってみます。Google AJAX APIs Playgroundを使ってプログラムを組んでいきますよ〜。


dmatsu2005 at 00:04コメント(0)トラックバック(0) 

2009年01月31日

アルゴリズムへの感動

久しぶりにプログラミングのことで、反省しなければならないことを読んだ。確かに反省しなければならないけれど、まずは感動した。


単純な繰り返しのループなんて、for(i=0; i<n; i++){ ... } 以外で書こうなんて考える気すらなかった。いや、確かに、まだCPUが1MHzとか(MSX時代)、10MHz(PC98時代)にBASICでプログラムを書いていた時は、結構どん欲にアルゴリズムを変更していた気がする。
大学で学んでいたころも、テスト対策とはいえ、計算量のオーダーについて、ちゃんと考えていたし、こういったアルゴリズムがあることは勉強した(させられた?)。

でも、最近は、こんなことを考えていない。
確かにプログラムが直観的ではなくなって、見づらくなる弊害も大きい。そんな言い訳もしたい。

昔に比べて、自分で全部書かなければならないプログラムというのは、あまりなく、DBに放り込んで、SQLでサクッとデータを検索して持ってくる、とか、PerlやPHPなどから実装されてきたハッシュ変数(連想配列)という概念やら、正規表現という文字比較方法がプログラミング言語そのものに用意されたので、ループを多段で回したり、switch caseの嵐みたいなことは、かなり減った。

だからといって、Javascriptで、そしてIEでこんなに差が出るなんて、しかも、こんな単純な操作で。といった、ものすごい感動と、急激な焦り。これまで作ったプログラムを見直したくなってしまう。

今年のプログラミングのこだわりの一つに、計算量オーダーを小さくする、といったテーマを意識的に加えようと思います。


dmatsu2005 at 08:51コメント(0)トラックバック(0) 

2007年07月29日

【講座006】壁の跳ね返り

UpdateSpriteメソッドの前回の続きをみていきましょう。

int MaxX = graphics.GraphicsDevice.Viewport.Width
  - myTexture.Width;

int MinX = 0;
int MaxY = graphics.GraphicsDevice.Viewport.Height
  - myTexture.Height;

int MinY = 0;


図で理解した方がいいので、下図をみてください。

WindowSize







スプライトを表示する際には、スプライトの左上の座標を使うのですが、その最小値、最大値を、それぞれ(MinX, MinY)と(MaxX, MaxY)で表しています。

左上が(0,0)であることは、もういいとして、それを(MinX, MinY)に入れているのはわかると思います。右下の最大値の方をどうやって求めているか、ということが重要です。

ウィンドウの幅は、graphics.GraphicsDevice.Viewport.Widthで得られ、
ウィンドウの高さは、graphics.GraphicsDevice.Viewport.Heightで得られます。
そこから、スプライトの幅・高さ(myTexture.Width・myTexture.Height)をそれぞれ引いたところを(MaxX, MaxY)としているわけですね。

さて、続いて、if〜else if構文が2つ続きます。これはC#の書き方ですが、他の言語でも似たような書き方をよくします。プログラムでは非常に一般的なので、ちょっと勉強しましょう。

if (条件1)
{
  処理1
}
else if (条件2)
{
  処理2
}

となっているのですが、「条件1が満たされていれば(真だったら、とか、Trueだったら、という言い方をすることもあります。)、処理1を行います。もし、条件1が満たされていなかったら(偽だったら、とか、Falseだったら、といったりします。)、条件2を判断し、条件2が満たされていたら、処理2を行います。」という構文です。
この構文のポイントは、「処理1と処理2が同時に実行されることはなく、かつ、どちらも実行されないこともある」ということです。

さて、実際には何が書かれているのでしょうか。1つ目のif〜else if構文を見てみましょう。

if (spritePosition.X > MaxX)
{
  spriteSpeed.X *= -1;
  spritePosition.X = MaxX;
}
else if (spritePosition.X < MinX)
{
  spriteSpeed.X *= -1;
  spritePosition.X = MinX;
}

条件1は「spritePosition.X > MaxX」ですね。これは、「スプライトが右の壁をこえてしまったか?」を意味します。前回の講座でやりましたが、すでにspritePositionには、動く量が加えられていることに注意してください。
もし、スプライトが右の壁を越えてしまっていたら、スプライトのスピードは左右反転(この場合は右→左になるわけですが)しろ、となっています。これは、

spriteSpeed.X *= -1;

がそれを意味していますが、前回の+=と、同様に

x *= a;

と書かれていると、x に a を掛ける、ということを意味していますから、spriteSpeed.X に -1 が掛けられるということになります。より、具体的には、spriteSpeed.X が右の壁を越えてしまうときには、50.0が入っていたはずですから、spriteSpeed.X は -50.0 が入れられたのと同じことになります。

そして、右の壁を越えてしまってはいけませんから、

  spritePosition.X = MaxX;

として、スプライトの位置を壁にぶつかった状態にしてしまいます。

続いて、条件1が満たされていなかったときには、条件2を判断します。条件2は「spritePosition.X < MinX」です。これは「左の壁を越えてしまったか?」を判断しています。これが満たされていた場合には、またスピードを左右逆転(今回の場合は、左→右への反転)して、スプライトの位置を左の壁にぶつかった状態にしています。

いかがでしょうか?同様のことがY軸方向でも行われます。

if (spritePosition.Y > MaxY)
{
  spriteSpeed.Y *= -1;
  spritePosition.Y = MaxY;
}
else if (spritePosition.Y < MinY)
{
  spriteSpeed.Y *= -1;
  spritePosition.Y = MinY;
}

こちらもX軸と同様ですから、同じように考えてみてください。ウィンドウの枠を壁に見立てて、スプライトが跳ね返る、という処理を行っていることがわかります。

これで、このサンプルの解説は終わりになりますが、ちょっと時間をもらって、その後、いくつか改造をしてみたいと思います。


dmatsu2005 at 07:31コメント(0)トラックバック(0) 

2007年07月28日

【講座005】スプライトの速度

Updateメソッドに書き加えられたのは、次の1行でした。

UpdateSprite(gameTime);

これは、UpdateSpriteメソッドを実行する、ということを意味していますが、構造化プログラミング(って懐かしい言葉だな)では、できるかぎり大雑把にプログラムの構造を理解できるように、こうやって、詳細処理は別に書く、ということを行います。

ですから、実処理はUpdateSpriteに書かれているわけですね。そういうわけで、UpdateSpriteメソッドを見ていくわけですが、今回はスプライトを動かしている式を見てみます。たった、1行の解説ですが、XNAのゲームプログラミングでは重要なポイントになるはずです。

UpdateSpriteメソッドの最初の1行は次のようなものでした。

spritePosition += spriteSpeed *
  (float)gameTime.ElapsedGameTime.TotalSeconds;

ここで、C#の文法を勉強しましょう。

x += a;

と書かれている場合には、xにはaが加えられます。

y -= b;

と書かれている場合には、yからはbが引かれます。これと同義の文は、

y += -b;

ということになります。たとえば、

x += 10;

であれば、xには10が加えられるし、

y += -3.7;

であれば、yには-3.7が加えられる、すなわち、yから3.7が引かれます。ということは、先の文を解釈すると、
「spritePositionに、spriteSpeed * (float)gameTime.ElapsedGameTime.TotalSecondsが加えられる」となるわけです。

spritePositionには初期値(0, 0)が設定されていて、Drawメソッドで、この位置にスプライトが描画されることを意味していました。このspritePositionに下線の部分の計算結果が足され、スプライトの場所が変わっていくことを意味しています。

ところで、spriteSpeedは(50.0, 50.0)を入れてありました。その先の(float)gameTime.ElapsedGameTime.TotalSecondsってなんでしょうか?それを理解しなければなりません。そこで、このElapsedGameTimeにカーソルを合わせて、[F1]でHelpを呼んでみます。

Help GameTime






gameTime.ElapsedGameTime は最後にUpdateが実行されたときから、これまでに経過した時間を意味しているようです。で、ついでに言うと、TimeSpan構造体なので、そのプロパティに、TotalSecondsってのがありまして、秒の単位で値を返してくれるわけですから、「gameTime.ElapsedGameTime.TotalSecondsは、最後のUpdateからどのくらい経過したかを表している(秒単位)」となります。
また、TotalSecondsはdouble型で定義されています。speedSpriteのVector2クラスのメンバーは、float型なので、型がそろっていないと掛け算がうまくいかないことがあります。このため、(float)というのを付けて、speedSpriteと掛け算を行っているわけですね。

これは何を意味しているのでしょうか?実は、speedSpriteっていうスプライトの動くスピードを表している変数は、「秒速」を意味していた、ということになります。ですから、前回のUpdateから、今回のUpdateまでの経過時間を速度に掛け算することで、スプライトを動かす量(ピクセル数)を求めた、ということになります。

ゲームプログラミングにおいては、キャラクタをどのくらいのスピードで動かすのか、というのは非常に重要な問題です。昔、BASICでゲームを作ったことがある方ならば、

for t = 0 to 100: Next t

などという構文を挟んで、キャラクタの動かすスピードを調整したことがあるのではないでしょうか。こういった無駄なループを回して、時間調節を行うテクニックがあったのですが、コンピュータの性能が格段に上がった現在、このような方法を使うことは無意味です。そこで、算数の時間に習った

(距離)=(時間)×(速度)

を使って、動かすスピードを求めていく手法が現在では一般的です。

UpdateSpriteメソッドは、もう少し続きます。このまま、単に足すだけですと、ウインドウの外にスプライトが出てしまいますから、ウィンドウの枠が壁となって跳ね返るアルゴリズムが必要になってくるわけですね。それを次回に見ていきましょう。


dmatsu2005 at 04:17コメント(0)トラックバック(0) 

2007年07月27日

【講座004】書き加えたコードの意味

まず、最初に加えたインスタンス変数たちを紹介します。

Texture2D myTexture;
SpriteBatch spriteBatch;
Vector2 spritePosition = Vector2.Zero;
Vector2 spriteSpeed = new Vector2(50.0f, 50.0f);

はじめに、Texure2Dというクラスは何か、ということを説明します。このクラスは、グラフィックチップが読み書きできる平面グリッド、を意味していまして、簡単に言うと、画面の上に貼る透明な板だと思った方がいいです。
昔々にMSXとか、ファミコンベーシックでプログラムを組んだことがある方はSPRITE関数なんてのがあって、背景画像の上にスプライトでキャラクタを動かして、あれやこれやと、ゲームを作ったりしていたと思うのですが、サイズが自由に設定できる透明な板(スプライト)と考えるのが、理解しやすいと思います。
で、このクラスへのインスタンス変数をmyTextureという名前にしたわけですが、お気づきの方もいらっしゃると思いますが、複数の絵を動かしたい場合などには、このインスタンス変数を必要な分だけ定義しなければならない、ということですね。

プログラムの中を読み取るときには、先に一気に読み取ってしまった方がわかりやすいときもあるので、このmyTextureが、どう使われているのか、もうちょっと見てみましょう。

LoadGraphicsContentメソッドの中では、絵を読み込ましています。

myTexture = content.Load<Texture2D>("face");

という形ですね。この、content.Loadというのは、右側のソリューションエクスプローラで一覧されている、様々なデータと、ひも付けを行うメソッドです。ですから、今回はTexture2Dクラスのデータを読み込むよ、ってことで<>内に、Texture2Dと書いてありまして、その後、ファイル名(拡張子無し)を設定します。

Drawメソッドの中では、実際に絵を描くのに、次のようなコードを使っています。

spriteBatch.Draw(myTexture, spritePosition, Color.White);

このような形で使われるわけです。

さて、次は、SpriteBatchです。これは、GraphicsDeviceへスプライトのグループを描画し表示させるクラスです。習うより慣れろってこともありますから、このクラスについては、今は「おまじない」だと思って使っていた方がいいでしょう。後の回で、いろいろと実験をしてみたいと思います。
ちなみに、このインスタンス変数 spriteBatchは、LoadGraphicsContentメソッドの中で、

spriteBatch = new SpriteBatch(graphics.GraphicsDevice);

とgraphics.GraphicsDeviceとのやりとりでインスタンスを作るときに使われ、Drawメソッドの中で、

spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
spriteBatch.Draw(myTexture, spritePosition, Color.White);
spriteBatch.End();

と使われて、さっきのmyTextureを使って、絵を描いています。ここのspritePositionというのは、どこに表示するのか、を意味していますが、
spritePositionとspriteSpeedは、Vector2の変数として宣言されています。
2次元の座標を表すのに、このクラスを用いるのがC#っぽいところ。C言語などでも構造体とかで、座標を表したりもしましたので、プログラミングをやっている人にはわかりやすいかも。ところで、2次元の座標はX軸とY軸でできていて、画面の左上が(X,Y)=(0,0)で、右に行くほどXの値が大きくなり、下に行くほどYの値がおおきくなります。

2次元の座標系





そこで、spritePositionには当初(0,0)を設定し、spriteSpeedには当初(50.0, 50.0)を設定する、と書かれています。「50.0f」っていう風に最後に「f」が付いていない?と思われるかもしれません。これは、この「50.0」という値がfloat型なんだよってことを意味しています。単に「50.0」と書いてビルドしてみるとわかりますが、50.0と表示すると、それはdouble型であることになってしまい、ビルドエラーになってしまいます。
なんだか、よく分らない気持ちになるかもしれません。こういうところで、よく分らないからプログラム嫌いってなっちゃう人も多くて、すごく残念なんですが、私ははっきりと言い切っておきます。「こんなこと、気にせず先に進んでください」と。いろいろな本で「型」の考え方が大切だ、とかいろいろ書いてあるかもしれませんが、それが理解できるようになるのは、結構先ですし、ある種、専門的にコンピュータ数値解析のことをやらないとわかりません。いろいろなプログラミング言語で特徴がありますが、C#(C言語系,Javaも)特有の問題ですから、深く悩まず、こういうエラーにぶつかったら、「あ、f、付け忘れちゃった」くらいの気持ちで進んでください。

今回も長くなってきたので、これでおしまい。次回は、動かしている部分のコードを読み取っていきましょう。

dmatsu2005 at 07:25コメント(0)トラックバック(0) 

2007年07月26日

【講座003】貼った絵を動かしてみる

今日は、Help「Your First Game: Microsoft XNA Game Studio Express in 2D」のStep 5に進んでみます。

予告したとおり、Step 5は貼った絵を動かすプログラムです。
今回は「Update」のところに、まず次の「赤字」の部分を加えます。

protected override void Update(GameTime gameTime)
{
  // Allows the game to exit
  if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
    this.Exit();

  // TODO: Add your update logic here

  UpdateSprite(gameTime);

  base.Update(gameTime);
}

このUpdateSpriteというのは、自分で作るメソッドです。ですので、今度は、このメソッドを足さなければなりません。「Draw」の下に書き加えましょう。あくまで書き加えるところが「赤字」ですよ。

protected override void Draw(GameTime gameTime)
{
  graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

  // TODO: Add your drawing code here

  spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
  spriteBatch.Draw(myTexture, spritePosition, Color.White);
  spriteBatch.End();

  base.Draw(gameTime);

}

void UpdateSprite(GameTime gameTime)
{
  // Move the sprite by speed, scaled by elapsed time.
  spritePosition += spriteSpeed *
    (float)gameTime.ElapsedGameTime.TotalSeconds;


  int MaxX = graphics.GraphicsDevice.Viewport.Width -
    myTexture.Width;

  int MinX = 0;
  int MaxY = graphics.GraphicsDevice.Viewport.Height -
    myTexture.Height;

  int MinY = 0;

  // Check for bounce.
  if (spritePosition.X > MaxX)
  {
    spriteSpeed.X *= -1;
    spritePosition.X = MaxX;
  }

  else if (spritePosition.X < MinX)
  {
    spriteSpeed.X *= -1;
    spritePosition.X = MinX;
  }

  if (spritePosition.Y > MaxY)
  {
    spriteSpeed.Y *= -1;
    spritePosition.Y = MaxY;
  }

  else if (spritePosition.Y < MinY)
  {
    spriteSpeed.Y *= -1;
    spritePosition.Y = MinY;
  }
}

これでOKです。さて、どうなるでしょうか? いつも[F5]なので、本来のビルドの仕方、[F6]を押しましょう。これでビルドが行われて、「ビルド正常終了」となったら、[F5]で実行(本当はデバッグ開始)です。

動く絵








動き始めましたよね。Step 6は、この先はいろいろな改造方法があるよっていう話が書かれていますので、ここでは直接内容には触れませんが、実際、これを使って、いろいろとやってみたいなぁと考えています。

次回は、とりあえず、改造する前に、それぞれのプログラムコードが、何を意味しているのか、詳細に分析して行こうと思います。


dmatsu2005 at 05:04コメント(0)トラックバック(0) 

2007年07月25日

【講座002】スプライトを動かす

では、昨日に続いて、Helpに書いてあった先に進んでみたいと思います。

英語の和約ばかりしていても仕方がないので、要約します。

Step 4

まず、小さな画像ファイル(.bmp でも .jpg でも、.png でもいいけど)を用意しましょう。あとで、これが動きますので、だいたい100×100ピクセルサイズから、300×300ピクセルサイズの間がいいでしょうね。別に正方形でなくてもかまいません。
僕は、こんな絵をペイントで書きました。ファイル名は「face.png」です。

へのへのもへじ







そのあと、Visual C#の画面の右側にある、「ソリューションエクスプローラ」のところで、右クリックして、[追加]→[既存の項目]を選択します。

ソリューションエクスプローラ










そうすると、「既存項目の追加」というファイル選択ウィンドウが開きます。最初に一番下の「ファイルの種類」を「すべてのファイル (*.*)」にしてしまった方が便利かもしれません。なぜだかよく分りませんが、JPEG画像は.jpeが拡張子に設定されているみたいで、非常に使いづらいので。

既存項目の追加





僕はここで、ペイントでさっき作った「face.png」を選択しました。
これで、Visual C#のこのプロジェクトで、この画像ファイルを利用できるようになりました。

そうしたら、プログラムを書いていきましょう。

public class Game1 : Microsoft.Xna.Framework.Game
{
  GraphicsDeviceManager graphics;
  ContentManager content;

  public Game1()
  {
    graphics = new GraphicsDeviceManager(this);
    content = new ContentManager(Services);
  }

と書かれている部分があります。この、「ContentManager content;」と、「public Game1()」の間に次の項目を入れます。

  Texture2D myTexture;
  SpriteBatch spriteBatch;
  Vector2 spritePosition = Vector2.Zero;
  Vector2 spriteSpeed = new Vector2(50.0f, 50.0f);

あとで、詳しい説明をすることにして、とりあえず先に進みます。
今度は、さっき折りたたんだ中で、「LoadGraphicsContent」のところを開きなおして、中身を次のようにします。ちなみに書き加えるところは「赤く」しておきました。

protected override void LoadGraphicsContent(bool loadAllContent)
{
  if (loadAllContent)
  {
    // TODO: Load any ResourceManagementMode.Automatic content
    myTexture = content.Load<Texture2D>("face");
    spriteBatch = new SpriteBatch(graphics.GraphicsDevice);
  }

  // TODO: Load any ResourceManagementMode.Manual content
}

ちなみに、この中で、「face」と書かれたところがあります。僕は、さっきペイントで「face.png」というのを作って、ソリューションエクスプローラに入れたわけですが、この拡張子の部分を取って、「face」となっています。作った画像が「body.jpg」であれば、ここは「body」になりますし、「ball.bmp」であれば、「ball」になります。

さて、この後は、折りたたまれた「Draw」を書き換えます。さっきと同じように書き加えるところは「赤字」にしています。

protected override void Draw(GameTime gameTime)
{
  graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

  // TODO: Add your drawing code here

  spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
  spriteBatch.Draw(myTexture, spritePosition, Color.White);
  spriteBatch.End();

  base.Draw(gameTime);
}

さぁ、これで、もう実行は可能です。[F5]キーを押して、ビルド&実行をしてみましょう。

Step4終了後








左上の方に、さっき作った画像が貼られています。とりあえず、Step 4では、ここまでです。終わりにする時にはウィンドウ右上の×ボタンを押しましょう。(XBOXのゲームパッドがUSBで接続されているときは、Backボタンを押してもプログラムは終了します。)

今日のところはここまで。次は、当然ながら、この絵を動かすってことをやってみたいと思います。


dmatsu2005 at 08:14コメント(0)トラックバック(0) 

2007年07月24日

【講座001】 まず新規プロジェクトを作ってみよう

やっと今日から始まるプログラミング講座!ということで、ゲーム作りを進めていきたいと思います。ゲームを作るにもXNAってのがどういうものなのか? Visual C#ってなんだろう?ってことから始まってしまうので、いろいろと触ってみたいと思います。

何はともあれ、 Visual C#でゲームを作る、というか、ソフトウェアを作るためにいちばん最初に行うのは、「プロジェクトを作成する」ってことになります。プロジェクトっての は、1つの実行可能形式のEXEファイルを作るため(DLLっていう形式のファイルを作るのが目的だったりすることもあるけれど)の単位でして、それを作 らなければなりません。
ただ、からっぽのプロジェクトってのを作ってしまうと、一からいろいろなものを作らなければなりませんが、 XNAをインストールしているので、「ひな形(テンプレート)」ってもので、「ゲーム」の基本パッケージってのが入っています。これをベースにして、ゲー ムを作っていくことにします。

新規プロジェクト





Visual C#を起動して、[ファイル]-[新しいプロジェクト]を選びます。

新規プロジェクト 2








で、テンプレートの中の「Windows Game」を選びます。となりに「Windows Game Library」ってのもあるので間違えないようにしましょう。プロジェクト名は「TestProject」と入力しましたが、別に好きな名前で構いませ ん。
そうすると、ちょっとHDDが動いて、Gameのプロジェクトができあがります。タブには「Game1.cs」ってのが表示され ていると思いますが、この中身をざっくり見るために、左側の□をクリックして、ちょっと概観を見てみたいと思います。

折りたたんでみる






「/// <summary>」ってなっているところと「protected override...」ってなっているところをまとめていくと、次のような状況になります。

全体像







画面では見づらいですから、まとめると、このGameというClass(Classっての が、まだ、何かよくわからなくてもいいです)には、
  • Initialize
  • LoadGraphicsContent
  • UnloadGraphicsContent
  • Update
  • Draw
って のが入っているんだな、ということがわかります。でも、それが何を意味しているのか、よく分りませんから、Helpを使ってみるといいわけです。Help は、知りたい言葉の上で[F1]キーを押せば立ち上がります。
いちばん最初の時には、「WebのHelpを使いますか?」みたいなこ とを聞かれますが、情報が一番早く集まるので、Webと連動したHelpを使った方がいいわけですから、「Webも一緒にしらべる」オプションを選びま しょう。
で、立ちあがると、こんな画面です。

Helpを使う







「やっぱり英語か・・・。」みたいな気持ちになるかもしれませんね。
ただ、左側の上の方にプルダウンメニューが付いていますが、この中の「Visual C# Express Edition」を選んで、その下のメニューの中をいくつかクリックしてみると「Visual C#」の項目は、日本語化されているのが多いことも分かります。お目当ての「XNA Game Studio Express」が英語のままなのが辛いんだな・・・と。
マイクロソフトさん、日本のゲームプログラマー増やすなら、早く日本語化し てくれ!とお願いしたくもなるわけですが、しょうがないので、英語のまま、読んでいきます。

そうすると、 「Your First Game: Microsoft XNA Game Studio Express in 2D」(はじめてのゲーム: Microsoft XNA Game Studio Express in 2D)という項目を見つけました。「This article leads you through the steps necessary to create a simple sprite-based game by using XNA Game Studio Express. 」(この項目は、XNA GSEを使って、簡単なスプライトベースのゲームを作るのに必要なステップを紹介しています。)と書かれています。
そのあとのStep2までが、さっきまでやったことと同じで、Step3には、

If you build and run your game now, the GraphicsDeviceManager will handle setting up your screen size and rendering a blank screen. Your game will run and update all by itself. It's up to you to insert your own code to make the game more interesting. (これで、ビルドと実行をすると、GraphicsDeviceManagerってのが、ス クリーンサイズを認識して、からっぽの空間を描くでしょう。この空っぽの空間にゲームが動いていきます。あとはゲームを面白くしていくのは、コードを追加 していくあなた次第です。)

Much of the code to start and run your game has already been written for you, and all have places for you to insert your code.(もうすでにあなたのために、ゲームをスタートし、動かすためのコードが書かれていますか ら、あなたは、そこにコードを挿入していけばいいんです。)

  • The Initialize method is where you can initialize any assets that do not require a GraphicsDevice to be initialized.(Initialize メソッドは、GraphicsDevice以外の他のいろいろな初期化を行うところです。)
  • The LoadGraphicsContent method is where you load any graphical assets such as models and textures.(LoadGraphicsContent メソッドは、モデルやテクスチャなどのグラフィックについて読み込むところです。)
  • The UnloadGraphicsContent method is where any graphical assets can be released. Generally, no extra code is required here, as assets will be released automatically when they are no longer needed.(UnloadGraphicsContent メソッドは、グラフィックが解放されるときに実行されます、普通、使わなくなると、自動的に開放されるので、特に何かを書く必要はありません。)
  • The Update loop is the best place to update your game logic: move objects around, take player input, decide the outcome of collisions between objects, and so on.(Update ループは、ゲームロジックの更新に使うのに最も適した場所です。たとえば、何かが動きまわるとか、プレイヤーの入力を受け取ったり、物と物が衝突したとき にどういう結果を決めるとか、そういうことを書き入れます。)
  • The Draw loop is the best place to render all of your objects and backgrounds on the screen.(Draw ループは、画面に物や背景を実際に書き入れる場所です。)
と書かれています。これで、Game Classというものの概観がわかりました。簡単にいえば、InitializeとLoadGraphicsContentでゲームの初期化や画像の読み込みなどを行っておいて、Updateで実際のゲームの計算や処理を行って、Drawで画面に書き込むということをしていくんだ、というわけですね。(UnloadGraphicsContentはこれといって何かを書く必要はないみたい)

明日は、この先のサンプルプログラムを作ってみましょう。
 

dmatsu2005 at 14:57コメント(0)トラックバック(0) 
livedoor プロフィール

アロハ

痩せないと死ぬよっていう宣告を受けてしまったので、ダイエットに目覚めたプログラマー(約95kg)

広告

レンタルサーバーなら使えるねっと


Google AdSense
Google検索
訪問者数
  • 今日:
  • 昨日:
  • 累計:

オススメの書籍