Jump to content

Pixi.js container not fully displaying


Powerzaba
 Share

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...