• Content count

  • Joined

  • Last visited

About OSUblake

  • Rank

Contact Methods

  • Twitter

Recent Profile Visitors

1,175 profile views
  1. OSUblake

    Keep child at original scale

    You can use GreenSock's ExpoScaleEase to animate scaling/counter-scaling. https://greensock.com/docs/Easing/ExpoScaleEase // Scale from 1 to 3 TweenMax.to(parent, 1, { pixi: { scale: 3 }, ease: ExpoScaleEase.config(1, 3) }); TweenMax.to(child, 1, { pixi: { scale: 1/3 }, ease: ExpoScaleEase.config(1, 1/3) });
  2. OSUblake

    Creating vector square diamond frames

    Look at the numbers after the 4. Version 4.0.0 was released almost 2 years ago. There's been a lot of changes and bug fixes since then. https://github.com/pixijs/pixi.js/releases
  3. OSUblake

    Creating vector square diamond frames

    @forleafe Your fiddle is using an old version of Pixi. Calling each line individually shouldn't matter. Here's another one for you. If you half the number of points in the .drawStar() method, you'll end up with a regular polygon. var graphics = new PIXI.Graphics() .lineStyle(5, 0xffff00) .drawStar(55, 55, 2, 50, 50) .closePath(); https://codepen.io/osublake/pen/KRmBOQ
  4. OSUblake

    Scaling rectangle from center and transform Origin

    Love the demo! And degrees would be nice. I don't think a lot of people are going to care if the value is stored in degrees as long as there is a way to get and set it in radians. GreenSock stores the value in an offset property. You can see the some of the transform values here. https://codepen.io/osublake/pen/BxWayz The origin is stored in global coordinates, allowing you to switch between a local and global origin. https://codepen.io/GreenSock/pen/waKrNj
  5. OSUblake

    Scaling rectangle from center and transform Origin

    Pivot works like the registration/reference point in graphic editing software. Both of these boxes are positioned at 0, 0. The second box will transform around its center. @ivan.popelyshev Is there any word on Chad's proposal for adding an origin property to transforms in v5? https://github.com/pixijs/pixi.js/issues/4138 https://github.com/pixijs/pixi.js/issues/997 If there was an option to do a smooth origin like GreenSock does with SVG, that would be icing on the cake. 🎂 https://codepen.io/GreenSock/pen/PqbWmZ
  6. OSUblake

    Scaling down big images quality

    You can create a texture from a base texture that is power of two in size. var texture = new PIXI.Texture(baseTexture, new PIXI.Rectangle(0, 0, 200, 200));
  7. OSUblake

    Collision between sprites

    You have to install it with npm, but here's a version of it. It only works with convex polygons. https://codepen.io/osublake/pen/f0122809730d67335264dcd50f44cad7.js Another way to do this is to check for edge intersections between polygons. That will work with concave polygons. Here's the compiled code for that demo. https://codepen.io/osublake/pen/eMvZmo.js
  8. OSUblake

    Collision between sprites

    I'll take a look at the library later, and will make a simple demo.
  9. OSUblake

    Collision between sprites

    From what I can tell Bump only works with points, circles, and rectangles. This looks like it will handle polygons. https://davidfig.github.io/intersects/ https://github.com/davidfig/intersects
  10. OSUblake

    Collision between sprites

    You can use polygons for your hit areas. It doesn't have to be pixel perfect. Now google how to do polygon collision detection. There are a lot of resources for this. For convex polygons you can use the Separating Axis Theorem (SAT). https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Separating_Axis_Theorem Here's an example of SAT with phaser. http://hexus.github.io/phaser-sat-example/ https://github.com/hexus/phaser-sat-example
  11. OSUblake

    Issue with context 2d

    In your screenshot you have a reference to the canvas element, so it will still be in memory. And I'm not 100% sure, but I don't think there will be any image data until you call getContext. A 10000 x 10000 bitmap will of course eat up some memory.
  12. Generate a white texture of the polygon... http://pixijs.download/dev/docs/PIXI.Graphics.html#generateCanvasTexture Then you can color a sprite with that texture using tint.
  13. OSUblake

    Container background color without graphics?

    Did you set the width, height, and tint? var bg = new PIXI.Sprite(PIXI.Texture.WHITE); bg.width = 800; bg.height = 500; bg.tint = 0xff0000;
  14. Here's an example in v3. I think I got the original idea from bQvle.
  15. OSUblake

    scale.x and scaleX, specificially for GSAP

    You can use scale, scaleX, and scaleY with the PixiPlugin.