Search the Community

Showing results for tags 'scale'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 168 results

  1. I'm trying to make my mesh smaller during its linear velocity movement. But unfortunately, as soon as I set the scaling, it stops the movement. How can I scale down my mesh in size without interrupting the movement? Is there an elegant way without having to calculate positions myself? See my example, where the movement stops after 1sec when trying to scale: http://www.babylonjs-playground.com/#5WEAFN
  2. Hi. I'm new to phaser and to this forum. I have a problem that I would like to ask for some help with. I'm trying to import a level from a JSON file exported from a 3rd party level editor that is not meant to be used with Phaser or any other 3rd party engine. It is just me trying to use the JSON coming from the editor to load the level in Phaser and I have some problem with rotation and scale of the sprites. The level editor rotate the sprites around a center point and scale the sprites from the origin point. In Phaser, I set the position of the anchor point to match the position of the origin point and set the position of the pivot point to match the position of the center point for each sprite and it works for getting the position and the rotation of the sprites but when I scale a sprite in the editor, it does not appear right in Phaser. This is how it looks like in the editor: And this is how it looks like in Phaser after import: Notice the distance between the two sprites. It does not match and I think it is because in the editor the sprite is scaled from the top left corner of the sprite (origin/anchor point) while in phaser it is scaled from the center of the sprite (pivot point). At least If I don't change the position of the pivot point, the scale and position works but then rotation is off because in the editor the sprite is rotated around the center point which is in the middle by default. In any case I can't find a solution to this. I can't get the scale match without messing up the rotation or the rotation without messing up the scale because of the two points. When I check the values, everything seems to match. Position, rotation, scale but it still does not look the same in Phaser. I hope someone did have the same problem with rotating and scaling sprites in Phaser and already figured a solution. What I would like to know specifically, is there any way to rotate a sprite around a middle point without changing the position of the anchor and pivot point or is there any way to scale a sprite from the anchor point instead of the pivot point? Because the problem seems to be in Phaser the sprites are scaled and rotated around the pivot point but in this case I need to scale it and rotate it in two separated points to get the same result as in the level editor. I would appreciate any help. Thank you.
  3. Hello, Is there a way to get the size of an object after the window has been resized? (Whole scene gets scaled down/up). planet2.getBoundingInfo().boundingBox.vectorsWorld; but it only displays 1.25 no matter how much I resize my browser window
  4. Matrix decompose scaling bug

    @Deltakosh The matrix decompose returns wrong scale value when scale is negative see https://www.babylonjs-playground.com/#ZXZI83 Here scling.z is being set to -2, decompose returns +2 I think the bug got introduced by this change https://github.com/BabylonJS/Babylon.js/commit/8d1b546a20b3398556f0fe98f6d57329bce92687#diff-ccd6f7b0cc7c001d6fdf41cff591c6a6 Fixed matrix decomposition with negative scaling
  5. I did a function resize to resize the game follow the size of the screen and at the end of this function I do : game.scale.refresh(); But I would like to catch the event of this function like this : var scaleRefresh = game.scale.refresh(); scaleRefresh.onComplete.add(function(){ //DO stuff }); But it's not work how can I do this?
  6. I'm working on a "fake zoom" function that looks like this: class Zoomer extends Phaser.Group { zoom = (amount = { x: 1.5, y: 1.5 }) => { this.x = -((amount.x * (this.game.width / 2)) - (this.game.width / 2)); this.y = this.game.camera.bounds.y - (amount.x * (this.game.height * 1.15)); this.scale.setTo(amount.x, amount.y); } } The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all. This is how I usually create masks on a Phaser.Sprite: createMask() { const graphics = this.game.add.graphics(this.x, this.y); graphics.beginFill(0xFFFFFF); graphics.drawRect(0, 0, this.width, this.height); this.addChild(graphics); this.mask = graphics; } How can I make the group scaling/repositioning include the group's sprites' masks as well?
  7. Problems due to world's scaling

    Hi there, Before reading, I want you to know that you can test my little code here : https://jsfiddle.net/TomLeGrand/meL44k5k/ (Arrows to move the player and mousse to aim in a direction) So, I had some problems using the camera.follow (), moveToPointer () and world.scale.set () functions simultaneously. It seems that the world's scaling influence the x and y properties of world's object (like the camera, the input, etc...). To be more specific, I can't use the camera.follow(player), because the player get out from the camera at some point. The only solution I found was to set the x and y camera's values in the update function but now I don't know how I can get a "smooth effect" without using the camera.follow() function. The moveToPointer() method react badly too, the farthest I go, the worst It get, even with game.input.scale.set(). I'll be glad if you can help me to fix the camera and the moveToPointer() methods
  8. Hi, I'm currently making a litlle top-down shooter game with Phaser. I'm using the method bellow to aim towards the mouse's position. sprite.rotation = game.physics.arcade.angleToPointer(sprite); This work very well, but I would like to allow the player to zoom in and out. I was following this idea : http://jsfiddle.net/NMNJ7/25/ which use the game.world.scale.set() method; But when I change the world's scaling, the angleToPointer() method is completly lost and it's impossible to aim. You can try this little exemple I've made to understand what goes wrong : https://jsfiddle.net/TomLeGrand/uh7d10eu/127/ Do someone has an idea to fix this? Thanks for you futur help
  9. Hi All. Maybe it seems strangely but how I can before use scale9 for sprite2D, scale this sprite without scale9 and after that applying to this sprite scale9? Why I need this? For optimization! I have canvas size 1280x720, then I am make the size for this canvas 640x360 and scale = 2 and for all sprite2D objects on this canvas I set scale = 0.5 and in results we have few resolution for canvas and good quality for all sprite2D objects. But some sprites uses scale9 and if I set scale 0.5 for this sprites, then this sprites at once uses scale9 but I need use just scale 0.5 and after that apply scale9. This is what I get if scale of canvas = 1 and the button scaleX = 1.5, scaleY = 1 (uses scale9) But what I get if scale canvas = 2 and button scaleX = 0.75, scaleY = 0.5 (uses scale9) Need to apply scale 0.5 as original scale and then apply for a new size of sprite the scale9 grid. How I can to do this? Thanks!
  10. Make tilemap/world fit in game?

    Hi, I just learned some basics of using tilemaps. I created a tilemap using Tiled, containing 32x32px tiles. The problem is, I can't resize the entire tilemap to fit the entire canvas. I need the layer in the tilemap or the world itself to fit the canvas. scale.setTo() works, but that's relative and I want to set the width and height to that of the game's canvas. Changing displayWidth and width doesn't seem to have any effects. The tilemap still appears small in the upper left corner of the canvas. Any suggestions guys? Code: var playLevel = { create: function() { this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer = this.map.createLayer('Ground'); this.map.setCollisionBetween(1, 200, true, 'Ground'); this.groundLayer.resizeWorld(); }, update: function() { } } EDIT: I just found out that changing width and height DOES work. But for some reason, instead of the tilemap's width being 32 * 20 = 640, it returned 940, which is the width of the canvas. But the tilemap itself looks to be 640 pixels wide, so I don't know why the width and height properties don't correspond to the actual ones. So I guess I can't use it?
  11. Hi all, Hopefully, this is just something quick I'm missing... I have initialized my game with the resolution of 500x800 and SCALE_MODE is set to RESIZE; In portrait orientation, the game is the correct size of 500x800, however, when I rotate the device and would expect the game to now be 800x500 it is actually 500x313. I'm thinking I'm just missing something that I need to manually resize or update or something, but I'm having trouble finding what I need by searching around. Anyone know how to accomplish what I'm expecting? Thanks.
  12. Help with scales?

    So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following: // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this: // Here we create the ground. var ground = platforms.create(0, game.world.height - 64, 'ground'); Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks! Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background? tutorial.html part9.html
  13. Recently I am building an io game like agar.io. But I encounter 2 problems now. First, after reading up some articles in this forum about the camera on pixi.js.I found the best way is to set pivot to the container. I try this and work greatly. But I just wonder can I create another container called camera to perform the functionality of camera instead of using app.stage as a map and camera at the same time? Secondly, what is the best way to get my circle bigger when I eat a food? The only way I think of is using PIXI.Graphics to draw a new circle and replace the old one with it.But it seems time-consuming and stupid. Are there any better solutions? Thx everyone! Below is my test code on pixi. import * as PIXI from 'pixi.js'; // SOME ALIAS const Application = PIXI.Application; const Graphics = PIXI.Graphics; const Sprite = PIXI.Sprite; const ObservablePoint = PIXI.ObservablePoint; const Container = PIXI.Container; const Point = PIXI.Point; // CREATE A NEW PIXI APP const appConfig = {width: window.innerWidth, height: window.innerHeight,antialias: true, view: document.querySelector('#root')}; const app = new Application(appConfig); // CREATE NEW SPRITES const spriteMove = Circle(0xffffff,30); app.stage.addChild(spriteMove); const spriteStop = Circle(0xe83a30,50); app.stage.addChild(spriteStop); // SET CAMERA // FIXME CAN'T NOT BUILD A INDEPENDENT CAMERA MAYBE BECAUSE OF THE PIXI ORIGINAL DESIGN const camera = new Container(); app.stage.position.set(app.screen.width/2,app.screen.height/2); // ANIMATION app.ticker.speed = 0.1; app.ticker.add(()=>{ spriteMove.x += 0.5; spriteMove.y += 0.5; // GROW BIGGER // app.stage.children[0] = Circle(0xfff,r++); // IT DOES NOT ASSIGN REFERENCE SO IT HAS TO BE PUT IN ANIMATION LOOP app.stage.pivot.copy(spriteMove.position); }) // GRAPH FUCNTION function Circle(c, r){ const g = new Graphics(); g.lineStyle(); g.beginFill(c); g.drawCircle(0, 0, r); g.endFill(); const s = new PIXI.Sprite(g.generateCanvasTexture()); s.anchor.set(0.5,0.5); return s; }
  14. Hey everyone hopefully this is worded ok and you are having a good day. I currently have a playable character which can be moved around and collide with objects. The issue i am having is once it has collided with a certain object i want the players character sprite to increase in size however when i do this using sprite.scale.setTo for some reason the position of the player sprite moves to 0,0. Apologise if that was not enough information i can provide more if needed.
  15. Hey everyone hopefully this is worded ok and you are having a good day. I currently have a playable character which can be moved around and collide with objects. The issue i am having is once it has collided with a certain object i want the players character sprite to increase in size however when i do this using sprite.scale.setTo for some reason the position of the player sprite moves to 0,0. Apologise if that was not enough information i can provide more if needed.
  16. Hi, I want to visualize the "projectiles" of a flamethrower using a group of sprites. They are moved by body physics of type arcade. Now I'd like to scale the single projectiles up, depending on their position on the x axis or alternatively on their livetime. How would you achieve this without draining the cpu too much? Would you use forEachAlive or some sort of callback? Might it be easier to implement using particles and can I check for collision with particles? What I have so far: execute() { let sprite = this.spriteGroup.getFirstExists(false); if (sprite) { sprite.reset(this._enemy.attackSpawnX, this._enemy.attackSpawnY); sprite.body.velocity.x = -200; setTimeout(this.execute.bind(this), 100); } } I use setTimeout in order to spawn the projectiles asynchonous until the group is empty. greetings
  17. Hi all, I've been banging my head off the desk for days now and can't figure out how to go about accomplishing this. I've gotten to the point of being able to scale or rotate around a random pivot point, but only once, I need to be able to do it multiple times in a row. For example (in the GIF attached); I need to scale the box across the red line as the pivot point, and then scale the box along the blue line as the pivot point and then finally rotate the box around the green dot as the pivot point. I can do each step individually just fine, but the chaining together completely breaks as I can't figure out how to set the pivot point on the already manipulated sprite properly. Does anyone have any ideas on how to accomplish this? I really need to get this working asap and I'm at the end of my rope. Thanks.
  18. Scaling and input fields

    In my game I have a form that I built with Orange Games' input plugin (https://github.com/orange-games/phaser-input). The input form working great on computer, but on mobile when you tap into an input field, it zooms in, and becomes impossible to see what you're doing, or go to the next field. I tried using scale prevention with meta tags: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> and: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> but my game uses "game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL" to look good on all resolutions. So when I put in the meta tags, it doesn't scale initially, and it is too big on mobile. Is there any way to use a meta tag that allows for initial scaling on mobile, but then freezes the scale in order to prevent zooming on input fields?
  19. Fix position after scale

    Hi guys. I'm trying to do a "zoom in" effect on a GUI_Object. But when scaling the image leaves the original collision field. How to keep the image centered with the collision field of the button? Before click: After click: Code: game.UI.ButtonInit = me.GUI_Object.extend({ init: function (x, y, image) { this._super(me.GUI_Object, "init", [x, y, { image: image, }]); this.anchorPoint.set(0, 0); this.floating = false; }, onClick: function () { this._super(me.Sprite, "scale", [.8, .8]); }, update: function () { return true; }, draw: function (renderer) { this._super(me.GUI_Object, "draw", [renderer]); } });
  20. Game world scale problem

    Hi. My game size is : var game = new Phaser.Game(640, 780, Phaser.CANVAS, 'game'); I have resized it to : this.world.resize(640, 10000); player position : this.player = this.add.sprite(320, 9952, 'player'); this.camera.follow(this.player); When I am using scaling, such as : this.game.world.scale.set(2,2); or gofull: function () { if (this.game.scale.isFullScreen){ this.game.scale.stopFullScreen(); } else { this.game.scale.startFullScreen(false, false); } }, it set my player and camera position 0, 0 ( at the top of the game ), when using gofull() function it only changes position when fire stopFullScreen(), with startFullScreen() there is no problem I'm probably wrong to use resized world and scale.
  21. Problems in Landscape mode

    Hi everyone!, I've just started to use Phaser's framework, so I don't have enought knowledge about it. I did a game (test it here), it works well on pc's browser. The problem were when I tried to do it mobile friendly. I tried to do that (on boot's state): if (!game.device.desktop) { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.refresh(); } When I test it in my phone (portrait mode) it works good . The problem is when I rotate the screen (landscape mode), it doesn't scale well(I can't see the bottom). Portrait view: Landscape view: (I can't see the bottom) What is the problem ?? Thanks!!
  22. Hi everybody, To thank the users of this forum who helped me a lot, i put my template available to help new beginners or someone else. This template offers : correct scaling without stretching effect portrait mode (for landscape mode you must invert width and height) works with cocoon in webview+ and canvas+ mode (deviceready implemented) upload the file source.zip in cocoon.io and run it. https://cocoon.io/ NOTICE for canvas+, avoid this syntax, that don't work in canvas+, in webview and webview+ no problem let variable; const anothervariable; var myFunc=()=>{} and prefer this: var variable; var myFunc = function(){}; simple example with prototype and inheritance use the states (i personnaly put all the states in a single file but you can quite put them in separate files, it's necessary to inform them in index.html eg: <script src="src/otherfile.js"></script> This template is based on : https://github.com/EnclaveGames/Cyber-Orb and how to adjust the scale is based on: Now my template for the beginners , index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>example_test_scale</title> <link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> <style> body { margin: auto; display: table; position: absolute; border:0px; top: 0px; left: 0px; padding: 0; margin: 0; background: #ffff00 } </style> <!--necessary for cocoon.js--> <script src="cordova.js"></script> <script src="src/phaser.js"></script> <script src="src/main.js"></script> </head> <body> </body> <script> document.addEventListener("deviceready", function() { setTimeout(function() { navigator.splashscreen.hide(); }, 5000, false); }); (function() { //start with a game with these resolution : 1280-1920 // personnaly i find it offers the best graphics for all devices but may slow some devices. // after put a safe zone //1280+200 > 1480 //1920 +350 > 2270 (350 is 200*1.5 > ratio from 1920/1280) var safe_zone_width=1480; var safe_zone_height=2270; var w = window.innerWidth ;//* pixelRatio, var h = window.innerHeight ;//* pixelRatio; var lw, lh; if ( h > w ) { lw = h; lh = w; } else { lw = w; lh = h; } var aspect_ratio_device = lw/lh; var aspect_ratio_safe_zone = safe_zone_height / safe_zone_width; var extra_height = 0, extra_width = 0; if (aspect_ratio_safe_zone < aspect_ratio_device) { // have to add game pixels horizontally in order to fill the device screen extra_height = aspect_ratio_device * safe_zone_width - safe_zone_height; } else { // have to add game pixels vertically extra_width = safe_zone_height / aspect_ratio_device - safe_zone_width; } game = new Phaser.Game( safe_zone_width + extra_width, safe_zone_height + extra_height, Phaser.CANVAS, 'game'); game.state.add('boot', boot); game.state.add('preloader', preloader); game.state.add('the_game', the_game); game.state.add('next_screen', next_screen); game.state.start('boot'); })(); </script> </html> my main.js //initialize variables here var test="1...2...3"; var text="hello from sprite"; //example of prototype => a simple sprite _sprite = function(game,posx,posy,picture){ this.picture=picture, this.posx=posx; this.posy=posy; //call the class sprite from Phaser Phaser.Sprite.call(this,game,this.posx,this.posy,this.picture); this.anchor.setTo(0.5,0.5); game.add.existing(this); }; _sprite.prototype=Object.create(Phaser.Sprite.prototype); // say hello from sprite _sprite.prototype.say_hello=function(){ alert(text); }; //use another prototype but with the previous parameter from _sprite, it's inheritance _super_sprite=function(game,posx,posy,picture,super_power){ //call the first prototype _sprite.call(this,game,posx,posy,picture); this.super_power=super_power; this.scale.setTo(2,2); }; _super_sprite.prototype=Object.create(_sprite.prototype); // add a new characteritic to this prototype _super_sprite.prototype.show_super_power=function(){ alert(this.super_power); }; var boot = { preload: function() { }, create: function() { //to scale the game this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; //red color to see the background of the game itself // you must change the background in the index.html to have the same color in the background game // > change the yellow in red it's only to see how the game is scalling this.game.stage.backgroundColor = '#ff4000'; this.game.scale.refresh(); this.game.state.start('preloader'); }, }; var preloader = { preload: function() { this.load.image('green_circle', 'img/green_circle.png'); this.load.image('white_circle', 'img/white_circle.png'); }, create: function() { this.game.state.start('the_game'); //do not use arrow function like this var some_function=()=>{alert(test)} //it works on webview+ mode but not on canvas mode var some_function=function(){ alert(test); }; some_function(); } }; var the_game = { create: function(){ //to center an object in your game use this: this.green_circle = this.add.sprite(this.game.world.centerX,this.game.world.centerY,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5); this.game.add.existing(this.green_circle); this.game.time.events.add(2000,function(){this.game.state.start('next_screen');},this); //use prototype => sprite with white_circle this.white_circle=new _sprite(game,this.game.world.centerX,1800,'white_circle'); this.game.time.events.add(1000,function(){this.white_circle.say_hello();},this); //use another prototype with inheritance this.super_white_circle=new _super_sprite(game,this.game.world.centerX,1500,'white_circle','i am superman'); this.game.time.events.add(1500,function(){this.super_white_circle.show_super_power();},this); this.game.time.events.add(1800,function(){this.super_white_circle.say_hello();},this); }, }; //for the next screen => next state, the green_circle move to top and alpha is minder var next_screen = { create: function(){ console.log("next"); this.green_circle = this.add.sprite(this.game.world.centerX,300,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5); this.green_circle.alpha=0.5; this.game.add.existing(this.green_circle); }, }; And finally you could download all the template below(template.zip). To launch the app, go to template/www/index.html or upload the file template.zip in cocoon.io and run it. https://docs.cocoon.io/article/developer-app/ Enjoy ! ps liste of tools i use : image editor => https://www.gimp.org/fr/ vector image => https://inkscape.org/fr/ font to image => http://kvazars.com/littera/ convert music to ogg => https://audio.online-convert.com/fr/convertir-en-ogg reduce png => https://tinypng.com/ particle editor => https://phaser-particle-editor.firebaseapp.com/ text editor the best => https://neovim.io/doc/user/nvim.html plugin with nvim : Plug 'scrooloose/nerdtree' Plug 'morhetz/gruvbox' Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' } Plug 'Raimondi/delimitMate' Plug 'rhysd/github-complete.vim' Plug 'easymotion/vim-easymotion' Plug 'terryma/vim-multiple-cursors' Plug 'vim-syntastic/syntastic' Plug 'kien/ctrlp.vim' Plug 'majutsushi/tagbar' Plug 'pangloss/vim-javascript' Plug 'vim-scripts/indenthtml.vim' Plug 'walm/jshint.vim' syntax style correct => http://jshint.com/ colorscheme => https://github.com/joshdick/onedark.vim os : awesome wm on linux with zsh an interesting link to review the basis from javascript in 5 minutes > https://learnxinyminutes.com/docs/javascript/ template.zip
  23. drag event when sprite scaled

    hi everyone, Here is the problem I meet, I have a sprite and I can drag it in the right way when game has normal scale but when I change scale by game.world.scale.setTo(2); things become different. the sprite moving distance become twice as my cursor moving distance, when the scale becomes 3 the distance also become triple as well. so do you gays have any good ideas for sync cursor and sprite position, many thx.
  24. Displacement filter scale issue.

    Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on pixijs.com (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.
  25. I'm trying to create a dash fade effect behind the player when it's executing the dodge ability. I'm doing this with a particle emitter (dashEm). It's all good except from one thing the particle sprites on the trail aren't going in the player direction, they don't scale in X axis. How it should be in both directions: The actual problem, when player goes to left: The Player scaleX changes whenever the player presses left or right key. measures.last.dir = (pressedKeys.right)?1:-1 player.scale.setTo(measures.last.dir*2.5, 2.5) The emitter min and max scale are set to 2.5 same as player. dashEm = game.add.emitter(0, 0, 200); dashEm.makeParticles('particleDash'); dashEm.minParticleScale = 2.4; dashEm.maxParticleScale = 2.6; dashEm.lifespan = 400; dashEm.minRotation = 0; dashEm.maxRotation = 0; dashEm.minParticleSpeed.setTo(0, 0); dashEm.maxParticleSpeed.setTo(0, 0); dashEm.gravity = -1400; // fix global gravity The update. If the dodge happens I update the emitter position, set the trail direction(particles speed), and release them. dashEm.x = player.x; dashEm.y = player.y; dashEm.minParticleSpeed.setTo(-100*measures.last.dir, 0); dashEm.maxParticleSpeed.setTo(-1000*measures.last.dir, 0); dashEm.emitParticle(); What I've tried in update I've tried to attach the emitter as a child of player. But when the player changes its direction (scaleX) emitter also change and trail suddenly change too (logical it's his child). I've tried to change directly emitter scale. It works fine for right direction but when facing left the emitter and trail just disappear. dashEm.scale = new Phaser.Point(1*measures.last.dir, 1) I've tried to use setScale emitter method. But all it does is reduce the scale of the particles to 1. Not even put them in the right direction, no matter what values I enter. sx = 2.5 *measures.last.dir sy = 2.5 dashEm.setScale(sx, sx, sy, sy) I've tried modifying every property in the emitter that has something to do with the word scale and nothing works. I'cant use the default minParticleScale & maxParticleScale because this properties modify the both axis X & Y. I just need to change X axis, otherwise the trail would be upside down. Last thing! Reading the docs I've found in minParticleScale the sentence "If you need to control each axis see minParticleScaleX" but there's no such property nor function!. Hope I posted it well. Thanks for the help guys!