● キャラクターの移動 ●
マップが表示できるようになったので
次はマップ上のキャラクターを移動させます
クリック位置による判定
キャラクターが画面中央にいるとしたら
上下左右に進むには上の画像のように
クリック座標を判定するエリアが分かれます
その７でマウスクリックした座標を取得する方法を学びましたが
移動のために判定するエリアがこのような場合
どのような条件式を組めば良いのでしょうか？
簡単じゃん
現在位置より上がクリックされたら上
右がクリックされたら右に進ませればいいんじゃないの？
その条件式を図に表すと
下の図のようになってしまいます
上がクリックされたら
のelseは必然的に下がクリックになるので
右がクリック、という条件は
この条件式では判定することすらできません
ほんとだ・・
ってことは、現在位置より上＋右なら右
下＋右なら下・・かな
４方向のクリック判定ができるようになりました
が、
これだと斜め移動することになってしまいます
う、う～ん・・
傾いた範囲の条件式？？
キャラクターの上下左右の判定は
条件式にしてみようとするとかなり難しいです
よく見たら・・三角形に見えてきた
三角形の面積を求めればいいのかな？
キャラクターが移動してしまうと
判定エリアは四角形や五角形に変化するので
面積を求めるのとは違いますが
三角形に着目して条件式を求める方法が一番近いです
まずはこの形のエリアの条件式を考えてみましょう
作ったウインドウの作業領域の幅と高さは
９００×６００でした
中央の赤い線は０，０から
９００、６００を目指して進んでいます
ちょうど真ん中に辿り着いた時、
ｘは４５０、ｙは３００の位置にいます
よく数字を見てみると、
ｘはｙの１．５倍の数値になっています
その１．５倍という数字は
ウインドウの幅÷高さの値なのです
幅÷高さの値をｙに掛ければ
ｘとｙは、同じペースで進んでいる事になります
なので
ｘがそのｙに１．５を掛けて同じペースで進むラインを超えていた場合は
赤い線の右側
ということになります
よって、赤い線の右側の条件式は
ｘ＞ｙ＊（９００／６００）
となります
赤い線が逆の場合の条件式ですが
ｘ＞９００－ｙ＊（９００／６００）
となります
赤い線は
幅の値から逆に値を引いていったラインになるため
このような条件式になります
２つのラインの条件式を組み合わせることで
クリックによる移動の判定ができるようになります
ソースコード
９－１のコードに足していきます
浮動小数点演算なのでdouble型を使用します
キャラクターの移動とクリック判定を合わせる
キャラクターが中央にいる場合の判定ができました
なので次は、
キャラクターの現在位置に合わせた判定に変えていきましょう
まずはキャラクターを現在位置に表示します
その８でやった、
ビットマップの表示の応用です
現在位置ｘには２、ｙには２が入っています
BitBltの第２，３引数は
現在位置の値にマップチップの大きさを掛けたものになります
キャラクターは４０×４０ドットで作成しました
この場合マップチップより幅が１０ドット大きいので
両端はみ出ると考えて半分の５ドットを引きます
高さも１０ドット大きいのですが
下にはみ出すと不自然になるので１０ドット引いてしまいます
実行結果
ｘ＝２、ｙ＝２の場所に
キャラクターが表示されています
ここからは
キャラクターの現在位置に合わせて条件式を組むのですが
ｘ＞ｙ＊（９００／６００）に
どういう条件を追加すれば
移動後を表す下図のような範囲のクリック判定ができるでしょうか？
真ん中から・・
移動した位置に合わせていくわけだから・・
４５０からｘをマイナス
３００からｙをマイナス
した条件にすればいいのかな？
そういうことです！
ただ、実際コード化してみると分かるのですが
条件式にするにはとても複雑です
なのでいっそ、条件式は変えずに
取得したクリック座標を現在位置に合わせて修正してしまいましょう
pt.x += (435 – x ＊ 30);
pt.y += (285 – y ＊ 30);
ｘ４５０から、キャラクター位置×３０をマイナス
ｙ３００から、キャラクター位置×３０をマイナス
その値で、取得したPOINT ｘ、ｙに修正を加えています
ただし、キャラクターの中心はマップチップの中心
３０を掛けた位置から１５ドット引いた位置にあるため
上のような式になります
ソースコード
キャラクターが画面外に出ないように条件を追加
そして、キャラクターを移動させます
実行結果
マウスカーソルに吸い付かれるように
キャラクターが移動します
進行先マップの判定
最後に
進める場所、進めない場所の条件を追加していきましょう
