Powerzaba

Members
  • Content Count

    2
  • Joined

  • Last visited

  1. Hello everyone! I have a grid system with tiled textures on my canvas, all of these textures are inside a container, i've set the width of my PIXI application to be the columns times the size of the squares (the square textures) and the height to be the rows times the size of the squares. Over a certain number of columns and rows the container is being cut and is not showing the "outer tiles". This is the code that I'm using to generate the "map": //Setup PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; //TODO change name from test to official var canvas = document.getElementById("test-canvas"); var roverTimeline = new TimelineLite(); var droneTimeline = new TimelineLite(); const row = 27; const col = 50; const container = new PIXI.Container(); const squareSize = 20; const grid = []; const app = new PIXI.Application({ width: col*squareSize, height: row*squareSize, antialias: true, transparent: true, resolution: 1, view: document.getElementById("test-canvas"), } ); app.renderer.autoResize = true; app.stage.addChild(container); drawGrid(); //Center container container.x = (app.screen.width - container.width) / 2; container.y = (app.screen.height - container.height) / 2; //Add drone & rover on the grid/map var roverSprite = new RoverSprite(); var droneSprite = new DroneSprite(); //test path for rover path = [ {posx: 1, posy:0}, {posx: 2, posy:0}, {posx: 2, posy:1}, {posx: 3, posy:1}, ] //Test movement roverSprite.followPath(path); droneSprite.moveTo(10, 15); //Creating square sprites and add them to the 2D array 'grid' function drawGrid() { for (var i = 0; i < col; i++) { grid[i] = []; for (var j = 0; j < row; j++) { var num = Math.random(); if (num > 0.01) { var terrain = new GrassSprite(i, j, col, row); } else { var terrain = new RockSprite(i, j, col, row); } terrain.posx = i; terrain.posy = j; terrain.sprite.x = (i % col) * squareSize; terrain.sprite.y = Math.floor(j % row) * squareSize; container.addChild(terrain.sprite); grid[i][j] = terrain; } } } I will attach two pictures below, the first one has 27 row and 50 columns and you can see the drone and the rover (red and blue circles), the other picture has like 500 columns and 300 rows and the outer areas are being cut.
  2. Powerzaba

    Pixi.js simulation

    Hello everyone! I'm working on a website where I need to simulate two entities (a drone and a rover), they communicate with each other trough sockets in the server. I'm displaying these entities using Pixi.js and I have a problem with consecutive animations, for example the drone class has 4 functions (moveRight, moveUp, moveDown, moveLeft) that allows him to move on a grid (tiled sprites and 2D array), all 4 of these functions contain an animation and are called in a function called followPath(), that takes a list of nodes and depending on the coordinates of those nodes plays the appropriate animation! But the code runs way faster than the single animations and followPath ends up playing only the last 'animation', how should I approach a situation where i have multiple animations and I need to wait for them to end before i can do something? (sending updates to the server, update coordinates and so on).