Jump to content

Need Help :-)


Recommended Posts

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 :-)

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.

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.


  • Recently Browsing   0 members

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