mouvement WASD dans un Flash SWF

Question

Alors, j'allais faire une grande place à l'intérieur de mon CPPS, cependant, je trouve la nécessité de plusieurs salles reliées entre elles avec un peu ennuyeux. Je me demandais si je pouvais augmenter la taille de mes pièces qui étaient liées ensemble et faire défiler autour de lui en utilisant WASD.

C'est l'environnement que je suis en train de gérer:

Ceci est une partie d'une île que j'allais développer, il est une image grossière, mais vous voyez l'idée qu'il continuerait à gauche. C'est là que je veux le faire défiler.

Suis-je un fou pour essayer de le faire? Est-ce seulement possible? Tous les commentaires aideront! Merci!

Answer 1

La solution que vous cherchez est un conteneur masqué.

1. Placez votre carte dans un conteneur.
2. Réglez le X & coordonnée Y par un événement qui vous intéresse (caractère atteint bord de carte, en cliquant sur un bouton, etc ...)
3. Les couches sur le dessus (dans ce cas, votre interface utilisateur) sont assis au-dessus de votre récipient. Si vous aviez d'autres éléments qui ne couvrent pas votre carte du monde, vous souhaitez ajouter un masque au récipient en mettant myContainer.mask = myShape

Pour le plaisir, je suis allé de l'avant et écrit un exemple que vous pouvez exécuter dans un environnement propre projet. Cela devrait démontrer le concept de panoramique cartographique. Essayez vos clés WASD, ou déplacez simplement la souris.

import flash.display.Sprite; 
import flash.display.Shape; 
import flash.events.Event; 
import flash.events.KeyboardEvent; 

// Our container for the map. 
var container:Sprite; 
// For the sake of smoothly animating to its destination, track the X & Y coordinates. 
var destX:Number = 0; 
var destY:Number = 0; 

init(); 
function init():void { 
    // Create a backdrop (mostly for mouseMove) 
    var bg:Sprite = new Sprite(); 
    bg.graphics.beginFill(0xFFFFFF); 
    bg.graphics.lineStyle(2, 0x00); 
    bg.graphics.drawRect(100, 100, stage.stageWidth - 200, stage.stageHeight - 200); 
    bg.graphics.endFill(); 
    addChild(bg); 

    // Our container "map" 
    container = new Sprite(); 
    addChild(container); 

    // Create a mask 
    var m:Shape = new Shape(); 
    m.graphics.beginFill(0x00); 
    m.graphics.drawRect(0, 0, stage.stageWidth - 200, stage.stageHeight - 200); 
    m.graphics.endFill(); 
    m.x = m.y = 100; 
    container.mask = m; 

    // Event Listeners 
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyboardMovement); 
    addEventListener("mouseMove", cursorMovement); 
    addEventListener("enterFrame", updateMap); 

    // Populate the map with shapes 
    for (var i:int = 0; i < 1000; i++) { 
     var c:Shape = createCircle(); 
     container.addChild(c); 
     c.x = random(0, stage.stageWidth * 2); // Random X Coordinate 
     c.y = random(0, stage.stageHeight * 2); // Random Y Coordinate 
    } 
} 

function createCircle():Shape { 
    // Creates a randomly sized/colored circle 
    var c:Shape = new Shape(); 
    c.graphics.beginFill(random(0x000000, 0xFFFFFF)); // Random Color 
    c.graphics.drawCircle(0,0,random(4,20)); // Random Size 
    c.graphics.endFill(); 
    return c; 
} 

function keyboardMovement(e:KeyboardEvent):void { 
    var speed:int = 100 
    switch (e.charCode) { 
     case 115: // s:down 
      speed = -speed; 
     case 119: // w:up 
      destY = clamp(destY + speed, -this.loaderInfo.height, 0); 
      break; 
     case 100: // d:right 
      speed = -speed; 
     case 97: // a:left 
      destX = clamp(destX + speed, -this.loaderInfo.width, 0); 
      break; 
    } 
} 

function cursorMovement(e:Event):void { 
    destX = -mouseX; 
    destY = -mouseY; 
} 

function updateMap(e:Event):void { 
    container.x += (destX - container.x) * 0.1; 
    container.y += (destY - container.y) * 0.1; 
} 

function random(low:Number, high:Number):Number { 
    return Math.floor(Math.random() * (1+high-low)) + low; 
} 

function clamp(original:Number, low:Number, high:Number):Number { 
    return (original > high) ? high : (original < low) ? low : original; 
}