Share
Dans ce didacticiel, je vais vous présenter le concept de création de contenu isométrique et les principes de base de la conception avec celui-ci, à l'aide de la bibliothèque open source As3isolib. Nous utiliserons ces compétences pour créer un éditeur de niveau simple, adapté à un jeu isométrique..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Le fichier SWF a été légèrement écrasé pour tenir dans la page; cliquez ici pour le voir en taille réelle.
Premièrement, il est important de savoir ce que nous entendons par isométrique. Isometric est un terme grec qui signifie une mesure égale: toutes les mesures sont à l’échelle, peu importe la distance ou la distance qui les sépare du point de vue. Donc, en mathématiques, la projection isométrique est un type de projection qui préserve la distance le long des objets.
Supposons que vous soyez dans une vue isométrique; vous aurez une vue 3D (par exemple, lorsqu'une caméra prend une photo de vous), où que vous soyez, vous serez affiché à la même échelle en fonction de cette caméra. Cela contraste avec une perspective réelle, dans laquelle vous serez réduit en taille lorsque vous êtes loin de la caméra..
As3isolib gère tous les calculs mathématiques sous-jacents à la création de vos scènes et de vos vues, alors ne vous inquiétez pas pour le calcul!
Mosaïque est un terme utilisé pour désigner tout contenu graphique utilisant des mosaïques comme élément fondamental. Le concept lui-même est un peu vieux - il a été utilisé dans des jeux plus anciens pour des raisons techniques - mais cela ne signifie pas que les jeux basés sur des tuiles sont maintenant morts; De nos jours, le rendu 3D est, mais ces jeux 3D peuvent être basés sur des tuiles (et beaucoup le sont). C’est ici que les jeux isométriques entrent en jeu. Les tuiles sont généralement rectangulaires, mais il existe aussi des tuiles carrées, des tuiles triangulaires et même des tuiles hexagonales (comme dans certains titres de Civilization)..
Les tuiles rectangulaires sont les plus faciles à utiliser, bien que la plupart du temps, lorsque vous travaillez dans un rectangle, vous utilisez des tuiles carrées. Vous pouvez utiliser d'autres tailles, bien sûr, mais le carré semble être un favori. Le point de vue des jeux avec des carreaux carrés est généralement descendant ou aérien. Cela signifie simplement que tous vos graphiques doivent être dessinés comme si vous regardiez l'objet. Parfois, vous pouvez donner à votre jeu une vue légèrement inclinée de sorte que vous regardez surtout vers le bas, mais vous pouvez voir une partie de l'avant ou de l'arrière..
Un autre point de vue pour les carreaux carrés est la vue "défilement latéral", où vous regardez le monde de son côté. C'était très populaire parmi les jeux d'action plus anciens comme Super Mario Bros et le 2D original Duke Nukem. Sur une carte rectangulaire, se déplacer le long de l'axe X signifie se déplacer vers l'est et se déplacer le long de l'axe Y signifie se déplacer vers le sud. Dans un tilemap isométrique, selon son type, déplacer le long de l'axe des abscisses peut signifier bouger au sud-est, et se déplacer le long de l'axe des ordonnées peut vouloir dire se déplacer au sud-ouest.яPour les tuiles isométriques, nous utilisons toujours des zones rectangulaires pour contenir les tuiles; cela ne va pas changer. Ce qui va changer, c'est comment vous allez les rendre.
(Note de la rédaction: un excellent guide sur les différents types de perspectives peut être trouvé ici.)
Il existe trois types de tilemaps isométriques: les diapositives, les décalages et les losanges. Chacun a son propre ensemble de bizarreries, ses propres méthodes de rendu, sa propre manière de représenter un tilemap et sa propre méthode de navigation. Je vais les présenter dans cette étape.
Cartes de diapositives:Le plan de diapositive est probablement le plus facile à rendre, à naviguer et à interagir. Malheureusement, ses utilisations sont limitées. Il est généralement utilisé pour faire défiler des jeux d’action. En règle générale, une diapositive possède un axe X horizontal et un axe Y diagonal, bien qu’il soit possible d’avoir un axe vertical Y et un axe X diagonal. Les tuiles sont coupées en rangées horizontales de haut en bas.
Cartes étalées:Les cartes ‘Staggered’ fonctionnent parfaitement dans les jeux de stratégie tour à tour. C'est également très utile pour simuler un monde rond; il convient mieux aux cartes qui s’enroulent (se déplacent d’un bord à l’autre). Chaque nouvelle ligne de la carte est alternativement décalée d'une moitié de tuile vers la gauche ou vers la droite, ce qui donne un motif en zigzag de tuiles. L'axe des X est généralement horizontal (croissant à l'est) et l'axe des Y est sud-est et sud-ouest. Les cartes étalées sont les plus irrégulières des trois. Les tuiles sont coupées en rangées horizontales, de haut en bas.
Cartes de diamant: Ce type de carte est très populaire dans les jeux de stratégie en temps réel. Ces cartes sont les moins offensantes; les cartes de diapositives ont des sommets et des fonds "en lambeaux", tandis que les cartes décalées ont des bords "en lambeaux". Les cartes en diamant sont donc les plus lisses. Pour les cartes en diamant, la seule condition requise est que les axes X-я et Y soient diagonaux, ce qui vous permet d'augmenter -axis ou axe Y selon votre convenance, comme l'axe X croissant au sud-ouest et l'axe Y au sud-est.
C'est assez de contexte - il est temps de commencer à développer!
La première étape consiste à télécharger As3isolib (ActionScript 3 Isometric Library), une bibliothèque à code source ouvert permettant de créer un contenu projeté isométrique. Un exemple de jeu créé en utilisant isяEmpires and Allies fromяZynga.
La bibliothèque contient des éléments tels que les formes primitives (rectangles, cubes, etc.) et des utilitaires facilitant la création de votre contenu isométrique. Il est également gratuit et peut être utilisé dans tout travail commercial (même si vous pouvez le lui rendre si vous le souhaitez).
Nous allons maintenant le télécharger ici. Après le téléchargement, décompressez le fichier zip dans un nouveau dossier et nommez-leÉditeur de niveaux.
À tout moment, tout en utilisant As3isolib, vous pouvez vous référer à sa documentation via ce lien.
Lancez Flash et créez un nouveau FLA ActionScript 3.0. Nous devons maintenant importer le fichier PSD pour l'interface de l'éditeur de niveau que j'ai créée (elle se trouve dans les fichiers source du didacticiel). Sinon, vous pouvez redéfinir l'interface en fonction de vos attentes. Alors cliquez sur Fichier> Importer> Importer sur la scène, sélectionnez le fichier PSD et cochez la case "Régler la taille de la scène sur la même taille que" яPhotoshopяcanvas "..
Nous avons maintenant les images brutes pour notre éditeur de niveau. Nous devons créer notre classe de document dans laquelle nous allons implémenter notre éditeur de niveaux: dans l’enveloppe des propriétés de la section Publier, vous trouverez un champ Classe; écrivez CDoc et cliquez sur le bouton du crayon. Enregistrez maintenant le fichier ActionScript qui apparaît et nommez-le CDoc..
Faisons nos trois boutons dans le panneau inférieur; faites un clic droit sur l’image d’arrière-plan du bouton et sélectionnez Convertir en symbole comme ce que vous voyez dans l’image, puis renommez le bouton en btnClear, insérer du texte dans les cadres haut, bas, haut et bas et taper dedans TOUT EFFACER. Dans les états Over et Hit, insérez l'image de survol comme dans la capture d'écran..
Puis répétez cette étape pour que les deux boutons restants.
Nous allons maintenant créer les trois onglets: un pour Soild Colours, un autre pour ForBricks et le dernier pour Grass..
Dessinez un rectangle dégradé noir, cliquez dessus avec le bouton droit de la souris, choisissez Convertir en symbole, puis nommez-le à Tabulation et choisissez un type de clip. Marquez maintenant l'option Exporter pour ActionScript, puis dans le champ Classe, écrivez CTab quel sera le nom de la classe pour ce clip d'onglet.
Double-cliquez sur l'onglet Clip et insérez-y du texte. à l'intérieur, écrivez PRÉNOM. Ce texte sera changé avec le nom de l'onglet; pour permettre cela, convertissez ce texte en texte dynamique avec le nom SMS, comme dans l'image ci-dessous.
Nous avons maintenant un clip pour notre onglet, nous devons en instancier trois copies et les nommer, alors faisons-le dans notre classe de document.
package import flash.events.MouseEvent; import flash.text.TextField; import flash.display.MovieClip; public class CTab étend MovieClip public var txt: TextField; fonction publique CTab (Nom: Chaîne) txt = this.txt en tant que TextField; txt.text = Nom; addEventListener (MouseEvent.ROLL_OVER, onRollOver, false, 0, true); addEventListener (MouseEvent.ROLL_OUT, onRollOut, false, 0, true); fonction protégée onRollOver (e: MouseEvent): void this.alpha = 0.9; fonction protégée onRollOut (e: MouseEvent): void this.alpha = 1;
Accentsconagua
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; Classe publique CDoc extension MovieClip // Instanciation de The Tabs private var Solid: CTab; var privé Briques: CTab; var privé Herbe: CTab; fonction publique CDoc () addEventListener (Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true); fonction protégée onAddedToStage (e: Event): void // Création des onglets Solide = new CTab ("SOLID"); Solid.y = 469; Solid.addEventListener (MouseEvent.CLICK, onSolidClick, false, 0, true); addChild (Solid); Briques = nouveau CTab ("BRICKS"); Bricks.y = 494; Bricks.addEventListener (MouseEvent.CLICK, onBricksClick, false, 0, true); addChild (Briques); Grass = new CTab ("GRASS"); Grass.y = 521; Grass.addEventListener (MouseEvent.CLICK, onGrassClick, false, 0, true); addChild (Grass); fonction protégée onSolidClick (e: MouseEvent): void // sera implémenté plus tard fonction protégée onBricksClick (e: MouseEvent): void // sera implémenté plus tard fonction protégée onGrassClick (e: MouseEvent): void // sera mis en œuvre plus tard Découvrons maintenant l’un des aspects les plus importants d’As3isolib: la vue isométrique, qui fait office d’appareil photo montrant les objets isométriques. Il comporte de nombreuses fonctions utiles, telles que le panoramique et le zoom et la mise au point sur un point ou un objet. Il offre également la possibilité de masquer / découper des objets en dehors de ses limites et nous permet également de modifier son contenu d'arrière-plan et de premier plan.
Nous allons créer deux vues dans notre éditeur de niveaux, la première pour notre vue-vision, qui comportera une grille ainsi que les objets de notre niveau, l'autre vue, pour le navigateur d'objets, qui contiendra de nombreux types d'objets pouvant être utilisés dans concevoir le niveau.
Maintenant, nous allons ajouter le code suivant dans notre classe CDoc - assurez-vous de vérifier la numérotation des lignes, ou regardez simplement les fichiers source du tutoriel..
// Ajoute cette ligne avant le constructeur private var viewPort: IsoView;
viewPort = new IsoView (); viewPort.setSize (800, 600); viewPort.centerOnPt (new Pt (-100, 100, 0), false); addChildAt (viewPort, 0); viewPort.addEventListener (MouseEvent.MOUSE_DOWN, onStartPan, false, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_WHEEL, onZoom, false, 0, true);
Dans la première ligne, nous avons créé notre IsoView et l'avons nommé viewPort ensuite, dans la deuxième ligne, nous définissons sa taille à 800x600px. Nous devons le centrer sur un point ou sur un objet, nous avons donc créé un nouveau point à partir de la fonction intégrée. as3isolib.geom package et lui a donné des valeurs x et y dans un espace isométrique 3D (que nous verrons à la prochaine étape).
Nous devons maintenant afficher notre viewPort afin que nous l'ajoutions à la liste d'affichage du document en tant qu'enfant et le placer au bas de notre interface pour nous assurer qu'il ne chevauchera aucun autre élément que nous l'avons ajouté à l'index 0. Ensuite, nous avons ajouté deux écouteurs d'événement sur notre viewPort, l'un pour le panoramique et l'autre pour le zoom (que j'expliquerai à nouveau plus tard)..
Le système de coordonnées utilisé dans Flash s'appelle theяCoordonnée cartésiennesystem.яLe système de coordonnées cartésien est basé sur une grille (composée de nombreux carrés imaginaires de taille égale), avec un axe horizontal appelé theya.axe xet un axe vertical appelé theяy comme dans le coin supérieur gauche de l'image ci-dessous.
L'espace isométrique est un peu différent. la taille de chacun de ses trois axes est identique et les angles entre deux d'entre eux sont égaux à 120 degrés. As3isolib fournit un moyen de convertir un point de coordonnées cartésiennes en coordonnées isométriques (et inversement) en appelantIsoMath.screenToIso (Point: Pt) convertir à sens unique, etIsoMath.isoToScreen (Point: Pt) convertir l'autre.
Il est très simple de créer la scène isométrique qui tiendra nos objets. (Ces objets seront tous hérités de IsoDisplayObject я (par exemple, IsoBox, IsoRectangle, IsoSprite, etc.), qui est la classe de base étendue de tous les objets d'affichage isométriques primitifs et complexes.)
Nous allons installer une nouvelle version d'IsoScene, puis ajouter notre scène à la fenêtre d'affichage..
// Ajoute cette ligne avant le constructeur private var scene: IsoScene;
scene = new IsoScene (); viewPort.addScene (scène);
Pour ajouter une grille dans la fenêtre d'affichage, il suffit d'instancier un nouvel IsoGrid, puis nous pouvons définir sa largeur et sa longueur sur 10 pour obtenir une grille de 10x10. Nous pouvons également définir la taille de la cellule comme bon nous semble (j'ai choisi 30). La dernière et très importante étape consiste à ajouter la grille à la scène..
// Ajoute cette ligne avant le constructeur private var grid: IsoGrid;
grid = new IsoGrid (); grid.setGridSize (10, 10, 1); grid.cellSize = 30; scene.addChild (grille);
Nous devons ajouter un écouteur d’événement pour rendre la scène. C’est très simple, il suffit d’ajouter l’écouteur et dans son corps, appeler le rendre() fonction sur la scène.
// Ajoute ce code dans le programme d'écoute onAddedToStage addEventListener (Event.ENTER_FRAME, onRender, false, 0, true);
fonction privée onRender (e: Event): void scene.render ();
Dans cette étape, nous allons ajouter les écouteurs pour les événements de clic sur les boutons du panneau inférieur, mais nous devons d’abord y accéder, ce que nous pouvons faire avec la fonction getChildByName ().
Sur le premier gestionnaire d'événements pour le Clair bouton nous allons supprimer tous les enfants de la scène, puis nous devons rajouter la grille. dans le S'adapter a l'ecran bouton nous allons définir le zoom actuel de la fenêtre à 1, ce qui le réinitialise à sa valeur par défaut, puis nous le déplacerons à sa valeur par défaut panTo () une fonction. Le dernier bouton est l'endroit où nous allons afficher / masquer les origines de la grille, nous allons donc inverser son état d'affichage; s'il est affiché, nous le cacherons et vice versa.
this.getChildByName ("btnClear"). addEventListener (MouseEvent.CLICK, onbtnClearClick, false, 0, true); this.getChildByName ("btnFit"). addEventListener (MouseEvent.CLICK, onbtnFitClick, false, 0, true); this.getChildByName ("btnShow"). addEventListener (MouseEvent.CLICK, onbtnShowClick, false, 0, true); fonction protégée onbtnClearClick (e: MouseEvent): void scene.removeAllChildren (); scene.addChild (grille); fonction protégée onbtnFitClick (e: MouseEvent): void viewPort.currentZoom = 1; viewPort.panTo (-100, 100); fonction protégée onbtnShowClick (e: MouseEvent): void if (grid.showOrigin) grid.showOrigin = false; else grid.showOrigin = true;
Lorsque nous avons créé notre fenêtre d'affichage, nous avons ajouté un écouteur d'événement pour l'événement MOUSE_DOWN. Dans cet événement, nous allons gérer le démarrage du panoramique: nous allons d'abord créer un point et le nommer. panPt en tant que point global de l’utiliser à différents endroits car il gérera l’emplacement de la souris dans chaque image. Nous lui donnerons les positions X et Y de la souris (je vais expliquer pourquoi dans la prochaine étape).
Ensuite, nous supprimons l'écouteur d'événements de la souris et ajoutons deux nouveaux écouteurs d'événements: un pour la gestion réelle du panoramique et l'autre lorsque nous arrêtons notre panoramique..
varPPt privé: Pt; fonction privée onStartPan (e: MouseEvent): void panPt = new Pt (stage.mouseX, stage.mouseY); viewPort.removeEventListener (MouseEvent.MOUSE_DOWN, onStartPan); viewPort.addEventListener (MouseEvent.MOUSE_MOVE, onPan, false, 0, true); viewPort.addEventListener (MouseEvent.MOUSE_UP, onStopPan, false, 0, true);
Cet écouteur d'événement est appelé lorsque la souris est déplacée. Son fonctionnement est très simple: il effectue un panoramique de la fenêtre en fonction des positions X et Y du panoramique de la position initiale de la souris. moins ses positions actuelles, pour calculer la différence de localisation par rapport à la dernière image. Ensuite, nous définissons le X et le Y sur les positions actuelles de la souris.
fonction privée onPan (e: MouseEvent): void viewPort.panBy (panPt.x - stage.mouseX, panPt.y - stage.mouseY); panPt.x = stage.mouseX; panPt.y = stage.mouseY;
Lorsque nous arrêtons de faire un panoramique, nous devons retirer à la fois le onPan et onStopPan les auditeurs d’évènements car nous n’en avons plus besoin, rajoutez le onStartPan écouteur d'événement pour laisser l'utilisateur repasser à nouveau dans la fenêtre.
fonction privée onStopPan (e: MouseEvent): void viewPort.removeEventListener (MouseEvent.MOUSE_MOVE, onPan); viewPort.removeEventListener (MouseEvent.MOUSE_UP, onStopPan); viewPort.addEventListener (MouseEvent.MOUSE_DOWN, onStartPan, false, 0, true);
Nous avons ajouté le onZoom MOUSE_WHEEL event listenerяavant, nous allons maintenant l'implémenter.
C’est très simple: pour savoir si la souris se déplace vers le haut ou le bas, nous devons vérifier la propriété de l’événement de la souris (e) qui s'appelle 'delta'; si celle-ci est supérieure à 0, nous devons effectuer un zoom avant, sinon, nous devons effectuer un zoom arrière. Pour ce faire, incrémentez ou décrémentez la valeur du zoom. La dernière étape consiste à définir la fenêtre d'affichage currentZoom propriété à notre valeur de zoom.
private var zoomValue: Number = 1; fonction privée onZoom (e: MouseEvent): void if (e.delta> 0) zoomValue + = 0.10; si (e.delta < 0) zoomValue -= 0.10; viewPort.currentZoom = zoomValue;
Gardez à l'esprit que nous n'avons défini aucune vérification des frontières ni des panoramiques, ce qui signifie que vous pouvez effectuer un zoom ou un panoramique de la vue en dehors du bord de la scène. C'est très simple de les ajouter mais je vais vous laisser ça.
Après avoir terminé notre fenêtre et ajouté ses fonctions, nous devons créer le panneau d’objets dans lequel nous pouvons voir nos objets et les ajouter à la fenêtre..
Nous commençons par créer une nouvelle scène isométrique, nommée objectScene, tenir nos objets. Nous créons ensuite une nouvelle vue isométrique pour restituer les objets de la scène et définissons sa taille sur 215x468px, ce qui correspond au panneau des objets. Maintenant, nous devons l’aligner afin de le centrer sur un point de 40x80px. Enfin nous ajoutons le objectScene au objectview en utilisant le addScene () fonction, et ajoute le objectView à la liste d'affichage de notre document.
// Ajoute ce code dans le programme d'écoute onAddedToStage objectScene = new IsoScene (); objectView = new IsoView (); objectView.setSize (215, 468); objectView.centerOnPt (new Pt (40, 80, 0), false); objectView.addScene (objectScene); addChild (objectView);
Maintenant, nous devons créer des objets de couleur unie pour l’onglet uni, nous allons donc ajouter un écouteur d’événements clic.
fonction protégée onSolidClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = nouveau Pt (0, 0); var solidColors: Array = [0xD15415, 0xFF6600, 0xFFCC00, 0x66FF00, 0xFF6699, 0x6699FF, 0x99FF00, 0xFF0066]; pour (var i: int = 0; i < 8; i++) if (i % 2 == 0) p.x = 0; p.y += 50; var obj:IsoRectangle = new IsoRectangle(); obj.setSize(30, 30, 0); obj.fill = new SolidColorFill(solidColors[i], 1); IsoMath.screenToIso(p); obj.moveTo(p.x, p.y, 0); IsoMath.isoToScreen(p); p.x += 80; obj.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true); obj.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true); obj.addEventListener(MouseEvent.CLICK, onObjClick, false, 0, true); objectScene.addChild(obj); objectScene.render();
Tout d'abord, nous retirons tous les enfants du objectScene pour supprimer tous les objets si nous avons appuyé sur un autre onglet. Nous devons créer un point pour enregistrer les positions X et Y des objets, puis nous créons un tableau de couleurs unies et y plaçons des valeurs hexadécimales de couleur. Après cela, nous ferons une boucle dans laquelle nous créerons nos huit objets et les montrerons dans une grille. Ensuite, nous créons réellement chaque rectangle isométrique, en utilisant une forme primitive As3isolibяisometric intégrée, et définissons sa taille sur 30x30px et remplissons sa couleur d’une couleur unie (également intégrée dans As3isolib) en utilisant une valeur de notre tableau, avec un alpha de 1.
Maintenant, nous devons changer nos valeurs de points pour qu’elles soient en coordonnées isométriques. Nous utilisons donc les valeurs susmentionnées. screenToIso () fonction, puis déplacez notre objet vers la nouvelle position et réinitialisez notre point afin qu'il corresponde à des coordonnées d'écran - cela nous permet d'aligner facilement vos objets dans une grille avec nos coordonnées écran (familières) (cartésiennes), tout en déplaçant nos objets avec ce qui leur convient le mieux ( coordonnées isométriques).
Ensuite, nous incriminons simplement la valeur X de 80 et ajoutons trois écouteurs d’événement: les deux premiers gèrent les événements ROLL_OVER pour mettre en surbrillance l’objet lorsqu’il est survolé et le troisième gère les événements CLICK. Enfin, nous ajoutons l'objet à la scène et rendons tout.
Cette étape est très similaire à theяpreviousяone, sauf que nous modifions le contenu du tableau en nos briques, que nous allons créer et importer lors de nos prochaines étapes..
fonction protégée onBricksClick (e: MouseEvent): void objectScene.removeAllChildren (); var p: Pt = nouveau Pt (-20, -10); var briques: tableau = [Bricks1, Bricks2, Bricks3, Bricks4, Bricks5, Bricks6, Bricks7, Bricks8]; pour (var i: int = 0; i < 7; i++) if (i % 2 == 0) p.x = -30; p.y += 50; var sprite:IsoSprite = new IsoSprite(); IsoMath.screenToIso(p); sprite.moveTo(p.x, p.y, 0); IsoMath.isoToScreen(p); p.x += 80; sprite.sprites = [bricks[i]]; sprite.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true); sprite.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true); sprite.addEventListener(MouseEvent.CLICK, onObjClick, false, 0, true); objectScene.addChild(sprite); objectScene.render();
L’autre différence par rapport à l’étape précédente est que nous avons créé un objet sprite isométrique dont l’aspect peut tout à fait être changé. nous avons ajouté nos briques en passant une référence à sprite.sprites qui est un tableau de sprites.
Maintenant, vous pouvez créer les objets en herbe comme nous l’avons fait avec les briques, il vous suffit de changer le des briques tableau à la herbe tableau.
Nous allons créer nos actifs de texture, alors commencez un nouveau document Flash et importez-les à partir d'une image ou d'un fichier PSD. À partir du fichier, cliquez sur Importer> Importer au stade, puis choisissez d'importer les calques en tant que Image bitmap avec des styles de calques modifiables.
Maintenant, nous devons convertir chaque bitmap en clip en faisant un clic droit dessus et en choisissant Convertir en symbole, puis écrivant son nom comme dans les tableaux de Bricks and Grass (Brique1, Brique2, etc).
marque le Exporter pour le partage d'exécution option et type textures.swf dans le champ URL. Enfin aller à Fichier> Paramètres de publication et marquez l'option SWC dans le PUBLIER section, puis cliquez sur Publier. Nous avons maintenant un SWC qui contient tous nos actifs, que nous pouvons importer dans notre LevelEditor pour qu’il soit utilisé..
Il est très simple d'importer notre fichier SWC. Dans le menu Fichier, cliquez sur Paramètres ActionScript, et du Chemin de la bibliothèque Cliquez sur le bouton Flash qui apparaît dans l'image ci-dessous et naviguez jusqu'à notre SWC.
C'est tout! Maintenant nos actifs sont chargés.
Nous devons gérer les événements de souris pour nos objets. Rappelez-vous que les étapes 18 et 19 ont été complétées par trois événements pour chaque objet. Nous allons implémenter les écouteurs d'événement ROLL_OVER dans cette étape simple.
J'aimerais que nos objets aient un effet lumineux lorsque nous les survolons. Nous devons donc accéder aux objets eux-mêmes. Pour cela, As3isolib a un type d’événement intégré appelé ProxyEvent que nous pouvons utiliser pour accéder à l’événement à l’aide de e.target. Nous devrions le jeter comme IsoDisplayObject (qui est la classe de base de tout objet d'affichage isométrique) juste pour rendre cet écouteur d'événement aussi générique que possible, puis pour ajouter un filtre de rayonnement en utilisant les filtres intégrés de Flash..
Le premier paramètre de la GlowFilter constructeur est sa couleur; la seconde est son alpha, que nous allons définir à 1; nous laisserons les valeurs blurX et blurY à leur valeur par défaut, 6, car nous n'avons pas besoin de flou; et enfin nous allons définir la qualité à 64.
Dans le gestionnaire de déploiement, nous venons de réinitialiser les filtres.
fonction privée onRollOverHandler (e: ProxyEvent): void var glow: GlowFilter = new GlowFilter (0xC24704, 1, 6, 6, 64); (e.target comme IsoDisplayObject) .container.filters = [glow]; fonction privée onRollOutHandler (e: ProxyEvent): void (e.target as IsoDisplayObject) .container.filters = [];
Le troisième écouteur d'événement pour nos objets est l'événement CLICK. Que se passera-t-il quand on cliquera sur un objet? Eh bien, nous devons en faire une copie dans la fenêtre et y ajouter une fonctionnalité de glisser-déposer afin de nous permettre de nous déplacer facilement à n’importe quel endroit de la scène..
C'est très simple de faire ça. Nous allons d'abord créer un objet de type IsoDisplayObject et passez notre objet sur lequel nous avons cliqué, comme nous l'avons fait auparavant.
Nous devons maintenant cloner l'objet cliqué. ceci est facile, car As3isolib a une méthode intégrée appelée cloner(), qui appartient à la IsoDisplayObject class, qui retourne une copie de l'objet cloné en conservant ses propriétés de style et de dimension. Cela fonctionnera parfaitement pour les objets rectangulaires isométriques (que nous avons créés dans l'onglet Couleur unie), mais dans le cas des images-objets (briques et herbe), nous devons également copier le tableau d'images-objets pour chaque objet. Nous allons donc effectuer une vérification simple. pour voir si l'objet est de type IsoSprite, et si ses spritesяpropertyяis non null, alors nous allons définir l'objet de spritesяpropertyяpour correspondre à l'objet cliqué sprites.
Ensuite, nous déplacerons nos objets de 50 pixels vers le haut (le long de l'axe Z) pour éviter tout chevauchement avec la grille. Enfin, nous ajouterons trois écouteurs d’événements pour l’objet créé: deux d’entre eux pour le survol et le dernier et le dernier pour gérer le glisser-déposer (que nous couvrirons à la prochaine étape), puis ajouterons notre objet à notre scène et le rendrons..
fonction protégée onObjClick (e: ProxyEvent): void var obj: IsoDisplayObject = e.target as IsoDisplayObject; obj = obj.clone (); if (obj est IsoSprite && (obj comme IsoSprite) .sprites! = null) (obj comme IsoSprite) .sprites = (e.target comme IsoSprite) .sprites; obj.moveTo (0, 0, 50); obj.addEventListener (MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true); obj.addEventListener (MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true); obj.addEventListener (MouseEvent.MOUSE_DOWN, onPickup, false, 0, true); scene.addChild (obj); scene.render ();
Il reste un écouteur d'événement appelé onPickup qui est un événement MOUSE_DOWN pour gérer le début du déplacement. Nous allons commencer par créer une variable privée appelée dragObject, qui sera de type IsoDisplayObject, utiliser inяreferenceя à notre objet glissé tel qu'il apparaît à partir de son nom. Nous allons également créer un point pour gérer la position de l'objet déplacé.
Dans le gestionnaire de collecte, nous allons affecter l’objet glissé à notre dragObject variable, puis pour obtenir le point isométrique actuel de la souris, nous utilisons le viewPort.localToIso () méthode. Ce point sera utile pour calculer la dist
