DXlibでのマス目作り

[air]

学校の課題で「マス目を作り、マウスが左クリックされている状態でマス目の上をなぞり、離したらそのマス目の上を順番にテクスチャを移動させる」というプログラムを組む課題が出たんですが上手くマス目が作れずに悩んでいます。
どのように作ればいいのか助言などお願いします。
イメージとしては任天堂の「ファイアーエムブレム」のような感じです。

環境は　
OS ： Windows
コンパイラ名 ： VC++ 2013

その他
　・どの程度Ｃ言語を理解しているか
　　　ｃ言語の知識は「明解Ｃ言語入門編」を一通りやり理解できる程度です。
　・ライブラリを使っている場合は何を使っているか
　　　ライブラリは「ＤＸライブラリ」を使っています。

※こういった所に書き込むのは初めてなので不備などありましたらご指摘をしていただけると助かります。

[LL]

学校の課題で「マス目を作り、マウスが左クリックされている状態でマス目の上をなぞり、離したらそのマス目の上を順番にテクスチャを移動させる」というプログラムを組む課題が出たんですが上手くマス目が作れずに悩んでいます。
どのように作ればいいのか助言などお願いします。
イメージとしては任天堂の「ファイアーエムブレム」のような感じです。

環境は　
OS ： Windows
コンパイラ名 ： VC++ 2013

その他
　・どの程度Ｃ言語を理解しているか
　　　ｃ言語の知識は「明解Ｃ言語入門編」を一通りやり理解できる程度です。
　・ライブラリを使っている場合は何を使っているか
　　　ライブラリは「ＤＸライブラリ」を使っています。

※こういった所に書き込むのは初めてなので不備などありましたらご指摘をしていただけると助かります。

そうですね、とりあえず指摘するとすると(フォーラムルール)をちゃんと読みましたか？(一番大事な(努力した形跡)を提示していないとなるとどうも一部分だけ読んだ感じがします)
ソースコードは無くとも最低限どんな事を調べたのか、またそれを参考に自分はどんなアルゴリズムを考えたかを文章だけでいいので提示していただけると助言しやすくなるとおもいますよ。
昔と違って今はネットが進化した時代ですし、大抵検索すればヒントだけでも出てきます。
(よくあるのは少ない情報の提供で回答してもらったのに、それは気がついていたと言う流れです。)
ここは丸投げする場所ではなく自分の提示した知識に何が足りていないのか、どこが間違っているのかを指摘してもらうのが中心になる質問掲示板なので、まずはダメ元でいいので調べてみましょう。
また、できる限りでいいので作ってみるのも大事です。(ウィンドウ上に升目だけを出す、またはマウスの座標を出すだけのプログラムなど)

ちなみDxLibでマウス座標を取得するならGetMousePoint関数を使うとあっさり取得できます。
http://karetta.jp/book-node/game-programming/236808
上のサイトが参考になると思います。

ポリゴンやテクスチャ関係ならばリファレンスが役に立つでしょう。
http://homepage2.nifty.com/natupaji/DxL ... nc_3d.html

それとももしかして、ソースコードではなく設計やアルゴリズムの段階でつまづいたということでしょうか？

[softya（ソフト屋)]

どこまで出来ているかソースコードは提示できますか？
現状だと課題の丸投げになってしまっています。
ここまでは出来るが、ここは出来ないの具体的な説明をお願いします。

[air]

確かに質問が雑で説明も足りませんでした、すみません。

コード:

#include "DxLib.h"
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,
    LPSTR lpCmdLine, int nCmdShow)
{
    //初期化処理--------------------------------------------------------------------------------------
    ChangeWindowMode(TRUE); //ウィンドウモードに変更
    SetGraphMode(1280, 720, 32); //ウィンドウのサイズ
    SetMouseDispFlag(TRUE); // マウスを表示状態にする
    if (DxLib_Init() == -1) // ＤＸライブラリ初期化処理
        return -1; // エラーが起きたら直ちに終了
    SetDrawScreen(DX_SCREEN_BACK); //画面を裏画面にセット

    //本文-----------------------------------------------------------------------------------------------------
    int test1_up = LoadGraph("test1_up.png");           // test1の上向きの画像
    int test1_down = LoadGraph("test1_down.png");     // test1の下向きの画像
    int test1_right = LoadGraph("test1_right.png");   // test1の右向きの画像
    int test1_left = LoadGraph("test1_left.png");     // test1も左向きの画像
    int backgh = LoadGraph("dining.png");           //背景画像の読み込み
    int hand = LoadGraph("hand.png");       //カーソルの位置に表示する画像
    int gh_test1 = test1_right;                   // test1_right.png画像のメモリへの読みこみ
    int test1_x = 50, test1_y = 150;              //画像表示座標を宣言
    int MouseBufX, MouseBufY;                   // マウスのＸ座標、Ｙ座標を格納する
    int MouseInput;
    int Cr;	//色を格納
    int PointX = 0, PointY = 0;                             //ポインタの座標
    gh_test1 = test1_right;
	//メインループ----------------------------------------------------------------------------------
    for (;;)
    {
        DrawExtendGraph(0, 0, 960, 720, backgh, TRUE); // 読みこんだ背景を拡大描画
        DrawExtendGraph(test1_x, test1_y, test1_x + 80, test1_y + 60, gh_test1, TRUE); // 読みこんだtest1を拡大描画
        GetMousePoint(&MouseBufX, &MouseBufY);  // マウスの位置を取得
        DrawExtendGraph(MouseBufX - 60, MouseBufY, MouseBufX + 80, MouseBufY + 100, hand, TRUE); // 読みこんだグラフィックを拡大描画
        Cr = GetColor(255, 255, 255);    // 白色の値を取得
        DrawLine(test1_x, test1_y, MouseBufX, MouseBufY, Cr);    // 線を描画

		//画像をカーソルのところに移動する
		if ((GetMouseInput() & MOUSE_INPUT_LEFT) != 0)
		{
			if (MouseBufX > test1_x)
			{
				test1_x = test1_x + 2;
				gh_test1 = test1_right;
			}

			if (MouseBufX < test1_x)
			{
				test1_x = test1_x - 2;
				gh_test1 = test1_left;
			}

			if (MouseBufY > test1_y)
			{
				test1_y = test1_y + 2;
				gh_test1 = test1_down;
			}

			if (MouseBufY < test1_y)
			{
				test1_y = test1_y - 2;
				gh_test1 = test1_up;
			}
		}
		else
		{
			// 押されていない
		}

        ScreenFlip(); //裏画面を表画面に反映する
        ClearDrawScreen(); //裏画面に描かれたものを全て消去
        if (ProcessMessage() == -1) //ウィンドウのメッセージ処理
        {
            break; //ウィンドウのメッセージ処理にエラーが発生した場合ループを抜ける
        }
    }
    //終了処理----------------------------------------------------------------------------------------------
    DxLib_End(); // ＤＸライブラリ使用の終了処理
    return 0; // ソフトの終了
}

現在はこのような感じになっています。
マスの数は背景画像の上に6×5マスぐらいの予定で。
左クリックが押されている時にマウスカーソルの位置にtest1が向かうようになっており、カーソルとtest1を白い線が繋いでいます。
やろうとしているマス目と関係があるか分かりませんがやる事が分からず迷走してこのような形になってしまいました。

ＤＸライブラリ　関数リファレンスページhttp://homepage2.nifty.com/natupaji/DxLib/dxfunc.html
こちらのサイトを見て考えていましたがどれを使うのか分からず、他のサイトを見ても混乱してしまっています。

[softya（ソフト屋)]

マス目自身が描かれていないですが、さきにマス目を描かれては？
手順として
１．マス目を描く
２．マウスがどのマス目をクリックしたか表示
３．マウスのなぞるマス目を覚える仕組み
４．マウスの移動後をスプライトがなぞる動き。
で作成されてはどうでしょうか？
リファレンスですが、すでに使われている関数だけで出来そうです。

[air]

マス目自身が描かれていないですが、さきにマス目を描かれては？
手順として
１．マス目を描く
２．マウスがどのマス目をクリックしたか表示
３．マウスのなぞるマス目を覚える仕組み
４．マウスの移動後をスプライトがなぞる動き。
で作成されてはどうでしょうか？
リファレンスですが、すでに使われている関数だけで出来そうです。

softya（ソフト屋）さん、返信ありがとうございます。
簡単な質問でお恥ずかしいのですが、工程1のマス目を書くところで真っ先にDrawLineで1行ずつ書く方法が浮かんだのですが、DrowBoxで1マスずつ書いたり他の関数を使ったりしたほうがいいですかね？

[softya（ソフト屋)]

DrawLineでもDrawBoxでも、どちらも正解だと思います。なのでご自身でお決め下さい。

[air]

忙しくて返信遅れました。
線を引いてクリックを表示はできたのですが、なぞる仕組みが良くわかりませんでした。
それと量が多くなり見にくくなってしまってforかwhileで見やすくしたかったのですが上手くいかずに悩んでます。

コード:

        DrawLine(0, 120, 960, 120, Cr);    // 線を描画
        DrawLine(0, 240, 960, 240, Cr);    // 線を描画
        DrawLine(0, 360, 960, 360, Cr);    // 線を描画
        DrawLine(0, 480, 960, 480, Cr);    // 線を描画
        DrawLine(0, 600, 960, 600, Cr);    // 線を描画
        DrawLine(120, 0, 120, 720, Cr);    // 線を描画
        DrawLine(240, 0, 240, 720, Cr);    // 線を描画
        DrawLine(360, 0, 360, 720, Cr);    // 線を描画
        DrawLine(480, 0, 480, 720, Cr);    // 線を描画
        DrawLine(600, 0, 600, 720, Cr);    // 線を描画
        DrawLine(720, 0, 720, 720, Cr);    // 線を描画
        DrawLine(840, 0, 840, 720, Cr);    // 線を描画
        DrawLine(960, 0, 960, 720, Cr);    // 線を描画

        if (PointX <= 120 && PointY <= 120){
            DrawString(1080, 240, "1×1", Cr);   // 1*1の範囲
            if ((GetMouseInput() & MOUSE_INPUT_LEFT) != 0)
            {
                DrawString(1080, 250, "*", Cr);
            }
        }
        if (PointX <= 240 && PointY <= 120 && PointX > 120){
            DrawString(1080, 240, "1×2", Cr);   // 1*2の範囲
            if ((GetMouseInput() & MOUSE_INPUT_LEFT) != 0)
            {
                DrawString(1080, 250, "*", Cr);
            }
        }

//※全部張ると長くなるので割愛してます。

質問ばかりですが、マウスのなぞった場所を覚える仕組みと綺麗に書くのはどうすればいいのかご指導お願いしたいです。

[softya（ソフト屋)]

両方いっぺんにするのは無理があるので、まずスッキリ片付けましょうか。
座標を構造体配列に入れて、forループで回してやればスッキリしますよ。
マスのサイズが固定だと思いますので、それはそれでconst intで書いておきます。

[air]

学校で少し時間があったのでまとめるのを頑張ったらできました。
ですがコメントを見る前だったので関数化は出来ていないです。
正直なところ、マウスのなぞるマス目を覚える仕組みがさっぱりわかりません

コード:

        for (i = 1; i <= 5; i++){
            DrawLine(0, i * 120, 960, i * 120, Cr);    // 線を描画
        }
        for (i = 1; i <= 8; i++){
            DrawLine(i * 120, 0, i * 120, 720, Cr);    // 線を描画
        }

        for (i = 1; i <= 6; i++){
            // i行目の範囲
            for (j = 1; j <= 8; j++){
                if (PointX <= j * 120 && PointY <= i * 120 && PointX >(j - 1) * 120 && PointY > 120 * (i - 1)){
                    DrawFormatString(1080, 240, Cr, "%d×%d", i, j);   // i * jの範囲
                    if ((GetMouseInput() & MOUSE_INPUT_LEFT) != 0)
                    {
                        DrawFormatString(1080, 250, Cr, "click.%d×%d", i, j);
                    }
                }
            }
        }

[taketoshi]

自分なら碁盤目を二次元配列の構造体で管理し、構造体になぞった順番を記憶する変数を持たせて
なぞった順番に1,2,3と番号を割り振るような仕組みにするかな。

で、マウスを離したら番号の若い順にテクスチャを移動させます。

[softya（ソフト屋)]

すいません。構造体配列を使わずに等間隔なら作れましたね。失礼しました。
あとはtaketoshiさんが説明している感じで作れると思います。、

[air]

taketoshiさん、返信ありがとうございます。
多次元配列と構造体を使ってできるのは漠然と理解はできるのですが、どのようにコードを書けばいいのかが調べてもよく分からないです。

コード:

struct square{
};
int block[6][8];    // マスを作る二次元配列

これをどのように使えばいいのですかね？

[taketoshi]

コード:

typedef struct{
	int nNumber;//なぞった番号を記憶する変数
	int x,y;//ついでにここの構造体が保持するX,Yスタート座標を覚えさせておくと後後便利かも
}hoge;

hoge Map[6][8];//宣言

構造体の宣言の仕方はこんな感じです。
そしてマウスクリックでマス目を記録するロジックで
「予めDrawLineで画面描写しているマス目」と連動させnNumber変数に書き込んでいきます。

やり方はこんな感じでしょうか。

[air]

なるほど、詳しい説明をありがとうございます！
早速やってみます。