プロジェクト演習Ⅱ インタラクティブゲーム制作

第10回 はじめての3Dプログラミング やっぱり2次元もいいよね編

今日の内容

• 2次元画像の扱い方 – 画像を読み込んで表示 – 文字表示 – ふよふよしたり動かしたり – 画面エフェクトにも使うよ

今週のプロジェクト

• 授業資料ページからダウンロードします – 落としたZipファイルを解凍して、 出てきたフォルダを好きなところに配置 • 今週のFKUT更新情報 – 2次元画像関連の機能を追加 – 衝突判定関連の機能に修正と追加

今日のサンプル

• 何かカメラの前に張り付いてます • 画像だったり文字だったり • それだけです

説明するほどのこともないのですが

3Dにおける画像との付き合い方

画像データとは

• 言うまでもないですが、 色のついた点の集まり – FKで扱える画像形式 • ビットマップ(BMP) – きれいだがでかい • PNG – – きれいでコンパクト 透過処理もできる • JPEG(JPG) – きちゃないけど超コンパクト

表示するには

• • fkut_SpriteModel – 色々お節介焼きな便利変数です – 画像の表示を絶望的に簡単にできます 詳しくはお品書きを読んでね – FKUT/SpriteModel.h を参照 – できることが書いてあります – それに加えてModel系の命令も使えるよ

基本手順

• • • fkut_SpriteModel型の変数を作る – fkut_SpriteModel spr; 表示させたい画像を読み込む – spr.readPNG(“hoehoe.png”); • readBMP/PNG/JPGを形式に合わせて使う ウィンドウにエントリーする – window.entry(spr); • • 先にカメラの設定を済ませておくこと カメラを変更したら再エントリーすればOK

位置やサイズの調整

• • • glMoveToやglTranslateなどが利用可能 – 画像の中心点がどこにくるかを指定 • ただし、有効なのはX,Y座標値のみ – 座標の軸の取り方にも注意(次スライド参照) setPositionLTで、画像の左上がどこにくるか 基準での位置指定が可能 表示サイズは基本的に画像自体のサイズの ままになる – 変更したい場合はsetSpriteSizeを使う

座標系の注意

• ウィンドウが800x600の場合 (-400,300) (0,0) (400,-300)

文字表示の手順

• • • 文字データ(フォント)を読み込む – initFontを使う – Vista,7の場合は「メイリオ」をおすすめ 表示させたい文字をdrawTextで指定 – drawTextを呼ぶたびに文字が付け足される – – 改行したい場合は”\n”と書く 後で書き直すこともできる 数値の表示についてはサンプル参照 • 色の変更や細かい装飾はWeb上の資料を参照

3次元空間中に表示したい場合

• SpriteModelは画面上に貼り付ける専門の変 数なので、別の変数を用意する • サンプル中に「背景に画像を敷く」サンプルが あるので、それを参考にして空間中に配置で きる、はず

毎週の課題は前々回分まで

• 以降は企画を立てたゲームの制作に注力し てください • 評価については課題提出分と、年明けの時 点での成果によって判断します