2

私はトップ ダウン シューティング ゲームに取り組んでいます。基本的に、キャラクターは画面の中央、四角形 (セーフ ゾーン) 内から始まります。キャラクターは静的ではなく、シーンは静的です。彼は安全地帯の中を歩き回ることができます。キャラクターがこのゾーンから出るとすぐに、静態が切り替わります...キャラクターは静態であり、シーンは彼の周りを移動しています。

これに関する唯一の問題は、セーフ ゾーンに戻ることができず、スタティックが再び切り替わってしまうことです。

だから私は永遠にゾーンの外で立ち往生しています。私がしているのは、キャラクターの位置が特定の値 (rect) の「範囲内」にあるかどうかを確認することだけです。彼が外にいる場合は、KeyControls がキャラクターではなくマップに影響します。

これが私の境界 (セーフ ゾーン) チェッカーです。

//Walking Window Boundaries
    var boundarySizeX = 400;
    var boundarySizeY = 200;

    ctxWalkBoundary.fillStyle = "grey";
    ctxWalkBoundary.fillRect(gameWidth/2 - boundarySizeX/2, gameHeight/2 - boundarySizeY/2, boundarySizeX, boundarySizeY);
    ctxWalkBoundary.clearRect((gameWidth/2 - boundarySizeX/2) + 2, (gameHeight/2 - boundarySizeY/2) + 2, (boundarySizeX) - 4, (boundarySizeY) -4 );

    var paddingLeft = (gameWidth - boundarySizeX) / 2;
    var paddingRight = gameWidth - ((gameWidth - boundarySizeX) / 2) - this.charWidth;
    var paddingTop = (gameHeight - boundarySizeY) / 2;
    var paddingBottom = gameHeight - ((gameHeight - boundarySizeY) / 2) - this.charHeight;

    var paddingY = (gameHeight - boundarySizeY) / 2;

    if(this.drawX > paddingLeft && this.drawX < paddingRight && this.drawY > paddingTop && this.drawY < paddingBottom){
        inBoundary = true;
    }
    else{
        inBoundary = false;
        console.debug("Out Of Boundary!");
    }

そして、これは私のキーチェッカーです:

//UP
    if(this.isUpKey){

        //Character movement
        if(inBoundary){
            this.drawX = this.drawX + this.speed * Math.cos((this.characterRotation));
            this.drawY = this.drawY + this.speed * Math.sin((this.characterRotation));
        }
        else{
            mapPositionX = mapPositionX - this.speed * Math.cos((this.characterRotation));
            mapPositionY = mapPositionY - this.speed * Math.sin((this.characterRotation));
        }

キャラクターは常にマウスの方を向いています (回転します)。したがって、ユーザーが W または Up を押すたびに、キャラクターは常にマウスの位置に向かって歩きます。

ゾーンに戻る方法はありますか?

- - - アップデート - - -

どうにかして、まだセーフ ゾーンの外を向いているかどうかを確認する必要があると思います。そうでない場合は、スタティックを逆にします。

4

2 に答える 2

0

ここでの問題は、キャラクターが範囲外になるのを待ってから、代わりにマップを移動することです。しかし、フラグはすでにトリップされており、すでに範囲外であるため、どの方向に進んでもキャラクターの動きは静的です。

代わりに、キャラクターが境界を越えようとしているタイミングを検出し、代わりにマップを移動することでそれを防ぐことができます。

//UP
if(this.isUpKey){

// save the x and y offset to prevent needless recalculation
var xOffset = this.speed * Math.cos(this.characterRotation),
    yOffset = this.speed * Math.sin(this.characterRotation);

    //Character movement
    if( boundaryCheck(xOffset, yOffset) ){
        this.drawX = this.drawX + xOffset;
        this.drawY = this.drawY + yOffset;
    }
    else{
        mapPositionX = mapPositionX - xOffset
        mapPositionY = mapPositionY - yOffset;
    }

次にboundaryCheck、x と y のデルタを取得し、それらがまだ範囲内にあるかどうかを判断します。キャラクターがまだ境界内にreturn trueあり、キャラクターが移動する場合、そうでない場合はマップが移動します。

function boundaryCheck(xOffset, yOffset){
// variables set and other stuff done...
    if(this.drawX + xOffset > paddingLeft && this.drawX + xOffset < paddingRight && this.drawY + yOffset > paddingTop && this.drawY + yOffset < paddingBottom){
       return true;
    }
    else{
        console.debug("Out Of Boundary!");
        return false;
    }

};

この方法では、範囲外のキャラクターが境界に向かって移動しているかどうかを把握する必要がありません。代わりに、キャラクターがどこに向かっているのかを事前に決定し、それに応じて調整して、常にキャラクターを境界内に保ちます.

もちろん、完全なコードがなければ、これはテストできませんが、あなたが与えたものでうまくいくはずです。

于 2013-01-23T00:27:41.053 に答える
0

マップとビューの 2 つを分離するだけです。

マップはあなたのレベルです。そこにオブジェクトを座標で保持します。ビューは、画面に表示されるマップの一部です。ビューには x、y、幅、高さの 4 つのプロパティがあり、幅と高さはおそらくキャンバス サイズです。

画面中央のマップ ポイント (0,0) でゲームを開始した場合、ビュー (x,y) 座標は (-view.width/2, -view.height/2) になります。

ビューでキャラクターとオブジェクトを描画する方法は?

まず、ビューの長方形にあるものだけを描画します。したがって、すべてのオブジェクトをループして、

object.x >= view.x && object.x <= view.x + view.width && object.y >= view.y && object.y <= view.y + view.height

(おそらく、オブジェクトの境界も考慮する必要があります)。

オブジェクトがビュー領域にある場合は、位置に描画し(object.x - view.x, object.y - view.y)ます。そして、それはすべてのものを描くことです。

彼と一緒にキャラクターとビューエリアを移動します。

たとえば、キャラクターが境界と衝突したとき（右の境界と衝突）

character.x >= view.x + view.width

次に、view.x を値 (character.width/2 など) でインクリメントしてビューを右に移動します。

--更新--

ゲームで OOP を使用していないように見えます (実際には、JS のすべてがオブジェクトであるためです。ただし、意図的に使用しているのではありません)。

JS の OOP は説明が多いので、簡単に説明します。

JSON 形式を使用して、Character、Map、View などのオブジェクトを作成できます。

character = {
    x: 0,
    y: 0,
    xspeed: 0,
    yspeed: 0,
    speed: 0,
    radius: 20,
}

map = {
    objects: [
        {sprite: 'tree.jpg', x: 100, y: 50},
        {sprite: 'stone.jpg', x: 20, y: 30},
    ],
}

view = {
    width: canvas.width,
    height: canvas.height,
    x: -this.width/2,
    y: -this.height/2,
}

これらは、次のような関数で使用できるオブジェクトです。

for (var i=0; i++, i<map.objects.length) {
    if (map_obj.x >= view.x && map_obj.x <= view.x + view.width && map_obj.y >= view.y && map_obj.y <= view.y + view.height) {
        var map_obj = map.objects[i];
        draw_sprite(map_obj.sprite, map_obj.x - view.x, map_obj.y - view.y);
    }
}

これは最善の方法ではありませんが、それでも現在の方法よりもはるかに優れています。OOP が何であるかを理解すると、OOP をより良くすることができます。

于 2013-01-23T01:12:48.297 に答える