Jambutters

Members
  • Content Count

    52
  • Joined

  • Last visited

About Jambutters

  • Rank
    Advanced Member

Recent Profile Visitors

1417 profile views
  1. Made a feature request : https://github.com/photonstorm/phaser/issues/4090 // //create shared animations createAnimations([player, monster, npc], "right", [0,1,2,3]) createAnimations([player, monster, npc], "up", [0,1,2,3]) createAnimations([player, monster, npc], "down", [0,1,2,3]) createAnimations([player, monster, npc], "left", [0,1,2,3]) function createAnimations(texture, animationName, frames) { for (var i = 0; i < texture.length; i++) { this.anims.create({ key: texture[i] + animationName, frameRate: 5, frames: this.anims.generateFrameNumbers(texture, { frames: frames }) }); } } //sprites have a .textureKey property and when they play animation, sprite.anims.play(this.textureKey+animationName); But yeah, duplicating objects, I wonder how it's going to impact performance.
  2. The example folder isn't bundled to be ran.
  3. Think melonjs has a feature like that. Provide a test case!
  4. So I have a lot of spritesheets (32x32) that have the exact same frame of sprite, and I want to remove the duplicates. Does imagemagick have a function to scan images pixel by pixel and delete any duplicates? That or is there a program that can detect duplicate frames? Going to need to apply this for 100s of spritesheets.
  5. How many of you guys use delta in your game loops ? I've adapted my game loop to this: https://isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing but the game I'm working on has no sense of gravity, and is a tile/grid based movement game, tl;dr everything can only move 32px. What are the pros and cons of using delta? Do you use delta?
  6. Currently using Tiled and my maps have multiple layers : Something like: //Floor: let floor = [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,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,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,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] //Trees: just pretend it's filled with different values let trees = [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,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,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,0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] So how I'm going about it is to generate a PIXI.Sprite for every tile and then pushing those into a container, and that container would be the layer: //an array of PIXI.Textures sliced from the spritesheet for tiles let tileSpriteResources = [texture, texture, texture]; let floorLayer = new PIXI.Container(); let trees = new PIXI.Container(); //something like this: function makeLayerSprites(containerLayer,array, width, height){ let W = width; let D = height; let shiftY = 0; array.map(function(item, index){ if(index >= W){ //shifts Y downwards when X is passed with width shiftY++; } if(item === 0){ let tile = new PIXI.Sprite(tileSpriteResources[0]); tile.setTransform(index * 32, shiftY * 32); containerLayer.addChild(tile); } }); } I'm going to have like.. 6+ layers and I was wondering if I should just generate 1 layer, and then have the rest of them be the children of every PIXI.Sprite on the first layer. Or is my approach just fine ? For culling I'd imagine I would have to loop through all 6 containers children and yeah, I'm not sure how this will strike me in performance. Any general advice or recommendations or how you've implemented multi-layered maps in PIXI ?
  7. let app = new PIXI.Application({ autoStart: true, width: 640, height: 480 }); PIXI.loader.resoures.add("./spritesheet.json"); /* creates a Texture using the ENTIRE spirtesheet image instead of reading from json and cropping it to texture atlas */ let testTexture = new PIXI.Texture(PIXI.loader["./spritesheet.json"].textures["player2.png"]); //work around : new PIXI.Texture(PIXI.loader["./spritesheet.json"].textures["player2.png"],PIXI.loader["./spritesheet.json"].textures["player2.png"].orig); or by using .frame /* What's the point of passing ["player2.png"], specifying the texture atlas location if it's just going to use the entire image when creating calling new PIXI.Texture . */ let testSprite = new PIXI.Sprite(testTexture); /* this corrects the sprite with the correct frames though referencing the texture in the loader*/ let testTexture2 = PIXI.loader["./spritesheet.json"].textures["player2.png"].texture; let testSprite2 = new PIXI.Sprite(testTexture2); //correct crop refferencing texture atlas frame. I know how to work around this but shouldn't "new PIXI.Texture" reach into the json file and grab the correct location of the image rather than use the entire image of the spritesheet?
  8. Found the problem... Unsure if this is a bug. I am grabbing the correct texture which is 200px down but it's not using the grabbed texture starting location @ Y: 200px down , as it's starting point for x: 0, y: 0, rather it's always starting from the entire sprite sheet... Can fix from reading the json file though. Is there another way to deal with this ? Resolvedish ..
  9. Bad effects in the texture constructor? I am debugging with console.logs everywhere and can't seem to find the problem but I'll try w/ debugger and see if I can catch anything. Really strange problem...I am passing the correct string though... Does the first object in the atlas get referenced first if there is an error or if the fail to specify what image you want in the atlas? . Is there a way to check what image I'm representing when creating a texture using ``` new PIXI.Texture(PIXI.loader.resources['atlas.json'].textures["theimage.png"]) ``` ? Like, yeah, is there a way to check "theimage.png" value referenced on the texture object? Narrowed down the problem a bit more. It works and references correct sprite fine when creating a PIXI.Sprite , but when doing a PIXI.extras.AnimatedSprite, it always gets it wrong it seems?
  10. Also how would you check if a texture exists in the atlas or not? Trying this: if (loaderSource[atlasJson].textures[srcImg]) { //logic } and it gives me Uncaught TypeError: Cannot read property 'textures' of undefined. edit: nevermind , fixed this type error
  11. does the "let" scope to the block ? Changed it and no luck :s.
  12. I'm pretty new to JS so I apologize for the messy code. Also don't hold back on telling me what I should and shouldn't do design wise! The problem is that way at the bottom where the for loop is, it is not referencing the textures I want as declared in the variables head and body early on. But when I test it out in about line 16 or so, it does reference the correct texture.Thanks for reading class Player { constructor(dataObj) { // this.uid = dataObj.username; this.sprite = dataObj.sprite || "default"; this.x = dataObj.x || 0; this.y = dataObj.y || 0; this.width = 32; this.height = 32; this.PIXISPRITE; this.testSprite; if (dataObj.sprite.custom === false) { let spriteTextures = []; let head = loaderSource["/client/img/custom_head.json"].textures[this.sprite.layer1 + ".png"]; let body = loaderSource["/client/img/custom_body.json"].textures[this.sprite.layer2 + ".png"]; spriteTextures.push(head, body); console.log(head); this.testSprite = new PIXI.Sprite(head); /*when I test this, it grabs the texture from atlas just fine. */ let createArrComponents = (paraSpriteText) => { let arrayTextures = []; let counterX = 0; let counterY = 0; for (let i = 0; i < paraSpriteText.length; i++) { let tmpArray = []; let indexspriteTextures = i; const ROWS = paraSpriteText[i].width / this.width; const COLUMS = paraSpriteText[i].height / this.height; for (let i = 0; i < ROWS * COLUMS; i++) { let rectFrameObj = new PIXI.Rectangle(counterX, counterY, this.width, this.height); counterX += this.width; let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures]); framedTexture.frame = rectFrameObj; tmpArray.push(framedTexture); if (counterX >= this.width * ROWS) { counterX = 0; counterY += this.height; } } arrayTextures.push(tmpArray); } return arrayTextures; }; let spriteComponentsArr = createArrComponents(spriteTextures); console.log(spriteComponentsArr); for (let i = 0; i < spriteComponentsArr.length; i++) { let headSprite = new PIXI.extras.AnimatedSprite(spriteComponentsArr[0]); /*THESE TWO ARE NOT REFFERENCING THE TEXTURE I WANT AS DECLARED IN THE VARIABLES head & body */ this.PIXISPRITE = headSprite; headSprite.addChild(new PIXI.extras.AnimatedSprite(spriteComponentsArr[1])); //ADDSSTHEBODY } } Player.list[this.uid] = this; } createSelfSprite() { } } let test = new Player({username: "testy", sprite: {layer1: "head_no1", layer2: "body_no6"} });
  13. OOHHH. I see. Using typescript and if the first parameter for the Texture class is not a base texture, I get a warning so I never bothered to try it.