Need Help :-)

[ipop]

Hi all

 

ill contain all my questions in here so as not to clutter up the forum, im trying to write a simplish platform game ... to learn both javascript and pixi.

 

So if you have the time and patience to help me make the code any better or poitn out what im doing wrong, i would greatly appreciate it. It takes me ages to get what i want working but largely through trial and error.

 

So here's my first attempt at generating tiles from an array (pasted from tiled export) and a set of textures in a folder:

var myContainer = new PIXI.DisplayObjectContainer();var map_tile_size = 64;var WIDTH = 1024;var HEIGHT = 768;var width_in_tiles = WIDTH/map_tile_size;var height_in_tiles = HEIGHT/map_tile_size;var row = 0;var column = 0;var map =  [ 1,17,2,3,4,0,0,0,0,0,0,0,0,0,0,0,0,18,0,0,0,0,0,0,0,0,1,2,1,2,0,0,0,26,4,2,6,7,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,3,4,6,7,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,7,2,3,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,7,8,0,0,0,0,0,0,0,0,0,8,7,0,0,0,0,0,0,0,0,0,0,0,0,6,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,21,22,23,24,21,22,23,24,21,22,23,24,21,22,23,24]; console.log("map data loaded", map)function drawmap(){  for (tile_count = 0; tile_count < map.length; tile_count++, row++){map_tile_value = map[tile_count];if (row >=16){row=0;column ++;}if(map_tile_value >0){var new_tile = PIXI.Texture.fromImage("art/tiles/current/tiles_jungle_"+ (map_tile_value) + ".png");t = tile_count;var t = new PIXI.Sprite(new_tile, 64,64);t.position.x = row *map_tile_size;      t.position.y = column *64;      myContainer.addChild(t);           }     stage.addChild(myContainer);console.log(myContainer)}}

SO here's what i think im doing:

 

loading the map data

iterating through it

if theres a number greater than zero in map data, create a pixi sprite referencing that png and add it to the container at the appropriate position

 

So it Works ... :-)

 

What can i do differently to improve it?

Is it fast/slow?

Am i reloading textures when var new_tile is the same value or is pixi referencing the same sprite behind the scenes..

 

how do i access the tiles in the container to update them when they scroll  ( i will need to have an offset for the x (based on player movement) and then some logic to repeat a column if it is the end of the map and goes off scrreen ..) So im fine i think with the logic, but my main problem at the moment is how to access the x propoertiies of everything int he container....

 

 

Any help appreciated as ill be cracking on regardless but it would be awesome to get some feedback and guidance from people who understand pixi and javascript  a whole lot better than me!

 

How do i find the info im looking for such as what sin a container, its x and y position and inevitably some custom values....

 

 

EDIT: https://chrome.google.com/webstore/detail/webgl-inspector/ogkcjmbhnfmlnielkjhedpcjomeaghda/related  

 

im not duplicating textures at least :-)

 

Any time or effort, greatly appreciated, ill write up some noob tutorials in return :-)