わくわくプログラミング自習室 Blogs

お知らせ：DXライブラリオンライン関数リファレンス付録編の3D関数編を公開しました。まだすべての関数の解説は揃っておりませんが、本記事を読む助けとしていただければ幸いです（足りない関数については本家「DXライブラリ置き場」のリファレンスをご参照ください）。

注：本記事で配布するソースコードにはモデルデータは含めませんので、それぞれの配布元から別途ダウンロードしてください（詳しくは初回記事を参照）。

さて、前回までで3Dの基礎はほぼ終わったので（ライトやマテリアルの解説は飛ばしていますが……）、今回はいよいよモデルをアニメーションさせる方法を説明します。大まかな流れを先に説明しておくと、「MikuMikuDanceでモーションを作成する」→「モーションファイルを書き出す」→「DXライブラリで読み込んで再生する」となります。今回の記事ではモーション作成から書き出しまでを解説します。

改めて紹介しますと、MikuMikuDanceは樋口Mさんが公開している無料の3Dアニメーションツールです。初音ミクなどの3Dモデルを読み込み、それにポーズを付けてアニメーションさせることができます。

VPVP（MikuMikuDance公開ページ）

この記事ではWindows Vista/7向けのMikuMikuDance（DirectX9 Ver）のVer.7.30を使用しています。高スペック向けと説明されていますが、Vista/7で使う場合は他のバージョンよりこちらのほうがFPSが出るようです。

MikuMikuDanceの編集画面と今回の作例
©CRYPTON FUTURE MEDIA, INC.
解説中で使用しているモデルは前回に続きenamel toy box（ハッチさん運営）で公開されている「PMDねんどろ風初音ミクv1.1」

※今回は拡大していないオリジナルのモデルをそのまま使用します。

…続きを読む

お知らせ：DXライブラリオンライン関数リファレンス付録編の3D関数編を公開しました。まだすべての関数の解説は揃っておりませんが、本記事を読む助けとしていただければ幸いです（足りない関数については本家「DXライブラリ置き場」のリファレンスをご参照ください）。

注：本記事で配布するソースコードにはモデルデータは含めませんので、それぞれの配布元から別途ダウンロードしてください（詳しくは初回記事を参照）。

今回はカメラ関係の関数について説明しましょう。これをマスターすると、3Dグラフィックスの基礎はほぼ終了といえます。

現実世界の「カメラ」は二次元の写真や映像を記録する道具です。3Dグラフィックスの「カメラ」も3Dのモデルを2Dの画像にします。立体的な絵を描くためのテクニックとして「遠近法」というものがありますが、その理屈で3次元の座標（ワールド座標）を2次元の座標（スクリーン座標）に変換してやるのです。

座標の変換ですから、内部では前回説明した行列を使って計算しています。ただし、DXライブラリを使ってカメラを設定する分には、行列を意識する必要はほとんどありません。

今回の作例
©CRYPTON FUTURE MEDIA, INC.
解説中で使用しているモデルは前回に続きenamel toy box（ハッチさん運営）で公開されている「PMDねんどろ風初音ミクv1.1」
※モデルのサイズは第2回記事でオリジナルの4倍に拡大しています。

…続きを読む

お知らせ：DXライブラリオンライン関数リファレンス付録編の3D関数編を公開しました。まだすべての関数の解説は揃っておりませんが、本記事を読む助けとしていただければ幸いです（足りない関数については本家「DXライブラリ置き場」のリファレンスをご参照ください）。

注：本記事で配布するソースコードにはモデルデータは含めませんので、それぞれの配布元から別途ダウンロードしてください（詳しくは初回記事を参照）。

今回解説するのは「モデルの変形」です。3Dグラフィックスでいう「変形（Transform）」とは、主に「移動」「拡大／縮小」「回転」の3つのことで、すでに移動と拡大／縮小については初回記事で簡単に解説しています。では、後は回転のやり方を説明するだけかといえば、そうではありません。DXライブラリには簡単に変形を行う関数が用意されていますが、よりスマートな変形処理を行うには、「行列（Matrix）」の知識が必要です。

そこで、まず簡単な変形方法を説明した後、行列について説明していきます。

今回の作例
©CRYPTON FUTURE MEDIA, INC.
解説中で使用しているモデルは前回に続きenamel toy box（ハッチさん運営）で公開されている「PMDねんどろ風初音ミクv1.1」
※モデルのサイズは第2回記事でオリジナルの4倍に拡大しています。

…続きを読む

注：本記事で配布するソースコードにはモデルデータは含めませんので、それぞれの配布元から別途ダウンロードしてください（詳しくは初回記事を参照）。

さて、今回は「モデルの輪郭線を細くする」「ガタガタが目立つのを何とかする」方法を解説する予定でしたが、「ガタガタ」の方は解決方法を見つけることができませんでした。

ガタガタを直すには、Direct3Dの「アンチエイリアス」または「マルチサンプリング」と呼ばれる機能を有効にすればいいのですが、こちらで調べたところではDXライブラリは可能であればマルチサンプリングを有効にするよう設計されているようなのです。

つまり、筆者の環境はマルチサンプリングを使うのは無理だと判定されたようです（なにせノートパソコンのIntel965チップセット内蔵ビデオ機能なもので……）。手元にビデオカードがないので検証できないのですが、これについては、ちゃんとしたビデオカードを積んだパソコンでなら綺麗に表示されるはず、ということでご了解ください。

「ガタガタ解消」の話の代わりに、今回は「PMDエディタでモデルを拡大／縮小する」話と「トゥーン調表示を有効にする」話をします。

今回の作例
©CRYPTON FUTURE MEDIA, INC.
解説中で使用しているモデルは前回に続きenamel toy box（ハッチさん運営）で公開されている「PMDねんどろ風初音ミクv1.1」

…続きを読む

今回からしばらく、DXライブラリの3Dゲーム向け関数の解説記事を書いていくことにします。当面の目標としては、3Dグラフィックスを使った2Dゲームを作ることを目指します。具体的にいうと、ニュー・スーパーマリオブラザーズみたいなゲームですね。これならゲームのメイン処理は2Dゲームのものをそのまま活かせるので、3Dグラフィックスの表示処理の学習に集中できるからです。

この解説を読む方は、マイクロソフトが無料配布しているVisual C++ 2010 Expressを導入済みで、C言語とDXライブラリの基本（主に2Dゲームの作り方）を身につけていることを前提とします。これらについては『14歳からはじめる C言語わくわくゲームプログラミング教室Visual Studio 2010編』という本で解説しておりますので、よろしければご参照ください。
2Dでのプログラミングの話を飛ばしている代わりというわけでもないのですが、DXライブラリの使い方に混ぜて、「座標系」とか「変形行列」といった3Dグラフィックスの基礎知識の話も、可能な範囲で説明していきます。

さて、3Dゲームのプログラミングをするに当たって、最大のハードルとなるのは実は「3Dポリゴンモデルの入手」だったりします。3Dモデルは作るために必要とするスキルが高いため、ゲームに使えるものを用意するのが大変なのです。そこが解説を書き始めにくい原因ともなっていたのですが、DXライブラリの関数解説を眺めていたところ、樋口Mさんが無料公開しているMikuMikuDance用の3Dモデルの読み込みに対応しており、そのコミュニティが盛り上がって多くのモデルが公開されているということを知りました。そこで本解説ではMikuMikuDance形式で公開されているモデルを利用させてもらうことにしました。

ただし、著作権フリー素材というわけではないですし、本ブログの記事は無料公開とはいえ宣伝の側面もありますので、本解説で配布するソースコードにはモデルデータは含めません。読まれた皆さんがそれぞれをダウンロードし、合わせてお使いください。

ということで、今回はenamel toy box（ハッチさん運営）で公開されている「PMDねんどろ風初音ミクv1.1」を使わせていただいて、モデルデータを表示してカーソルキーで動かすというところまでをやってみます。繰り返しますが本記事で作成するソースコードにはモデルデータは含めませんので、上記リンク先から別途ダウンロードしてください。

また、他のモデルを使いたい方は、ソースコード中のファイル名などを適宜書き換えてください。

今回の作例
©CRYPTON FUTURE MEDIA, INC.

…続きを読む

DXライブラリ関数リファレンスの解説には他の関数へのリンクがたくさん貼られているのですが、これを全部設定するのは面倒です。どうせ、aタグの間には関数名が書かれているので、それを使ってハイパーリンクを自動作成してみました。

HTML側では検索置換ですべての関数説明のaタグにref-funclinkというクラスを指定しておきます。

<p>この関数を実行するとロードしたすべてのグラフィックデータハンドル、
作成したフォントハンドルは自動的に削除され、<a class="ref-funclink" href="#R4N3">SetDrawArea </a>, <a class="ref-funclink" href="#R4N6">SetDrawScreen </a>, <a class="ref-funclink" href="#R3N16">SetDrawMode </a>,
<a class="ref-funclink" href="#R3N17">SetDrawBlendMode </a>, <a class="ref-funclink" href="#R3N18">SetDrawBright </a> 等の描画に関係する設定を行う関数による設定も全て初期状態に戻ります

後はJavaScript（要jQuery）でref-funclinkというクラスが設定されている要素を列挙し、本来のhref属性を削除して、クリックイベントハンドラを設定していきます。

//関数名によるリンクを作成
function CreateFunctionLink(){
	$(".ref-funclink").each(function(index, elem){
		//本来のリンクを除外
		$(elem).removeAttr("href");
		//リンク文字列にクリックイベントを設定
		$(elem).click(function(event){
			var linkinfo = $(event.target).text();
			linkinfo = linkinfo.replace("関数","");
			linkinfo = jQuery.trim(linkinfo);
			if(linkinfo.length > 0){
				//リンク文字列と完全一致する関数を探す
				var obj = $("#function-tree a").filter(function(index, elem){
					if($(elem).text()==linkinfo) return true; else false;
				});
				obj.click();
			}
		});
	});
}

クリックイベントハンドラの中ではa要素の子のテキストを取得し、それと一致するものを左側の関数一覧（function-tree）の中から探し出して、そのclickメソッドを呼び出します。jQueryには「あるテキストを含む」という条件のセレクタもあるのですが、それだと「DrawRotaGraph」で検索すると「DrawRotaGraph2」も拾ってきてしまうため、filterメソッドを使って完全一致するものを拾うようにしています。

jQueryについてはこの辺りを参考にしました。このリファレンス見やすくていいですね。

http://semooh.jp/jquery/api/traversing/filter/fn/

DXライブラリのオンライン関数リファレンスはほぼ完成といって良い状態になりました。

http://i-libro.net/game/c14vc2010/dxlib_reference/

ただ、作成目標のひとつとして掲げていた「iPadでも見やすくする」ことは今ひとつ達成仕切れませんでした。PC向けブラウザでは一瞬で終わる、カテゴリ間の切り替えに4秒程度かかってしまいます。

もともとiPad版のSafariはPC向けブラウザより遅いのですが、「サイドバー固定幅メイン可変幅」のCSSを採り入れてからさらに1～2秒ほど遅くなった感じです。特にいったんロードが終わってから、サイドバーを表示するためにレイアウトがガクガクと変わるのが気持ち悪い。このCSSはいったん可変幅のコンテンツを表示してから、固定幅のサイドバーを上から被せるようなしくみになっているので、大きなレイアウト変更が起きるようです。

本来ならiPad用にまったく異なるCSSやスクリプトを用意するのがベストなのですが、時間的に厳しいので妥協案としてレイアウト変更を隠す小技を使ってみました。ただし、iPadでJavaScriptをオフにしていると何も表示されなくなってしまうという副作用があるので、使える状況は限られます。ただ、そもそもこのリファレンスはJavaScriptを切った状態では使い物にならないのでOKということにしています。

…続きを読む

自習室を起ち上げてから忘れないように時々取ってきたサーバ設定メモがあるのですが、Patoleさんがオンラインゲームのサーバを建てられるということで、「ユーザー名」や「パスワード」などのセキュリティ上問題ある部分を伏せて公開することにしました。

…続きを読む

昨年末頃から妙に自習室のサーバが重いとは感じていたのですが、年が明けてからは日に1度はほとんど繋がらず、リモートログインでもできないので、再起動もままならない状態になってしまいました。

cron（指定した時刻にコマンドを自動実行する命令）を使って定期的にApache（Webサーバ）を再起動させてみたり、設定を細々変更してみたり、Wordpress Mu（ブログシステム）は負荷が高いのでアクセスがしばらくないものをアーカイブしたりと、暇を見て色々手を打ってはみたのですが、一瞬回復するものの、すぐに重たくなってしまいます。

最終的にブルートフォース攻撃対策ツールを導入したところ、今日のところはまったくダウンしていないようです。

…続きを読む

マリオもどきにモンスターを追加して、だいたいこんなもんかなという感じになりました。左右はカーソルキーで移動、Xキーでジャンプです。しゃがむことはできません。

・画像をクリックするとYoutubeで再生

実行ファイルはここ、ソースコードはここにあります。ソースコードは要ユーザー登録ですが、書籍の購入者でなくともダウンロードできます。マップエディタも少しバージョンアップしました。

『C言語VS2010編』のサンプルを元にしているので、キモとなる部分に絞って説明すると……

…続きを読む