Schoening

Members
  • Content Count

    21
  • Joined

  • Last visited

  1. I would like to change my code from this: var burger = new PIXI.Sprite( textures["burger"].texture );To this: var burger = new PIXI.Sprite( textures["burger"] );I thought that the easiest way of doing this would be to store the textures seperately from the parent object. var texturesOnly = {};var name = textures["burger"].name;var texture = textures["burger"].texture;texturesOnly[name] = texture;The most convienient place for this pseudo-code would be the loader.on("progress", cb); so that I can use the current loaded object and put it inside my custom texture object: loader.on("progress", onTextureLoadProgress);function onTextureLoadProgress () { var name = arguments[1]; var texture = arguments[1].texture; var texturesOnly[name] = texture;};But that code does not work! The texture is undefined. Also, what is the point of .on("complete" and .once("complete" if .load gets passed the resource object aswell ? I have read the manual pages and I am still none the wiser...
  2. I am new to v3 and running into a couple of issues... Firstly. I am making a game with my Girlfriend to teach her some JavaScript. She is afraid of using commands or installing a webserver on her mac, so I am trying to make crossOrigin work to load textures. I am using an array of objects that store the name and url, I then add the crossOrigin msg "behind the scenes": var textures = [ { name: "burger", url: "images/Hamburger.png" }, { name: "moon", url: "images/Lunaone_1.png" }];var l = textures.length;for ( var i = 0; i < l; i += 1 ) { textures[i].crossOrigin = "Anonymous"; loader.add( textures[i] );}However when I try to use the textures: var burger = new PIXI.Sprite( textures["burger"].texture );I get the following error: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/Oliver/Documents/pirate-game/images/Hamburger.png may not be loaded.Is there something I can do here without having to install a webserver?
  3. Do I have to individually change the textures of every sprite or can I change it one time and it will change for them all? The latter option would seem like it could be a lot better for performance if I have a large amount of sprites to animate.
  4. I am using https://github.com/sole/tween.js/ for tweening. I am making a snake game. For every piece I am creating a tween: function Tween ( array_index ) { var i = array_index; // targets[ i ] this.tween = new TWEEN.Tween( values[ i ] ) .to( targets[ i ] , 500) .onUpdate(function(){ snake[ i ].position.x = this.x; snake[ i ].position.y = this.y; snake[ i ].rotation.z = this.rotation; }) .onComplete(function(){ checkTweenCompletion(); })};But that could look like it is insane when thinking about mobile performance... Can you think of alternatives? Because I can't... Every piece of my snake has to move to the previous piece position. I don't think I can do that in a single tween.
  5. I used canvas for a performance test on a few older devices and got abysmal performance. So instead of wasting a lot of time on canvas optimization I thought I give Pixi.js a try. In my game you kill a lot of enemies. And I am going to re-use the dead sprites to avoid the Garbage Collector. However the enemies are supposed to leave corpses. It is a very essential part of the gameplay! I was thinking of using multiple canvases and simply rendering the dead sprites once onto the background canvas. Now I need good ideas how to do this with Pixi.js I would also like a parallax background. Basically 3 layers: Parallax background layer.Middle layer that stores the "corpses". These corpses are immovable. And it would be great if you can tell me they can be rendered into one file to drastically reduce draw calls.Front Layer. Player and Enemies jumping around Could I get some guidance, sensei? Edit: Of course I would like to have my game as widely available as possible. How far does Pixi.js go back? Any statistics?
  6. Schoening

    For loop.

    In this magical age, if you get REALLY worried about loops that could potentially block your game. Use a Webworker! http://www.html5rocks.com/en/tutorials/workers/basics/
  7. I see. Hm.. Is there any example that uses the Container? For now I have "improved" the script, making it a lot shorter this way: for(var x = 0; x < map.length; x++){ for(var y = 0; y < map[x].length; y++){ if(map[x][y] === S){ map[x][y] = new PIXI.Sprite(sandTile); // center the sprites anchor point map[x][y].anchor.x = 0.5; map[x][y].anchor.y = 0.5; // move the sprite t the center of the screen map[x][y].position.y = x * map_tile_size + map_offset; map[x][y].position.x = y * map_tile_size + map_offset; stage.addChild(map[x][y]); map[x][y].setInteractive(true); map[x][y].mousedown = function(mouseData){ console.log("Hi"); } } } } But I would like to learn how to do the Container Solution now
  8. Not sure what you mean!
  9. Yeah Thx But that sort of defeats the point of the whole Pixi.js feature doesnt it :s
  10. Look what I am doing! Arrrg! This is so WRONG ! xD
  11. Schoening

    Wrong Tiling?

    Guys.. I am tiling a map, but it is flipped wrongly! I am pretty sure that this would tile correctly in a plain Canvas. The "T" is to error check, and should not display tiles on the Left side.. Instead they don't display on top: So the whole thing is flipped, or some evil magic, any clues? var map = [ [s,S,S,S,S,S,S,S,S,S,], [s,S,S,S,S,S,S,S,S,S,], [s,S,S,S,S,S,S,S,S,S,], ["T",S,S,S,S,S,S,S,S,S,], [s,S,S,S,S,S,S,S,S,S,], [s,S,S,S,S,S,S,S,S,S,], [s,S,S,S,S,S,S,S,S,S,], ["T",S,S,S,S,S,S,S,S,S,], [s,S,S,S,S,S,S,S,S,S,], [s,S,S,S,S,S,S,S,S,S,] ]; var map_tile_size = 32; var map_offset = 48; var sandTile = PIXI.Texture.fromImage("sand.png"); // Spawn Tiles based on the Map Array: for(var x = 0; x < map.length; x++){ for(var y = 0; y < map[x].length; y++){ if(map[x][y] === S){ map[x][y] = new PIXI.Sprite(sandTile); // center the sprites anchor point map[x][y].anchor.x = 0.5; map[x][y].anchor.y = 0.5; // move the sprite t the center of the screen map[x][y].position.x = x * map_tile_size + map_offset; map[x][y].position.y = y * map_tile_size + map_offset; stage.addChild(map[x][y]); map[x][y].setInteractive(true); } } }
  12. Hm.. but what is the point of "drop all tiles in ..." if I compute from the cordinates ?
  13. This is my current Idea: (EDIT: Since the clicks are based on callbacks this does not work as I hoped) function click_loop(){ for(var x = 0, len = map.length; x < len; x++){ for(var y = 0; y < map[x].length; y++){ map[x][y].mousedown = function(mouseData){ console.log("MOUSE DOWN!"); } } } setTimeout(function(){ click_loop() },10);}click_loop();
  14. But I think that would create a lot of irritating Garbage Collection