johhnyblagger

Members
  • Content Count

    17
  • Joined

  • Last visited

  1. ah ok, thank you for the information!
  2. thank you! so at this tutorial, the author does some fancy things loading images into a texture cache. Why does the code I posted in the first post not have to do that?
  3. var mySpriteSheetImage = PIXI.BaseTexture.fromImage("img/mySpriteSheet.png"); var spriteTexture1 = new PIXI.Texture(mySpriteSheetImage, new PIXI.Rectangle(x:0, y:0, width:32, height:32)); var spriteTexture2 = new PIXI.Texture(mySpriteSheetImage, new PIXI.Rectangle(x:32, y:0, width:32, height:32)); var spriteTexture3 = new PIXI.Texture(mySpriteSheetImage, new PIXI.Rectangle(x:64, y:0, width:32, height:32)); var mySprite = new PIXI.Sprite(spriteTexture1); stage.addChild(mySprite); The code above loads many sprites from a sprite sheet. This code was found here. Is there a better way to get the same functionality?
  4. Hi all, I have a sprite sheet, I want to make many sprites from this sprite sheet. Here is my implementation: var ASSET_PATHS: string[] = [ "assets/roguelikeSheet_transparent.png", "assets/roguelikeChar_transparent.png" ] PIXI.loader.add(ASSET_PATHS).load(hasLoaded); var texture1 = PIXI.utils.TextureCache["assets/roguelikeSheet_transparent.png"]; var rect1 = new PIXI.Rectangle(0*17,0*17,16,16); texture1.frame = rect1; var sprite1 = new PIXI.Sprite(texture); var texture2 = PIXI.utils.TextureCache["assets/roguelikeSheet_transparent.png"]; var rect2 = new PIXI.Rectangle(3*17,5*17,16,16); texture2.frame = rect2; var sprite2 = new PIXI.Sprite(texture); The code above is me trying to load two different sections of the same sprite sheet and make sprites from those sections. What happens is that: texture2.frame = rect2; overwrites sprite1's texture, thus both sprites become rect2's section.
  5. Many link to this: https://www.codeandweb.com/physicseditor on posts relating to obtaining p2 physics collision json. Is there any other software that can obtain the json that is free?
  6. http://phaser.io/examples/v2/sprites/overlap-without-physics this is what I was looking for
  7. Hi all! I would like for two p2 bodies to know they have touched each other, but I don't want them to push each other (rather move right through each other). How can this be achieved?
  8. so I got it working var renderer = PIXI.autoDetectRenderer(400, 300);document.body.appendChild(renderer.view);var GRASS_TOP;var stage;var loader = PIXI.loader .add('GRASS_TOP','assets/box.png') .once('complete', function(loader, resources) { initTextures(); animate(); }) .load();function initTextures(){ GRASS_TOP = PIXI.loader.resources.GRASS_TOP.texture; doRest();}function doRest(){ var sprite = new PIXI.Sprite(GRASS_TOP); stage = new PIXI.Container(); stage.addChild(sprite); animate();}function animate() { requestAnimationFrame(animate); renderer.render(stage);}
  9. Hey mattstyles, thank you for your reply. What you wrote makes perfect sense and I completely agree with your logic. I did exactly as you said (called animate() once load() is finished) and I still receive the "Uncaught TypeError: Cannot read property '_uvs' of undefined" error. Either 1. any other suggestions from anyone to fix this? 2. any other suggestions as to how to load textures at runtime? Here is what I changed: var GRASS_TOP;var GRASS_TOP_LEFT;var GRASS_TOP_RIGHT;var loader = PIXI.loader .add('GRASS_TOP','assets/grass_top.png') .add('GRASS_TOP_LEFT','assets/grass_top_left.png') .add('GRASS_TOP_RIGHT','assets/grass_top_right.png') .once('complete', function(loader, resources) { init(); }) .load();function init(){ GRASS_TOP = PIXI.loader.resources.GRASS_TOP.texture; GRASS_TOP_LEFT = PIXI.loader.resources.GRASS_TOP_LEFT.texture; GRASS_TOP_RIGHT = PIXI.loader.resources.GRASS_TOP_RIGHT.texture;}animate();var renderer = PIXI.autoDetectRenderer(REAL_WIDTH, REAL_HEIGHT);document.body.appendChild(renderer.view);var stage = new PIXI.Container();var worldContainer = new PIXI.Container();var GUIContainer = new PIXI.Container();stage.addChild(worldContainer);stage.addChild(GUIContainer);function animate() { requestAnimationFrame(animate); renderer.render(stage); //this is line 24, the function call that results in the Uncaught TypeError}
  10. Following ivan.popelyshev's advice: var GRASS_TOP;var GRASS_TOP_LEFT;var GRASS_TOP_RIGHT;var loader = PIXI.loader .add('GRASS_TOP','assets/grass_top.png') .add('GRASS_TOP_LEFT','assets/grass_top_left.png') .add('GRASS_TOP_RIGHT','assets/grass_top_right.png') .once('complete', function(loader, resources) { init(); }) .load();function init(){ GRASS_TOP = PIXI.loader.resources.GRASS_TOP.texture; GRASS_TOP_LEFT = PIXI.loader.resources.GRASS_TOP_LEFT.texture; GRASS_TOP_RIGHT = PIXI.loader.resources.GRASS_TOP_RIGHT.texture;}Here is the error I receive now: Here is Creator.js: var renderer = PIXI.autoDetectRenderer(REAL_WIDTH, REAL_HEIGHT);document.body.appendChild(renderer.view);renderer.view.style.position = 'absolute';renderer.view.style.left = '50%';renderer.view.style.top = '50%';renderer.view.style.transform = 'translate3d( -50%, -50%, 0 )';var stage = new PIXI.Container();var worldContainer = new PIXI.Container();var GUIContainer = new PIXI.Container();stage.addChild(worldContainer);stage.addChild(GUIContainer);animate();function animate() { requestAnimationFrame(animate); renderer.render(stage); //this is line 24, the function call that results in the Uncaught TypeError}
  11. Here is me trying ivan.popelyshev's option 1: html: <html><head></head><body> <script src="pixi.js"></script> <script src="Creator.js"></script> <div> <h1>Hello, I want to be above the game stage!</h1> </div> <div id="canvas"> </div> <div> <h1>Hey, I want to be below the game stage!</h1> </div></body></html>Creator.js //creator.jsvar canvas = document.getElementById('canvas');var renderer = PIXI.autoDetectRenderer(400, 300,canvas);document.body.appendChild(renderer.view);//renderer.view.style.position = 'absolute';//renderer.view.style.left = '50%';//renderer.view.style.top = '50%';renderer.view.style.transform = 'translate3d( -50%, -50%, 0 )';renderer.view.style.margin = 'auto';which gives me the following: which is not what I'm looking for I'm assuming I'm not correctly setting margin: auto;
  12. Hi all, I want to load many textures at runtime. I would not like to apply these to sprites at runtime as the texture of a sprite in my game changes based on user input. Based on this post, I did the following: var loader = PIXI.loader .add('GRASS_TOP','assets/grass_top.png') .add('GRASS_TOP_LEFT','assets/grass_top_left.png') .add('GRASS_TOP_RIGHT','assets/grass_top.png') .once('complete', function(loader, resources) { init(); }) .load();I then made each texture a variable var GRASS_TOP = PIXI.loader.resources.GRASS_TOP.texture;var GRASS_TOP_LEFT = PIXI.loader.resources.GRASS_TOP_LEFT.texture;var GRASS_TOP_RIGHT = PIXI.loader.resources.GRASS_TOP_RIGHT.texture;At runtime sprites are declared thing.sprite = new PIXI.Sprite(PIXI.Texture.EMPTY);and later based on user input sprite textures are given thing.sprite.texture = GRASS_TOP_RIGHT;This is not working. Firefox give me the following error: TypeError: texture is undefined. It also seems that my game puts my browser under a heavy load. Also, before I loaded textures like how I did above, I did the following: var GRASS_TOP_RIGHT = PIXI.Texture.fromImage('assets/grass_top_right.png');Is this any more or less efficient?