Search the Community

Hello. When I use forEachAlive loop on a group I see that it goes in ascending index order, I need to loop through group children in reverse order without changing their indexes or display order. I searched on google, in documentation ad in examples but I can't find a solution. I will be very grateful for any help.

I'm compiling my TypeScript project into a single JS file, at the moment by specifying an outFile in the compiler options. In my project each class is defined in a different file. The problem is that classes that depend on each other are not concatenated in the output JS in the right order. For example, if I have class A that extends class B, it'd mean class B would have to be compiled before class A. (1) class A extends B { } //error - can't find B class B { } (2) class B { } class A extends B { } //works as expected The problem is the file order in TypeScript compile is not defined according to class dependencies, resulting in many instances of (1). It can be solved by manually defining the compile order with many lines of: /// <reference path="myFile.ts"/> however it is not ideal and can quickly become a headache in large projects. The other option from what I read is to use external modules and be able to require/import relevant classes/files. It sounds good, but it seems to only take care of ASYNC loading during runtime of the required files after each ts file has been compiled into its own js file. What I need is defining the right compile order according to class dependencies during compile time from ts to js. I googled "typescript compile order" and read thoroughly the first 10 results - meaning following references to turoials, documentations, videos, etc... It seems people have been experiencing the same problem but their questions have never been answered to satisfaction. From what I understand it should be possible to do using the CommonJS external module, but all I can understand from the answers is a general sense of what should be happening rather than a simple and straightforward answer of how to actually do it. If you know the answer, let's solve this issue once and for all

Hello, I've got a strange looking render order issue. The "original", non-scaled object(s) appear fine. They render correctly as I might expect. See before-scaling image. However, I applied a scaling about the Z axis (new Vector3(1,1,-1)), and it got all wonky. Almost like the render order was out of wack. See after-scaling image. How do I tell the scene which order to render? Or better yet, how to group them so that it's a non-issue? Thank you...

Hey guys, I'm building a top-down view racing game and I'm hitting a road block (pun unintended) when I try to place the players (the cars) above the map. What I'm trying to do is create two groups (game.add.group()), one for the map and one for the players. I am able to add the players to the player group (z-index of 2), but I can't add the map to the map group (z-index of 1). As you can see in the screen shot, the car is below the road. Could someone please explain how one goes about changing the z-index of TileMaps? How does one do it if there are multiple maps and needs to have the player in between them? Thanks in advance! Racer.Game = function(game){};Racer.Game.prototype = { create: function() { GAME.players = []; GAME.physics.startSystem(Phaser.Physics.P2JS); this.mapLayer = this.add.group(); this.mapLayer.z = 1; this.carLayer = this.add.group(); this.carLayer.z = 2; // Setup the Map/Level var map = new Phaser.Tilemap(GAME, 'level1'); map.addTilesetImage('Tile Sheet', 'tiles'); map.createLayer('track'); // this.mapLayer.add(map); // THIS DOESN"T WORK?! // Setup the Players var p1_keys = GAME.input.keyboard.createCursorKeys(); player1 = new Car(200, 200, 'carYellow', p1_keys, this.carLayer); }, update: function() { for (var player in GAME.players) { GAME.players[player].update(); } } };var Car = function(x, y, colour, keys, layer) { this.turn_speed = 4; this.current_speed = 0; this.acceleration = 15; this.ground_friction = 0.98; this.key_input = keys; var car = new Phaser.Sprite(GAME, x, y, colour); car.anchor.setTo(0.5, 0.5); layer.add(car); GAME.physics.p2.enable(car, false); this.car = car; GAME.players.push(this);};Car.prototype.update = function() { this.current_speed *= this.ground_friction; if (this.key_input.up.isDown) { this.current_speed += this.acceleration; } if (this.key_input.down.isDown) { this.current_speed -= this.acceleration; } if(this.key_input.left.isDown) { this.car.body.angle -= this.turn_speed; } if(this.key_input.right.isDown) { this.car.body.angle += this.turn_speed; } this.car.body.moveForward(this.current_speed);}

Hey, I am trying to reorder my objects but I am having a hard time (I am a very inexperienced programmer in general). So... Not sure if the following is important, but I will very briefly explain what I want to do and how I am trying to do it, maybe you can turn this into a lesson while (hopefully) answering the main question. What I want to do: Draw a map consisting of hexagonal tiles (extending sprites)Show some data about each tile when being hovered (text should be on or close to the tile)How I go about it: create an overlay object controlling the infocreate a map object which in return creates the tile objectslisten to hover events on each tile (did this with this.events.onInputOver.add(this.hoverOver, this); and if (this.input.checkPointerOver(this.game.input.mousePointer, false)) { this.hoverOver(); }, seems to do the same)call a function of the overlay object called "drawTileCoords(this)" in the "this.hoverOver". function of the tile objectsNow hovering over the tiles works just fine (I also do "this.tint = 0xBADA55;" in thisHover(), which does tint the hovered tile). Also having the overlay.drawTileCoords(tile: Tile) function write stuff about the received tile pointer (like tile.position.x) to the console is no problem. In the constructor of the overlay object I set var style = { font: "12px Arial", fill: "#000000", align: "center" };this.textQ = this.game.add.text(0, 0, "a", style);this.textR = this.game.add.text(0, 0, "b", style);which should work just fine, right? In the drawTileCoords function I do this: this.textQ.position.set(tile.center.x - 30, tile.center.y + 30);this.textR.position.set(tile.center.x + 30, tile.center.y + 30);this.textQ.setText("q:" + tile.coords.x);this.textR.setText("r:" + tile.coords.y);and the text changes (checked with console.log(this.textQ.text);) but I never see the text being rendered. Now I believe this is because I create the overlay object first and then the map object (which then creates the tile objects), leading to the tiles being rendered after/over the overlay. This is part of my main Phaser.State's create function : this.overlay = new Overlay(this.game);this.map = new Map(this.overlay, this.game, 52, 64, 20, 10);So my questions are: Am I right with this assumtion?If I am in fact right, what can I do about it? How do I get the overlay to render after the map?If I am not right, what is going on?Also, is this the normal way of having objects talk to each other or would you do it completely different? I really do not know what I am doing, only learning from examples and as I go.

Can anyone give me a example with a button that generates the sprite one by one in order like the image below?

Hi everyone, I want to create a group of sprite image which contains something: eg: in the sprite image I have number 1 , 2 , and 3 then I have a button that set the sprite frame which generates in order without removing the previous frame. eg: set the sprite frame into game world 1, 2, 3, 3, 2, 1, 3, 1, 2. something like that. Therefore, I want to get all the frames that I have set in the group in total number. Can anyone kindly share me some useful way to do it? this is my sample coding: var group;var f;var btn;gameState = {preload: function() { game.load.spritesheet('sprite123', 'assets/123.png', 10, 8); game.load.spritesheet('button','assets/button.png)',80,10);},create: function() { group = game.add.group(); f= group.create(0,0,'sprite123'); btn = game.add.button(200,300,'button',this.button,this,0,1);},button: function() { f.frame = game.rnd.between(0, 2);}}This is just my idea, please anyone shares me the best way to achieve my objective.