XNA

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月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) 

2007年07月22日

ただいま、ゲーム制作中です

今日は日曜日なので、会社はお休み。ただ、現在、僕の大切な方が二人も入院中でして、そのお見舞いに行ってきました。どちらの方も早く良くなってほしいです。一人は僕の祖母でして、明日手術ということもあり、ちょっと長めにいました。
入院歴というか、僕も人生の中では、過去5回入院しているのかな?、多い方だと思うのです。お見舞いを受ける方の立場から言うと、来てもらえると嬉しいのだけど、1回同時に15人くらい来たことがありまして大変でした。長いと疲れちゃうし、早めに切り上げた方がいいよなって自分がお見舞いに行く時には思っていたりします。
それでも、久しぶりにゆっくりと時間の取れるお休みでしたから、いつまでもプログラミング講座が始められないのでは仕方がないので、いろいろと仕込みをしておりました。スモールステップで一つ一つやったことが確認できるような作り方を工夫しているのですが、なかなかVisual C#での操作方法を説明しながらは、大変かもとか考えながら、仕込みをしています。
基本的に絵ごころがないので、ペイントで作った適当な絵を貼ったりして、自分の絵にがっかりしながら作っていますが、まぁこれは、講座中では自分で作ってね、ってことになる予定ですので、今から準備をされている方は「コンピューターを擬人化したキャラクタ」ってのをイメージしておいてください。
ペイントで作るとは言いましたが、自分でお使いの絵を描くソフトがあれば、それを使ってもらっても構いませんが、基本的には「できるかぎりお金をかけない」で、できるようにしたいと思っていますので、あしからずご了承ください。別にデジカメで撮った写真をつかってもいいわけですから、それでもいいかもしれませんし。
というわけで、今週スタートするぞ

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

2007年07月16日

レーシングゲーム

レーシングゲーム・タイトル画面










レーシングゲーム面白い
これがタダでできるっていうだけでも儲けた気になるくらいよくできてます。Microsoftは太っ腹だなぁと痛感してしまいます。ゲーム中の画面はこちら。

レーシングゲーム中








ソースプログラムも公開されているので、いじろうと思えばいじれるわけだよね。車のテクスチャを変えてみたり、周りの風景をいじってみたり、ゲーム中の希望としては、マップ表示が欲しかったりと、いくつか改造してみたいことがあるわけでして、それはおいおいチャレンジしてみようと思います。
なんとなく、遊べてしまっているので、いったん初心に戻って、Visual C#の使い方とか、XNAでの基本的なゲームの作り方とかを勉強してみようと思います。


dmatsu2005 at 11:54コメント(0)トラックバック(0) 

2007年07月15日

XNA クリエイターズ クラブ

XNAで一人で遊べるゲームを探していると、XNA クリエイターズ クラブってところにサンプルソースごと、いろいろな物が落ちていることを発見します。

XNA クリエイターズ クラブ
http://creators.xna.com/

日本語のいいわけページなんかもあるけれどね。
http://www.microsoft.com/japan/msdn/xna/XNA_creators_club.aspx

「現状、XNA クリエイターズ クラブのコミュニティサイトは英語のみで提供されていますが、今後は日本語でもサービスを提供させていただく予定です。
英語が不得意でもスターターキットやサンプルなどが、すでにたくさん配信されているので、是非とも一度足を運んでみてください。」

だそうです。英語だと大変なんだよね。読むのに時間がかかるから・・・。

でも、とりあえず、XNA クリエイターズ クラブに行ってみると、レーシングゲームを発見します。実は、このゲームがあることを以前から知っていたので、ぜひやってみたいと思っていました。

そんなわけでダウンロードします。まず、この「RACING GAME」をクリックします。

レーシングゲームのアイコン







英語で、

To install the Racing Game Starter Kit:

1. Download the Racing Game .vsi files.

2. Run Visual Studio Installer, following the on-screen instructions.

3. On the Visual C# Express File menu, click New Project.
This may take a minute to load the template for the first time.

4. Choose Racing Game Starter Kit, and then click OK.



と書かれていますから、Racing Game Windowsの方をダウンロードします(1)。
その後、(2)RacingGameWindows.vsiというファイルをダブルクリックして、
インストーラを起動し、とりあえず、画面の指示に従います。
(3)Visual C#を起動して、[ファイル]から[新しいプロジェクト]をクリックする。
(このとき最初の1回だけテンプレートを読み込むのに1分くらいかかるかもしれません、と注意書きされています)
(4)Racing Game Starter Kitを選んで、クリックし、OKを押す。

とまぁそういう翻訳(超訳になっているかしら)です。

で、また、F5キーを押して起動を・・・、としたら、時間がかかるのはいいのだけど、音だけしてきて、ちっともゲームが始まらない・・・。真っ白な画面になったりする・・・

なぜだぁ、とか悩みまして、VISTA Home Premium以上の機能である3D フリップ機能(Windows+TAB)でVisual C#の画面にして、Shift+F5でデバッグ中止にすると、画面が戻ってきてます。WindowsXPだったら、ALT+TABでうまくVisual C#の画面に持ってくるといいでしょう。

これは僕個人の問題なのかどうかはわからんのですが、もう一度F5キーを押して、待っているとゲームが普通に始まるんですね。うーん・・・、何が悪いんだろう・・・。もし、同じようにはまってしまったら、どうにか回避できますけれど、詳しい方、教えてくださいませ。


dmatsu2005 at 06:37コメント(0)トラックバック(0) 

2007年07月13日

XBOXのコントローラを買う

さて、やっと画面が出てきましたから、ゲームをしようを思うのですが、よくよく画面を見ると、[B] RETRO、[A] EVOLVED、[X] INFOとか書かれていて、スペースキーやEnterキーを押しても何も始まりません…

Spacewar起動画面




仕方がないので、マウスカーソルをウィンドウの右上の[×]に持っていって、クリックすることができましたので、一旦中止して、readme.htmを読んでみることにします。
すると、Spacewar Controlsという項目があって、そこには、昔々にPCゲームで2人同時プレイをキーボードでやったときの、恐ろしい配置が書かれています。

Player 1          Player 2
  W   Fire:  V     8    Fire: 7 or .
  ↑   Warp: G     ↑    Warp: 1 or 0
A← →D         4← →6
  ↓             ↓
  S             2

久々に感じる無理やりなキー配置(Player1側)。たまりません。

ちなみに、最初、ゲームを始める際には、Fireに相当するボタンを押すことで
スタートできますが…。よくよく考えると、このゲームは対戦型ゲーム。しかも、相手は「人」。COM対戦ではないんですね。というわけで、むりくり、右手と左手で適当にプレイして、ゲームのルールもあまりよくわからないまま、疲れて終了。このゲームを一緒にやってくれる人を募集中です。

どちらにしても、このままキーボードでゲームをするのは不可能と判断して、XBOX のコントローラを買ってきました。

XBOX コントローラ





VISTAで使うためには、VISTA用のアクセサリーソフトが必要のようなので、ダウンロードします。

Microsoft Hardware ダウンロード一覧

どちらにしても、一人でゲームがしたい私は、他のゲームが
欲しいので、それを探しに行く旅に出ることにします。





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

2007年07月11日

XNAをインストールしよう

とりあえず、XNA GSEをインストールしてみましょう。

今回インストールに使ったのはFrontier GBシリーズ
ハイエンドのミドルタワーでちょっと大きいのだけども、
CPUやメモリ、VGAカードがある程度性能良くないと厳しいようなんだよね。

XBOXのグラフィック性能は高いので、ある程度、VGAの力が無いと
ゲーム開発は難しいと思われます。

【インストールする場合のPCスペックメモ】
CPU: Core 2 Duo以上にしましょう。
メモリ: 1GB無いと厳しいし、2GB積まないとストレスが溜まります。
HDD: MSDNを使いたくなると思われるので、最低4.7GBと
システムドライブに1.5GB以上の空きが必要。ま、250GB以上の
HDDを載せて使いましょう。
OS: Windows XP SP2以降か、Windows VISTA。僕は VISTA にします。
VGA: DirectX 9.0c、Shader Model 1.1 (2.0以上推奨)のグラフィックカード
そんなこと言われても…、ってなると思いますけれど、
今なら、nVidia の GeForce 8600GT以降がいいでしょう。
7600GSでも動きます。

さて、インストールするものは何か、ってことですが、
・Visual C# 2005 Express Edition
・Visual C# 2005 Express Edition Service Pack 1
VISTAのときだけ→ Visual Studio 2005 Service Pack 1 Update for Windows VISTA
・XNA Game Studio Express
の4つ(XPだったら3つ)です。

XNAのWebサイトに行って、最新情報を確認してみてください。

http://www.microsoft.com/japan/msdn/xna/XNA_start.aspx

スクリーンショットの右上の矢印のボタン「XNAを始めよう!」から
入れば、インストール手順やダウンロード先のリンクがあるので、
そこからダウンロードしてインストールしましょう。

XNA_デベロッパーセンター WEB


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

2007年07月10日

XNA GSEって知ってますか?

XNA Game Studio Express って知ってますか?

MicrosoftのXBOX360ってゲーム機があるわけですけど、このゲーム機用のソフトを作れてしまう開発環境っていうのかな?、誰かがソフトを作らなきゃゲームができないのは当たり前の話なんですが、その作る環境を XNA GSEっていいます。

Windowsでこの環境を作るのは「無料」です。まぁ昔からタダより怖いものはないといいますけども、どうやったらゲームを作ることができるのかな?とか、そういったさわりのところを書き連ねていこうかとBlogを始めました。

同時に日曜プログラマ募集中です!ぜひ、ご連絡ください!


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

アロハ

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

広告

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


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

オススメの書籍