NibblyPig

Members
  • Content Count

    10
  • Joined

  • Last visited

  1. NibblyPig

    Combining sprites into a single sprite

    Sprites are loading correctly, if I simply add sprite1 instead of combinedSprite then it works. I've tried adding that renderer.render line, but still nothing. I've switched back to 4.7.3 do I need to switch back to 5 to try the other example? Edit: AHA. Replaced the auto detect renderer line with this: let renderer = _app.renderer; That seems to have done the job. Not *really* sure in detail what the renderer is and how it works to render a container, would be interesting to understand it. It didn't make sense why auto detect renderer took dimensions as a parameter. I don't need to call renderer.render on my stage, I just add things to it. But apparently it's needed for a container. I am not sure what that operation is actually doing. Edit 2: Hmm, seems the _app.renderer.render(container); was actually rendering the container to the screen, not sure why that was suggested, I've removed it since I don't want to render the container. Also not really sure what that does, why would you directly render a container and how does it store it? Normally you just add a sprite to the stage, but renderer.render seems to bypass that I guess as you don't need to use the stage? I have absolutely no idea what's going on
  2. NibblyPig

    Combining sprites into a single sprite

    Thanks, I have tried that and this is my code but nothing appears on the canvas: let renderer = PIXI.autoDetectRenderer(64, 64); var container = new PIXI.Container(); let sprite1 = new PIXI.Sprite(PIXI.utils.TextureCache["MySprite.png"]); let sprite2 = new PIXI.Sprite(PIXI.utils.TextureCache["MySprite.png"]); sprite1.x = 0; sprite1.y = 0; sprite2.x = 32; sprite2.y = 0; container.addChild(sprite1); container.addChild(sprite2); var tex = renderer.generateTexture(container); // container with all your sprites as children var combinedSprite = new PIXI.Sprite(tex); _app.stage.addChild(combinedSprite); My biggest WTF is that I have no idea how I'm supposed to learn PIXI js, I am just banging my head against a wall trying random snippets I find on google. I read through the tutorial but I can't understand how to learn anything that isn't in it. It's an exercise in frustration to spend hours trying to do every single tiny step. Any ideas? Maybe I should ditch it and use another framework?
  3. NibblyPig

    Combining sprites into a single sprite

    Hmm that is quite hard to understand and it doesn't really answer any questions about what I'm confused about or doing wrong. It looks like it adds a container to the stage, and puts 25 bunnies in it. Then it creates a base render texture, not sure what that is. Then it creates a render texture, not sure what that is either from the base. Then it makes a sprite from it. But I can't see how the new sprite isn't just blank, it doesn't have any references to container. Unless it's simply rendering the entire stage to a container which wouldn't be much use?
  4. NibblyPig

    Combining sprites into a single sprite

    Thanks is there some example of the code I should be using? I changed it to PIXI.Renderer() and now I get Uncaught TypeError: this.addSystem is not a function at Object.e [as Renderer] (pixi.min.js:8) I switched to pixi 4 and it runs but nothing renders now. I must be doing something wrong. I can't find any tutorials or examples anywhere of how to do this.
  5. I have some sprites and rather than draw them all individually, I wanted to combine some of them together to make a new texture, and create sprites using that. I figure it will save processing time. I searched on google but it was very hard to find out how to do this, eventually I found some code and tried to implement it like this: let renderer = PIXI.autoDetectRenderer(32, 32); let renderTexture = new PIXI.RenderTexture.create(32, 32); renderer.render(sprite1, renderTexture); renderer.render(sprite2, renderTexture); var combinedSprite = new PIXI.Sprite(renderTexture); app.stage.addChild(combinedSprite); However it seems PIXI autoDetectRenderer is undefined. If I open up my debugging console: >PIXI {VERSION: "5.0.0-alpha.3", accessibility: {…}, extract: {…}, filters: {…}, interaction: {…}, …} >PIXI.autoDetectRenderer undefined I am not sure what to do.
  6. Hmm thanks for your answer xerver but I think it makes the code very hard to read. The game map shouldn't be set up as part of LoadTextures() method, it violates the single responsibility principle. I guess there is not much choice though.
  7. I understand how async await works but I don't see any way to implement it pixi, nothing comes up on google apart from people asking if it will ever support promises, to which the answer is apparently, no.
  8. If your game is in a JS file, and you do var myGame = new CoolGame(); myGame.Init(); myGame.Start(); for example, then CoolGame does loader.add(...); a bunch of times, it's my understanding that it's asynchronous, hence the need to do .load to add a complete event. In the code above though, I would not want my code to continue onto the next line and start the game before it had loaded. So how can I make the loader block until it's done? It also makes for messy code: function Init() { LoadTextures(); PrepareSprites(); // Might error if textures not finished loading SetupGameMap(); } would have to be function Init() { LoadTextures(); } function TexturesLoaded() { // Invoked with .load(fn) on the loader PrepareSprites(); SetupGameMap(); // Doesn't really belong in this method } Perhaps I can do something like while (!loader.Isfinished) { } I'm not massively au fait with javascript so perhaps you are supposed to chain things by nesting them, but it seems wrong to me.
  9. NibblyPig

    Struggling with the basics

    Thank you that tutorial looks exactly like what I was missing. I'll take your advice about the tilemap too when I get to it! Thanks!
  10. NibblyPig

    Struggling with the basics

    So I started with phaser 3, but a lack of examples on the site made me switch to phaser 2. Phaser 2 I was struggling to get anything to work properly, so I have switched to pixi js instead as I don't want a physics engine or anything crazy. All I want to do is render graphics to the screen. I will take care of everything else myself. So I looked at the examples and I have what I would call a spritesheet, it has lots of different tiles on. All I wanted to do was load it so I could draw whatever tile I wanted at whatever co-ordinates. The example on the pixi js is for animation. I don't want to do any animation (yet). Also every tile is 16x16 so I didn't really want to create a giant json file with thousands of lines. I tried to use some free tools to create the JSON file anyway because I couldn't figure out how else to do it, but none of them seemed to do what I wanted. TexturePacker didn't seem to, neither did Shoebox, although their documentation was lacking and the UI was incredibly unintuitive. In Phaser 2 I found I could do this: `this.load.spritesheet('walls', '/assets/TileSpritesheet.png', 16, 16);` I feel like I am failing at even the most basic of operations so I wonder if I am missing something obvious, perhaps a really good tutorial video or something. I've programmed before in XNA and monogame and made a few 2d games, the only functionality I require is to be able to render sprites to the screen. Can anyone suggest what I should do? I have a lot of tiles so splitting it into individual pngs would be very tedious.