Exca

Members
  • Content Count

    245
  • Joined

  • Last visited

  • Days Won

    3

Exca last won the day on April 9

Exca had the most liked content!

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

2477 profile views
  1. There's plenty of responsive design threads with more info. But here's a short list of how canvas applications are usually done to make them responsive: - Have fixed canvas resolution. Use css to transform to wanted size. Keep aspect locked. - Resize canvas and scale elements inside to fit wanted area. Game aspect is fixed. - Build some logic inside your game that handles resizing into different aspect ratios and different sizes. What I usually is to have some logic that positions ui elements depending on device resolution. Then have the main game area fill one dimension with fixed width/height and then let another dimension go with whatever the aspect is. That way on some devices you might see more of your game but the most impacting dimension (vertical/horizontal) is locked on separate devices. Though trying to prevent from going over scale of 1 (assetwise) as then graphics start to get blurry. At that point I usually switch to css upscaling as rendering on larger resolution would not really benefit much.
  2. Exca

    Add symbol animation

    Animatedsprite requires a list of textures you wish to use. It should be something like this: var textures = [ PIXI.Texture.fromFrame("..."), ... ] this.symbol = new PIXI.AnimatedSprite( textures );
  3. Exca

    PixiJS Examples

    This thread is an awesome idea. Could this be even sticky? I would love to have an indication on what kind of examples people want.
  4. On the left is the simple method. Sort based on y-coordinate and offset by anchors / pivots. This is basically what you have but your anchors are all on default 0,0. The image shows the classic issue with that method. One way to make it better would be to define a simple shape (yellow lines) that determines where the objects sorting point is at that position. After that you could do a simple line check algorithm where you cast a ray from top and see what line is hit first. That is the object that should be on back, next one on top of that and so on. Do this for all regions and each of your object should have somekind of sorting value attached to them. For left green in the image it's 0, for blue wall it's 1+0+0+0 = 1, for right green it's 1+1=2. So your sorting would be 0,1,2. You would also most likely require some weights on the points, as if one region would have a hundred objects then the items in that would get much larger weight.
  5. Basically the problem comes from a case where you have objects that should be behind one layer and in front of another. One way to solve this would be to split the sprites into multiple textures that have a minimal change in sorting areas. Another one would be to have sorting done so that instead of sorting whole container as is you would have multiple overlapping regions (with zindex this is much easier now than before). which would calculate the sorting inside a single limited region. I have done one isometric project with the trivial kind of sorting (that you already have). The way you could get good results with that is to determine anchor (or pivot) points for all of your assets and then sort with y-coordinates. That will cause some cases where overlapping still happens though. For example if a person is standing behind a wall on the left and another one is above the first character on right. I can do an example picture of the more dynamic sorting idea later today.
  6. You could create a simple test case where you have a canvas, you draw the video there and then read a single pixel from it. If it gives the same error, then the video causes tainting. If not, then it's something else.
  7. Do you draw something else than the video to canvas? If something taints a canvas then it stays tainted no matter what is rendered in the future. Or it might be due to stream becoming unavailable at some point for short duration and that could cause tainting (though the bug report I found on this should be already resolved, it was 5 years ago). Pretty sure it's some kind of edge case in security constraints which causes canvas to become tainted (by something), which causes security error when pixels are read from it.
  8. That looks like a CORS problem. Can you check what network headers the video (and possibly related preflight request) have in relation to access control?
  9. AnimatedSprite is basically an example on how you could do an animated sprite with very basic support that is meant to be extended with your own needs. Though I see now reason why it couldn't have emit("loop") whenever onloop is called.
  10. There is no eventData on interaction plugin. Use the interaction.mouse.global as suggested by Ivan.
  11. You are not using pixijs text element but a Text class from window (which basically creates a text node). Use new PIXI.Text("...",style).
  12. Ah, forgot to add PIXI in front. So they should be new PIXI.Rectangle.
  13. I have had no problems with interactionmanager not handling css-scaling. Very often you dont want to have automatic scaling. At least in my projects automatic scaling on resize would break a lot of stuff. You can do the scaling manually really easy by doing something like this: var newSize = new Rectangle(0,0, widthyouwant, heightyouwant); var originaSize = new Rectangle(0,0, something, something); //Calculate how much scaling should be done. Keep the aspect with if and make sure canvas always fits wanted size. var s = newSize.width/originalSize.width; if( s > newSize.height / originalSize.height) s = newSize.height / originalSize.height renderer.resize(newSize.width, newSize.height); mainContainer.scale.set(s,s); or you could apply that scaling to canvas like this: var newSize = new Rectangle(0,0, widthyouwant, heightyouwant); var originaSize = new Rectangle(0,0, something, something); //Calculate how much scaling should be done. Keep the aspect with if and make sure canvas always fits wanted size. var s = newSize.width/originalSize.width; if( s > newSize.height / originalSize.height) s = newSize.height / originalSize.height renderer.view.style.transformOrigin = "0 0"; renderer.view.style.transform = "scale("+s+","+s+")";
  14. Resize function resizes the canvas to given resolution and starts rendering with that viewport size. If you want to scale the contents then you need to scale the container. Or you can scale the canvas with css.
  15. With toLocal you get the given coordinate in the objects local coordinates. So if you would change the toLocal into toLocal( entities.position, app.stage) then the rectangles would be drawn where the bunnies are. In order to make that work as minimap what you want is to calculate the relative coordinates and calculate that on minimap instead of calculating where the object is in the minimaps scope. So you could say somethign like: p.x = entities.x / screen.width * minimapWidth; p.y = entities.y / screen.height * minimapWidth; This assumes your map is the size of screen. If it's not, just change the screensize in the calculation to mapsize.