広告
↓発売日：2018年09月22日↓
 |
新品価格 |
簡単な背景
何もないとさみしいので今回は簡単な背景を加えてみます。
上から下にスクロールし続けるだけの背景です。
画面左側がゲームそのものを表示するメインの画面、右側がスコア、プレイヤーの残機など表示するスコアボードというような画面構成にしたいと思います。
まずはペイントを起動しましょう。
注意
ペイントは透明な部分がある画像は扱えません！もし使いたい場合はフリーソフトの「gimp」などをご使用ください！
スタートメニューの下のボタンを押して
表示されたアプリ画面の右側の方にあります。
ではペイントを起動します。
左上のファイルメニューのプロパティを選んでください。
ここで画像の大きさを決められるので「440×480」にします。
ここに簡単な背景を描きます。
まず塗りつぶしで黒く塗りつぶします。
あとは鉛筆を選んで線の幅と色を好みで調整しながら点を打っていけば・・・。
星空の完成です。
「back_img.jpg」の名前で保存しといてください。
画像の読み込み
「my_init_back_img()」を見てみましょう。
void my_init_back_img(){
back_img = LoadGraph("../back_img.jpg");
}
画像を使う時はまずメモリに画像ファイルを読み込みます。
その時に使う変数は「int」型の変数になります。
今回は「back_img」という名前の変数にしました。
LoadGraph("画像ファイルへのパス/画像ファイル名");
こちらが画像を変数に読み込む関数です。
パスなどは大丈夫でしょうか？
ファイルのある場所って事ですね。
この場合はソースファイルのある場所が現在位置になります。
ちなみにソースファイルの場所は通常なら
ドキュメント
↓
Visual Studio 2013
↓
Projects
↓
プロジェクト名
↓
プロジェクト名
でソースファイルのあるフォルダに到達します。
back_img = LoadGraph("../back_img.jpg");
こちらの「../」は一つ上のという意味です。
もしソースファイルと同じトコロでいいなら「../」を書かずにファイル名だけで大丈夫です。
back_img = LoadGraph("back_img.jpg");
詳しくは「絶対パス 相対パス」などで検索してみてください。
次に変数初期化用の関数「my_init_variable()」を見てみます。
void my_init_variable(){
gamecount = 0;
Color_White = GetColor(255, 255, 255);
Color_Gray = GetColor(100, 100, 100);
back_img_y = 0;
}
「back_img_y」というのはさきほど作った背景画像をスクロールさせる為のy座標の変数になります。
他の変数とともに初期化しておきます。
座標の移動
それではスクロールさせる為に座標の移動計算をします。
void my_move_back(){
back_img_y++;
if (back_img_y > 480){
back_img_y = 0;
}
}
背景の座標の移動をする「my_move_back()」になります。
中身はさきほどの「back_img_y」をひたすらインクリメントしてが480以上になったら0になったら元に戻しているだけです。
広告
画像の表示
あとはその計算した座標を使って少し工夫して表示すればスクロールする背景ができます。
背景表示の「my_draw_back()」を見てみます。
void my_draw_back(){
DrawGraph(0, back_img_y, back_img, TRUE);
DrawGraph(0, back_img_y - 480, back_img, TRUE);
DrawLine(0, 240, 440, 240, Color_White);
DrawLine(220, 0, 220, 480, Color_White);
DrawFormatString(220, 240, Color_White, "(0,0)");
}
「DrawGraph()」という関数が画像表示の関数になります。
DrawGraph(x座標, y座標, 画像の変数名, TRUE);
左上のx,y座標を指定します。
最後の「TRUE」というのは画像の透明度の情報を使いたい場合は「TRUE」にします。これは透明度の情報がない画像でも「TRUE」のままで大丈夫です。
DrawGraph(0, back_img_y, back_img, TRUE); DrawGraph(0, back_img_y - 480, back_img, TRUE);
あらためてこちらを見てみると画像を縦にずらして２枚を張り合わせるようなカタチで表示してます。
そしてy座標の「back_img_y」を動かす事によってあたかもずっと背景は続いているように表示できるワケです。
そして変数「back_img_y」が480になったら、つまりずらしておろしきったら
if (back_img_y > 480){
back_img_y = 0;
}
と元に戻してあげます。
「double」
「back_img_y」は「double」で宣言しております。
Ｃ言語の入門からすぐこちらにこられた方は「double」は使い慣れてないかもしれませんが、より細かい計算によってあともう少しというニュアンスを出せるので積極的に「double」を使いましょう。
あとはせっかくなので原点表示という事を示すための座標軸を描いております。
DrawLine(0, 240, 440, 240, Color_White); DrawLine(220, 0, 220, 480, Color_White);
直線を引く関数「DrawLine()」です。
DrawLine(始点x, 始点y, 終点x, 終点y, 色の指定);
始点と終点を指定するだけで大丈夫です。
スコアボードの表示
メインとなる画面は完成したので続いてスコアボードを表示してみたいと思います。
void my_draw_score_board(){
DrawBox(440,0,640,480,Color_Gray,true);
DrawFormatString(460, 20, Color_White, "gamecount = %d", gamecount);
}
四角を描く関数「DrawBox()」を使って画面の右側にスコアボード表示部分を描きます。
DrawBox(左上x,左上y,右下x,右下y,色の指定,塗りつぶしの指定);
最後の塗りつぶしの指定は「true」で塗りつぶし「false」で塗りつぶしなしになります。
これで簡単な背景の完成です！
ここまでの中間ソースになります。
次回はいよいよプレイヤーを表示、移動させてみましょう。
次回
四日目 プレイヤーの表示と移動
広告
↓発売日：2016年02月29日↓
 |
12歳からはじめる ゼロからのC言語 ゲームプログラミング教室 新品価格 |
↓発売日：2018年06月22日↓
 |
新品価格 |
↓発売日：2018年03月09日↓
 |
新品価格 |
↓発売日：2017年06月14日↓
 |
新品価格 |
↓発売日：2018年05月21日↓
 |
新品価格 |
↓発売日：2017年12月07日↓
 |
新品価格 |
↓発売日：2017年02月08日↓
 |
新・明解C言語で学ぶアルゴリズムとデータ構造 (明解シリーズ) 新品価格 |
↓発売日：2017年09月26日↓
 |
新品価格 |
