• Content Count

  • Joined

  • Last visited

About visgotti

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. lol crap... seems like my second implementation was all for naught thanks though going to try this now. edit: yep so sure enough my original function would have worked with just adding the false flag to renderer.render Thanks @ivan.popelyshev It seems to be working awesome now, I can start focusing on optimizing my packing algorithm.
  2. <deleted because it was so wrong>
  3. Here's a visual of what I'm trying to accomplish- as I add rects it gets added to the texture without changing the positions of anything else. This is meant to be ran during the game loop so the algorithm for finding an open spot is super fast but super shitty, I plan on making it better but I just wanted to create a proof of concept first. As you can see rects get added without changing the rest of the "texture" but I'm trying to figure out how to do this as a pixi texture without having to re render the whole "texture" each time I add a rect/sprite I think I'm making the wrong assumption on how a RenderTexture works.. Would it only work if I kept a PIXI.Container with all the elements and then I would have to re-render that PIXI.Container to a RenderTexture each time I add a new image? This would probably be too slow to dynamically add new images when it starts reaching the max texture size and then my shitty packing algorithm becomes even shittier since I have to redraw the texture each time anyway.. and then I'd have to recreate all the textures that use the RenderTexture as the base texture everytime it updates? Yea I feel like I'm going down a rabbit hole of bad design decisions. Is there any efficient way to just add another image to a texture when the majority of the texture is exactly the same besides one small rect area so I can keep all the past textures I've created as well as not re render a whole new RenderTexture I have a feeling I'm just fundamentally wrong with my assumptions on how my library could have worked.
  4. I'm trying to have a RenderTexture grow as I dynamically load images What I do is load the image as a texture, create a sprite, then I want to render that sprite to the render texture. But every time I render a new sprite to the render texture it seems to delete everything else on the render texture. public addSprite (id, sprite: PIXI.Sprite, deleteSprite=false) : PIXI.Texture { if(this.mappedTextures.has(id)) { if(deleteSprite) { sprite.destroy({children: true, texture: true, baseTexture: true}); } return this.mappedTextures.get(id); } const { atlasIndex, rect } = this.addRect(id, sprite.width, sprite.height); if(!(atlasIndex in this.atlasRenderTextures)) { this.atlasRenderTextures[atlasIndex] = PIXI.RenderTexture.create(this.maxAtlasWidth, this.maxAtlasHeight); } const renderTexture = this.atlasRenderTextures[atlasIndex]; // assign sprite position to the open rect sprite.position.x = rect.x; sprite.position.y = rect.y; // render sprite to render texture this.renderer.render(sprite, renderTexture); // make a reference to the new texture using render texture as base. const texture = new PIXI.Texture( renderTexture.baseTexture, new PIXI.Rectangle(rect.x, rect.y, rect.width, rect.height), ); this.mappedTextures.set(id, texture); if(deleteSprite) { sprite.destroy({children: true, texture: true, baseTexture: true}); } return texture; } I'm trying to write a lib that allows a growing packed texture atlas and right now I'm implementing a class that uses the algorithm to map the atlas to a RenderTexture with sprites, the packing algorithm isn't good but i plan on optimizing it. But the big thing I wanted to make sure is that everytime a new image is packed the items in the atlas don't get repositioned so it would be quick to update a RenderTexture since all we need to draw is the new image added instead of the whole packed sheet. Is there something fundamentally wrong with my approach?
  5. I was using for v4 but it doesn't seem to work correctly for v5.. Does anyone know software that can convert my fonts into a usable .xml? Or can someone provide me with a valid .xml font file format?
  6. Thanks for the quick responses Sent pm with info for that slack invite
  7. Awesome, thank you. I don't have experience with shaders but I was going to look into using color replacement anyway for changing color palettes for some of my character clothing, thanks for the info.
  8. Hi, right now I'm using tinting to change the color of my bitmap text, but I want to be able to change the stroke too.. as of now the stroke is black and the inside is white, so changing the tint works perfectly but what if I want to change the stroke? Is it worth having a separate sprite from the same texture overlap eachother, one with a white stroke and transparent fill color and one with no stroke and white fill color, then tinting each one appropriately.. The alternative is to use color replace filter and chang the black and white that way, but I know filters can be extremely expensive while tinting is free. But I'm wondering if color replace under the hood works similarly to tinting and I can get away with it? Thanks
  9. fs.readFile('bunny.png', function(err, bunny) { img = new Image; img.src = bunny; var timeNow =; for(var i = 0; i < 500; i++) { ctx.drawImage(img, 50, 50, 50, 50); } var timeAfter =; console.log('time:', timeAfter-timeNow) }) time: 807 Yep you're right. 800 ms for this.. Looks like I'll have to write something that spawns enough processes so I can render scenes for my targeted framerate.. No idea what other direction I can go in.
  10. I wouldn't say it's really too heavy each bunny adds ~10 ms to the render. for (var i = 0; i < 25; i++) { var bunny = new PIXI.Sprite(texture); bunny.anchor.set(0.5); bunny.x = (i % 5) * 40; bunny.y = Math.floor(i / 5) * 40; mainStage.addChild(bunny); }
  11. Can't tell if this is sarcasm or actual advice..
  12. Hey obviously I know PIXI.js is meant for html5.. but I'm trying to have a server that records my game and converts it to a video. So to do this I need to render images of the current canvas at at least 20 fps In the web browser this would be obviously simple. The following code- var timeNow =; renderer.render(mainStage); var timeAfter =; console.log(timeAfter - timeNow) In web browsers returns 1 ms In node it returns anywhere from 180-300 I'm shimming PIXIjs with jsdom and node-canvas.. I don't understand the underlying technologies enough to understand why there's such a big difference.
  13. I’m working on an RPG type game and plan on having eventually thousands of skins for bodies, heads, weapons, etc. If there’s 20 people on the screen at the same time it can be up to 100 different textures being rendered at once. That’s just from the player model. would dynamically combining textures based on who is in your screen be a good solution to this problem? That seems too intensive to do on the fly though especially if new people are constantly moving in and out of your view.
  14. That library does not support TiledMaps. I don't actually think that's the problem actually. I think my computer is just lacking a GPU so my FPS sucks. I'm still getting pretty shitty FPS with canvas as well though so I'm not sure.
  15. Here's my current logic split up the tileset image into an array of 64 x 64 textures (the index correlates to the tile id) split up the map into sections max size of each section is 640 x 640 and create a container for that section. create a sprite for each tile in that section, and add it to the section's container check if the section container is visible to the player based on the current screen size, if it is then set that section's container visible to true, otherwise set it to false. I'm getting terrible performance doing it this way, if I make the screen small my fps is fine, but once I maximize the screen or make it a little larger the fps drops significantly. Does anyone see the flaw in my system as to why I'd be getting terrible performance doing it this way?