Owlzy

Members
  • Content Count

    17
  • Joined

  • Last visited

About Owlzy

  • Rank
    Member

Recent Profile Visitors

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

  1. Ah thanks! I should have thought to just do it manually with a render texture, back in a world I understand now. Here's the code using a RT if anyone runs into this in future. complete() { // reset visibility this._scaleSlider.visible = false; this._scalePanel.visible = false; this._photo.visible = false; this._photoPreview.alpha = 1; // create render texture const rt = PIXI.RenderTexture.create({width: this._photoMask.width, height: this._photoMask.height}); // clear anchors this._photoPreview.anchor.set(0); this._photoMask.anchor.set(0); // offset photo to negate the anchor change this._photoPreview.x -= (this._photoPreview.width - this._photoMask.width) * 0.5; this._photoPreview.y -= (this._photoPreview.height - this._photoMask.height) * 0.5; ENG.view.renderer.render(this._captureLayer, rt); const maskedPhoto = new PIXI.Sprite(rt); maskedPhoto.anchor.set(0.5); this.addChild(maskedPhoto); // hide preview this._photoPreview.visible = false; }
  2. I'm trying to mask a photo and then capture the image. But I don't want to capture some giant texture, just a small region around the mask. Here's a gif which shows the issue quite clearly (excuse the creepy face from this is not a person!). This is the callback for the complete button _onComplete() { // reset visibility this._scaleSlider.visible = false; this._scalePanel.visible = false; this._photo.visible = false; this._photoPreview.alpha = 1; // capture masked photo const bounds = this._captureLayer.getLocalBounds(null, true); const bounds2 = this._photoMask.getLocalBounds(null, true); const maskedTexture = ENG.view.renderer.generateTexture(this._captureLayer, PIXI.SCALE_MODES.LINEAR, 1, bounds2); const maskedPhoto = new PIXI.Sprite(maskedTexture); maskedPhoto.anchor.set(0.5); this.addChild(maskedPhoto); // hide preview this._photoPreview.visible = false; } I've tried just about any combination I can think of the for the region rect, including calculating the region manually. But as the mask and photo are in the same container I was expecting to to be as easy as providing the mask bounds instead of the containers bounds. What am I missing here? I've also tried upgrading to latest dev (PixiJS 5.4.0-rc.3 ) just in case there was a bug fix I needed but that didn't help either.
  3. if I need to do something like this typically i'll fetch the manifest for the assets required for the minigame, load these assets through our asset manager, and then on leaving the game scene I will have kept this manifest (list of files I loaded) in memory, which I can then use to destroy and unload textures. regarding the duplicate keys, just delete them for (const key in keys) { if (keys.hasOwnProperty(key)) { delete PIXI.utils.TextureCache[key]; } }
  4. maybe this a silly question. but your not calling updateTransform() after setting the sprites x, y coordinates are you? I can't imagine a scenario where simply setting a few sprites coordinates would cause slow down...
  5. I don't see you update TweenJS in your code, most likely your problem. See their github, in the update loop - TWEEN.update(time); GSAP runs on its own ticker, Tweenjs doesn't, which is preferable is up for debate. Also no need to tween a plain object and then set the sprites position, pixi accesses x,y with a getter so you can just tween a sprite directly. Or otherwise you could just tween mySprite.position
  6. I forked someones codepen and set you up a quick example. A codepen is useful if your trying to collab with people. You will need something to animate it with, in this example I used TweenMax but there are lots of others. https://codepen.io/owlzy-the-vuer/pen/PBGMLy Have a little read of the code and try commenting out the line in the tweenmax onUpdate function where the emitters spawn position is set and you will see that the sprite is being animated by tweenmax, and I just use its position to set where the particles spawn. You could also add sprite.renderable = false; and the sprite will be hidden. You can then set up a more complex animation to achieve whatever effect your after.
  7. Owlzy

    Organising Code

    I'd say your code style is pretty decent, especially if your new to programming like you said, I've seen worse. Bit of slightly odd stuff with coding conventions going on is the only thing I could see. In JS generally functions start with lower case first word, with a capital letter for the first letter of any subsequent word. There was at least one function that wasn't in this style. Also I would normally use camel case for my js file names, is fairly minor though. Also in JS I always format my curly brackets like this for functions etc myFunction() { //some code } Although I have seen people format theirs as you do, in a more c style. Personally if I'm writing Java or JS I will do it in the above style, if c++ or c# I will use the format you do here. Again, not massively important, but its good to try and stick to conventions.
  8. Owlzy

    PIXI v5 and 3D

    Oh cool, never heard of that file format before. I was planning on implementing a .obj parser because I heard it was a very simple format. But I will check this out too.
  9. Owlzy

    PIXI v5 and 3D

    apologies, think I just needed a good nights sleep, I was being super dumb and missed out a whole load of steps! hello cube
  10. Owlzy

    PIXI v5 and 3D

    I know this is a bit premature as v5 is in pre-release stage. But basically I recently wrote a super simple 3d renderer in webgl which I had been attempting to hook into pixi, with limited success. A major problem I found was the fact the low level stuff was wrapped in the gl-core lib. Then I saw v5 was available for me to play around with, and I really love the way so much of this low level stuff is exposed to us now, I was straight away imagining all the crazy stuff we can do with it So I attempted to hook up my shaders and geometry to the new classes, in order to get a simple 3d cube demo working. I got something displayed fairly quickly, even the simple lighting shader I wrote seems to be working. However I hadn't yet added 3d projection and when I tried to do a projection transform on the model view matrix I just see grey background. I realise really I need to have another good dig through the source code for this, but do you guys have an idea how soon might there be a simple cube example on the examples page? Or otherwise is there something simple that it's likely I missed that would cause this? Sorry for the vagueness of my question but thanks in advance for taking a look and again, I really like where you guys are going with V5, good work chaps! and just for fun, here's a screen shot of my "cube" (I got mashup texture coords for some reason)
  11. I've done it previously just by taking the distance and angle between touch down and touch up points.
  12. It just that for a physics lib it makes sense that gravity should be negative, as gravity pulls not pushes, so I should think all physics libs do this. You can just use a negative value but I found it can get a bit complicated flipping the signs in your head if your using physics formulas a lot, programmer preference rlly. Both p2 and matter are full featured if you ask me, both would suit your needs fine I should imagine. The only thing I can actually remember from when I compared the two is that matter.js had a prettier website
  13. I solved it in the end, it turned out I wasn't actually rounding the values I meant to, that was causing lines when I moved the container when it was on non int coords. I was aware of the lib but it was this limitation that put me off. Thinking next time I might use your lib, save myself some stress! If it helps anyone else make sure you double check your rounding your container, and PIXI.SCALE_MODES.NEAREST on your tiles base texture is a good idea too.
  14. You need gravity, but just with pixi that will be a very low number and the gravity will currently act upwards. If you check the pen it should work as you expected, with the balls falling when you place them
  15. you were kinda doing it in a way I found confusing. On 2nd look I seem to of found your issue. Try this pen - With p2 I always use position[0] and position[1] for x,y values respectively , not sure you can access them with position.x