Zeto

Members
  • Content Count

    10
  • Joined

  • Last visited

  • Days Won

    1
  1. @ivan.popelyshev thank you for your quick reply! I just want to make sure I get this right, suppose I have a 20x10 tiles screen, what you suggest is to draw let's say 30x20 around the camera, and when the camera goes out of the 30x20 drawn area, I clear the CompositeTileLayer and addFrame the new 30x20 tiles around the camera. So essentially it isn't automatic.
  2. Right now i have a 30x30 tiles layer with pixi-tilemap, and I simply use tiles.pivot.set(camerax, cameray) to move around (it works well). With sprites, I know I have to manually set renderable = true/false for sprites that are in/out of the screen, to reduce the renderer's workload. However, with pixi-tilemap, I am not sure whether I should redraw the tiles depending on where the camera is. My question is: Suppose I have a 3000x3000 tiles map, and my screen only shows 20x10 at any given moment, should I render the 3000x3000 tiles before the game begins and use tiles.pivot.set(camerax, cameray), OR should I only addFrame 20x10 tiles, then clear and addFrame again if camerax/cameray changes? The structure of pixi-tilemap gives me the impression that it is all automated depending on what is seen on the screen but I could be very wrong. In Alan01252's tutorial, the clear function is nowhere used, which makes me think that one can addFrame as many times as one needs, but it seems very sketch after I read the source code a bit more...
  3. Ok I have found a solution. There is a SCALE_MODES in pixi-tilemap.js source which is set to linear, and I set it to nearest to get the desired result. I also looked at the code (a bit), and compositeTileRectLayer is simply a few TileRectLayer, and each texture should be a tilemap, instead of a single tile. @ivan.popelyshev Thank you for your quick reply! I was writing my answer before you quickly replied! I will leave my own explanation if someone else has the same problem as me in the future! Also I think there might be an error in the TileRectLayer class where textureIndex = points[i + 8], where I think it should be i + 9. RectTileLayer.prototype.renderCanvasCore = function (renderer) { if (this.textures.length === 0) return; var points = this.pointsBuf; renderer.context.fillStyle = '#000000'; for (var i = 0, n = points.length; i < n; i += pixi_tilemap.POINT_STRUCT_SIZE) { var x1 = points[i], y1 = points[i + 1]; var x2 = points[i + 2], y2 = points[i + 3]; var w = points[i + 4]; var h = points[i + 5]; var rotate = points[i + 6]; x1 += points[i + 7] * renderer.plugins.tilemap.tileAnim[0]; y1 += points[i + 8] * renderer.plugins.tilemap.tileAnim[1]; var textureIndex = points[i + 8]; if (textureIndex >= 0) { renderer.context.drawImage(this.textures[textureIndex].baseTexture.source, x1, y1, w, h, x2, y2, w, h); } else { renderer.context.globalAlpha = 0.5; renderer.context.fillRect(x2, y2, w, h); renderer.context.globalAlpha = 1; } } }; I have another question but I will ask in another thread to make it easier for people to google.
  4. Hi! I am currently trying out pixi-tilemap. All works well except that CompositeRectTileLayer is making everything blurry when I had set the SCALE.MODE to NEAREST (my sprites are not blurry, only the tile layer). I then foolishly tried RectTileLayer and it isn't antialiasing (great!), but I cannot get addFrame to actually insert the right texture. My first question is, what is the difference between CompositeRectTileLayer and RectTileLayer? And what about the rest of the classes like GraphicLayer? There is no documentation anywhere on the web on in the src folder. My second question is, how to disable antialiasing in CompositeRectTileLayer? (or alternatively, why RectTileLayer only accepts 1 texture) I am using the pixi.js v4 version of pixi-tilemap. I have included the way I am currently adding textures to both layer: var tiles = new PIXI.tilemap.CompositeRectTileLayer(0, [texture1, texture2], true); this.tiles.addFrame(0, x1, y1); this.tiles.addFrame(1, x2, y2); //this works for CompositeRectTileLayer, but doesn't work for RectTileLayer... //RectTileLayer displays texture1 on both x1,y1 x2,y2 I have attached the CompositeRectTileLayer vs RectTileLayer effect.
  5. good news I have found the perfect solution!!!!!!!!! I didn't know about this feature in HTML5 but there is a thing called "defer" and "async". Apparently all script tags with async will be run whenever they are loaded whilst the script having defer tag will be run in order AFTER all document is parsed and BEFORE document.onload. Hence the solution is: <head> <!--Code that doesn't care about order--> <script src="/lib/skills.js" async></script> <!--Code that cares about order--> <script src="/pixi/pixi.min.js" defer></script> <script src="/pixi/pixi-layers.js" defer></script> </head> @jonforum thank you for giving me a hint with the import and finding this absolute gem!!!!! To hell with the extra document onload loader
  6. @jonforum Here is what i don't understand: but at the end of the day, on the client side, we have to load pixi.js from the html and even having installed pixi.js and pixi-display from npm, they will also be needed to be loaded from html <script> which ends up with the same problem
  7. @jonforum Thank you for the reply! I have been using document.onload as well (and a similar function to yours too), but it makes the code very dense (and the page slightly slower) and have too many callbacks (have to track each api and when everything is done, then start the script). I think the solution I am looking at is have pixi.js and the apis in <head>, then modify the pixi-display.min.js file to delay the loading, and in document.onload have a function that loads it all. I thought this wasn't a developer friendly way at all, and pixi.js has been very developer friendly so I thought i was doing it the hard way! Maybe someone has a better trick!
  8. Hi everyone! I have been doing a lot of work with PIXI.js, and it is an absolute wonderful engine. However, I have had trouble with loading extra APIs such as pixi-display and pixi-multistyle-text synchronously in the head tag. I have managed to fixed the issue by loading the extensions once the document was fully loaded effectively inserting an extra asynchronous step, and then running the whole program. I was wondering if anyone had a better solution? Right now it is like this: load pixi.js and all document -> load pixi-display and all other apis -> run javascript And preferably, i was wondering if it would be possible to load pixi.js and pixi-display all together -> run javascript once document loaded
  9. Thank you! getLocalBounds was the function I was looking for. @ivan.popelyshev I don't quite understand your warning, but for the purpose of a simple sprite engine with no transformations whatsoever besides a simple horizontal scale = -1, it has been working well for me! Thank you xerver for the answer too! Cheers
  10. I know the devs of pixi.js browse this this forum, so just want to say thank you so much for pixi.js! It is an absolutely wonderful framework. I have a simple question and haven't been able to find the answer online. Containers have a width/height which is the total width and height of the sprites in the container, I think. Is there a minX/minY value for the sprites in the container, relative to the position of the container? For example, a container is set to position (20,20). Two sprites inside the container are set to (-10,-10,30,30) as (relX, relY, width, height), and (0,0,40,40). I believe that container.width will be 50, container.height will be 50. Is there a way to find the minX/minY relative to the container (-10,-10)? In other words, I would like to find the bounding rect of the sprites in a container relative to the container itself.