SarahJ

Members
  • Content Count

    18
  • Joined

  • Last visited

Everything posted by SarahJ

  1. SarahJ

    Fading trail

    @ivan.popelyshev Instead of Could you edit the sprites textures frame directly, like: var sprite = new PIXI.Sprite(<gradient texture>); sprite.texture.frame = new PIXI.Rectangle(<...>); // Edit it directly Or is this bad practice?
  2. SarahJ

    Fading trail

    Finished! Here's the code for anyone who is looking for a solution in the future: var app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, antialias: true }); document.body.appendChild(app.view); app.renderer.view.style.position = "absolute"; app.renderer.view.style.display = "block"; app.renderer.backgroundColor = 0x000000; var source = new PIXI.Graphics(); // The source of the trail (Red triangle) source.speed = 4; // How fast the source moves var angle = Math.random() * Math.PI * 2; // Give the source a random direction source.velocity = { // Set it's velocity to move it in the random direction x: Math.cos(angle) * source.speed, y: Math.sin(angle) * source.speed }; source.pivot.set(0.5); source.rotation = angle; source.position.set(window.innerWidth / 2, window.innerHeight / 2); // Start in the center of the window source.beginFill(0xff0000); source.drawPolygon([ // Draw a triangle 40, 0, 0, 15, 0, -15 ]); source.endFill(); app.stage.addChild(source); var gradient = createGradient('white', 'rgba(255, 255, 255, 0)', 250, 20); // Create the gradient texture var trail = PIXI.Sprite.from(gradient); // Create a sprite from the texture trail.anchor.y = 0.5; trail.rotation = source.rotation + Math.PI; app.stage.addChild(trail); var length = 0; // Length starts off with 0, grows with the source moving app.ticker.add((delta) => { source.position.x += source.velocity.x; source.position.y += source.velocity.y; trail.position.x = source.position.x; trail.position.y = source.position.y; if (length + 2 < 250) { length += source.speed; // Constrain the length to not go over 250 gradient.frame = new PIXI.Rectangle(0, 0, length, 20); gradient._updateUvs(); // Update the sprite after setting a new frame in the texture } }); function createGradient(start, end, width, height) { var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, width, 0); gradient.addColorStop(0, start); gradient.addColorStop(1, end); ctx.fillStyle = gradient; ctx.beginPath(); // Draws it in a triangular shape ctx.moveTo(width, height / 2); ctx.lineTo(0, 0); ctx.lineTo(0, height); ctx.fill(); return PIXI.Texture.fromCanvas(canvas); }
  3. SarahJ

    Fading trail

    Thanks! I forgot to check the source code first. 😶
  4. SarahJ

    Fading trail

    Thanks, everyone for helping, I've managed to make a working example of it as a trail now: codepen.io/anon/pen/YgBapq! Just one question: With my current code, the trail pops up immediately behind the source. I would like it to act as the mouse trail example; growing as the source first moves, like this: I originally wanted to use a frame, but it seems like you can't crop a sprite, only a texture, and I don't want to have to make a new texture every frame. What would be the best way to do this?
  5. SarahJ

    Fading trail

    I've decided now to use @ivan.popelyshev's method, and I'll get back when I get it working. Thanks, everyone for your replies, I wouldn't have thought of this on my own!
  6. SarahJ

    Fading trail

    Thanks for all of your quick replies, I never knew you could create a gradient like that! Back to the original question though, once the gradient is created, would it be right to use it as an alpha mask at the end of a trail?
  7. SarahJ

    Fading trail

    Hi, I'm trying to create a fading trail using minimal graphic/sprite objects. Right now I have an object that is always moving at the same speed and direction, and I would like it to have a trail behind it. I've looked at the mouse trail demo, however, I feel it is unnecessary to use have to use so many objects just to make a linear trail (the trail I need will always be in the same direction), as I'm going to need 10+ trails at once. Here are 2 of the options I've thought of so far: Draw a rectangle graphics object, then use an alpha mask to create a fading an effect: Have a really long sprite as a trail, then use set its frame to the length I need. Which one would be more practical to use, and are there any better methods? Thanks!
  8. @ivan.popelyshev Might as well learn the v5 method! 😃
  9. Hi, I have a rectangle I'm a trying to get the end of the rectangle to have a linear gradient alpha, like this: I've tried using an alpha mask but have been a bit confused. What would be the best way to do this, and if possible could some code be provided? Thanks!
  10. @ivan.popelyshev How would I use the canvas as an interactive target? For me, app.stage.trackedPointers returns an empty object. Do I have to bind it to the canvas somehow?
  11. Right now I'm using `interaction.on('mousedown', event => myFunction(event));` to detect when the mouse is first pressed down. However, I can't find out how to have a function called every frame is the mouse is still down. I've checked out the docs and it appears there is nothing to do so. Is there a built-in way to do this is Pixi.js, or do I have to use the Javascript ways to do this?
  12. I'm looking to start making 2D games with Javascript, but after researching and looking at other games source codes, I can't decide whether to use the HTML canvas to render my games or a framework. First of all, this forum may be a little biased since it hosts many forums of rendering frameworks, so I'm looking for a clear, unbiased answer on which one would be easier and more flexible, as well as some good ones to choose from. When I first started, the obvious choice would be to use a framework, as many articles state, "There's no point in reinventing the wheel". However, after looking at some popular web-based 2D games, it seems like most like to use canvas to render. I've looked myself into Pixi.js, but even though it has some amazing features (WebGL with canvas fallback, built in loop), I feel like it still lacks the flexibility of the HTML canvas. For example, if I wanted to make a circle that can be morphed or manipulated, I could do it using canvas with curves, however, with Pixi.js, it doesn't seem to have that kind of flexibility. I'd like to know what others on this forum think, and possibly why or why not they choose to use a framework. (Keep in mind I'm looking for a rendering framework, not a full-featured game framework) Thanks!
  13. I've got it working now, thanks for your help!
  14. Thanks for your reply! Just a question: Would it be possible to directly change the position through functions? Eg. sprite.position.add(x, y);
  15. I would like to use Vector maths (add, subtract, etc) on the Sprites position. So far I see that the position is an instance of PIXI.ObservablePoint, would it be better to add functions to that or extend it?
  16. Hi, I'm new to Pixi.js and am wondering if it is possible to implement my own vector class with Pixi sprites, to simplify vector calculations. So far, Pixi.js has seemed really flexible so I thought there may be a built-in way to this. Thanks!