Sign in to follow this  
Powerzaba

Pixi.js container not fully displaying

Recommended Posts

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.

 

Screenshot 2018-11-30 at 12.44.47.png

Screenshot 2018-11-30 at 12.44.07.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.