Search the Community
Showing results for tags 'help'.
-
Hello everyone, firstly I am new to Phaser, but I would really like to create a typing/educational game ! (like moon-type : http://www.wordgames.com/moon-type-2.html) I have already created a background and a caracter (the simplest stuff), but I have no idea how to create moving text blocks containing a dictionnary (although I have a .txt file with a list of all existing words), progressive difficulty and a scoring system.. I know, I'm asking a lot, but i really need help, I'm more on the actual look of the game. Please help me ! Thank you in advance.
-
Hello, where Is the best 3D no code game engine?
-
Hi I am trying to create a magnifying glass effect by leveraging the generate texture method of the renderer. I am generating a texture based on on the position of the mouse using the frame parameter. When combining with the pixi3d library the rotating cube it always stuck in the middle of the magnifying glass. The rest if the effect works as intended when there is no pixi3d elements on screen. The cube is a child of the overall scene and the lens effect is added outside of the main scene on a layer in front (using z index). updateSpriteTexture() { let reigon = new PIXI.Rectangle((this.getGlobalPosition(new PIXI.Point(this.x, this.y)).x -100), (this.getGlobalPosition(new PIXI.Point(this.x, this.y)).y -100), 200, 200); this.texture = this.app.renderer.generateTexture(this.targetScene, PIXI.SCALE_MODES.LINEAR, 2, reigon); } The above the method is the method that sets the sprite texture of the magnifying glass effect. `this.targetScene` is the container that contains the checkered background, the button and the rotating cube. Is there a step that I am missing?
-
I need help understanding how to use PixiJS through npm to run the example on the Docs Index page.
-
This is a strange one.I play a game called Defly.io and I'm trying to help the Developer sort an issue with the game. Once the game servers experience some stress the game begins to lag. This will ONLY happen in certain scenarios which have to be set up and easily replicated for this lagging issue to be applied. The kicker and what I'm most confused about is that in the exact same scenario where the game is lagging, all you have to do is open up the DevTools and boom, everything is fixed and lag free. What does the DevTools do to the webpage? Does it enable or disable anything? I am so confused. I've linked a video below of what happens in game; https://drive.google.com/file/d/115T6lwQXkgflF2ny-ZsKf28pcQqHwf49/view?usp=sharing https://drive.google.com/file/d/1F7StRStcynZh_YT2V0_LI5tVQEOIaQd9/view?usp=sharing Any help with this would be massively appreciated. Kind Regards,
-
So I was fallowing along an online tutorial phaser-101-introduction-to-game-development and I just can't get my game to appear. The error is Failed to load resource: the server responded with a status of 404 (Not Found) The tutorial said it HAD to be on a web site you built or whatever to get it to load right so I made one and nothing the broken phaser game . Just not sure how its not reading it I downloaded everything into the right folders and have all the path names right. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome to Road Kill Candy's Games</title> <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=JSM1EvLROPX115ml3uJbdZZ-lwwpEqPUC2arVNOQbbGahJ1RiZ8YWfXBj7TZ_E-MoEEEFjmFPyuFom0EN7r95ZXWq76bQYINoAUdkEjhwZw" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="http://gc.kis.v2.scr.kaspersky-labs.com/E3E8934C-235A-4B0E-825A-35A08381A191/abn/main.css?attr=aHR0cDovL3JvYWRraWxsY2FuZHkuYXR3ZWJwYWdlcy5jb20vaW5kZXgyLmh0bWw"/><style> canvas { width: 100%; } </style> </head> <body> <script src="">js/phaser.js</script> <script src="">js/game.js</script> </body> <center> <a href="index.html"> Back</a></center> <br> <center> <a href="https://mrskaiba.wixsite.com/nerdyglamor"> <img src="/assets/saturnd.png"></a><br><br> You have to enable JavaScript in the Bowser to play </center> </html> and the game code looks like / create a new scene let gameScene = new Phaser.Scene('Game'); // load assets gameScene.preload = function(){ // load images this.load.image('background', 'assets/background2.png'); this.load.image('player', 'assets/player2.png'); this.load.image('player', 'assets/dragon2.png'); this.load.image('player', 'assets/treasure2.png'); }; // called once after the preload ends gameScene.create = function() { // create bg sprite let bg = this.add.sprite(0, 0, 'background'); // change the origin to the top-left corner //bg.setOrigin(0,0); // place sprite in the center bg.setPosition(640/2, 360/2); let gameW = this.sys.game.config.width; let gameH = this.sys.game.config.height; console.log(gameW, gameH); console.log(bg); console.log(this); }; // create the player this.player = this.add.sprite(70, 180, 'player'); // we are reducing the width by 50%, and we are doubling the height this.player.setScale(0.5); // create an enemy this.enemy1 = this.add.sprite(250, 180, 'enemy'); this.enemy1.scaleX = 2; this.enemy1.scaleY = 2; // this is called up to 60 times per second gameScene.update = function(){ //this.enemy1.x += 1; this.enemy1.angle += 1; // check if we've reached scale of 2 if(this.player.scaleX < 2) { // make the player grow this.player.scaleX += 0.01; this.player.scaleY += 0.01; }; // check if we've reached scale of 2 if(this.player.scaleX < 2) { // make the player grow this.player.scaleX += 0.01; this.player.scaleY += 0.01; // create a second enemy this.enemy2 = this.add.sprite(450, 180, 'enemy'); this.enemy2.displayWidth = 300; // flip this.enemy1.flipX = true; this.enemy1.flipY = true; // set the configuration of the game let config = { type: Phaser.AUTO, // Phaser will use WebGL if available, if not it will use Canvas width: 640, height: 360, scene: gameScene }; // create a new game, pass the configuration let game = new Phaser.Game(config); -
Hiya! First time poster and new to phaser. Im working on making a screen fade in when the scene starts, wait a few seconds, then fade out. After the fade out I want it to fade in a new scene. I tried doing some research and I have no idea how to make the scene fade in when the scene starts then fade out after a few seconds. Any solutions?
-
Hi there folks! It's been a while since I posted something in here, glad to be back! I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi. I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: https://jsfiddle.net/gustavgb/anxcjfof/5/ I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line. I'd appreciate any help, as I'm quite new to Pixi Thank you!
-
Hello pixijs forum and devs. I´m currently working on a multiplayer 2d Game. Problem: I'm using pivot for main game scene to follow the Player (in center) everything works okay when i have resolution at 1. -- Thanks for every reply, my english is not very well so ill try to explain throu the photos &code I'll attach some photos to show u my problem PIXIJS Inspector: - Pivot point does not scale properly with resolution. My code for resize and App I have my app declared here as static export class Game { //Create a Pixi Application public static app:any = new PIXI.Application({ antialias: false, // default: false transparent: false, // default: false autoDensity: true, autoResize: true, resolution: window.devicePixelRatio, }); // Resolution & Camera public static WIDTH:number = 728; public static HEIGHT:number = 540; I have own container which contain Game (everything expect UI) dynamic content Game.scene /** Game -> Dynamic container */ public static scene:any = new PIXI.Container(); public static init():void { // Initialize Display.Stage (Layers support) Game.app.stage = new PIXI.display.Stage(); Game.app.stage.addChild(Game.scene); Game.resize(); // call resize funct. .... Game.app.renderer.render(Game.app.stage); } // i took those function from Pixi Forum /* Helper function to resize the game to fit the full screen */ public static resize():void { const WIDTH:number = Game.WIDTH; const HEIGHT:number = Game.HEIGHT; const vpw:number = window.innerWidth; // Width of the viewport const vph:number = window.innerHeight; // Height of the viewport let nvw:number; // New game width let nvh:number; // New game height // The aspect ratio is the ratio of the screen's sizes in different dimensions. // The height-to-width aspect ratio of the game is HEIGHT / WIDTH. if (vph / vpw < HEIGHT / WIDTH) { // If height-to-width ratio of the viewport is less than the height-to-width ratio // of the game, then the height will be equal to the height of the viewport, and // the width will be scaled. nvh = vph; nvw = (nvh * WIDTH) / HEIGHT; } else { // In the else case, the opposite is happening. nvw = vpw; nvh = (nvw * HEIGHT) / WIDTH; } // Set the game screen size to the new values. // This command only makes the screen bigger --- it does not scale the contents of the Game. // There will be a lot of extra room --- or missing room --- if we don't scale the scene. Game.app.renderer.resize(vpw, vph); // This command scales the scene to fit the new size of the Game. let zoom = Camera.activeCamera ? Camera.activeCamera.zoom : 1; Game.scene.scale.set(zoom * (nvw / WIDTH), zoom * (nvh / HEIGHT)); Game.scene.filterArea = new PIXI.Rectangle(0,0, vpw, vph) } export class Camera { .... public static updateView() { if (Camera.activeCamera) Game.scene.pivot.set(Camera.activeCamera.position.x, Camera.activeCamera.position.y); } public setFocus(obj:any):void { this._cameraFocus = obj.position; } // On Update / GameLoop Camera.activeCamera.setPosition(Camera.activeCamera._cameraFocus.x, Camera.activeCamera._cameraFocus.y); ... } Camera.activeCamera._cameraFocus.x is bounded to (referenced) container position - For some reason pivoting player position (container) is not centering container to the middle if resolution is higher. in PlayerInit i have Game.camera.setFocus(this.container) -- My HTML Viewport is: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
- 12 replies
-
- 2
-
-
- solved
- resolution
- (and 1 more)
-
How can I load giant Tiled maps in Phaser? I have a .json map which is 2048x2048 tiles, and each tile is 64x64 pixels. Is there a way to load/unload chunks of it? I tried ths article but the splitter tool doesn't do anything. I think my map is too large for it.
-
So I am working on my just general knowledge of how phaser works, I have only done two tutorials. But I think I have a decent grasp on it so far. But I am running into a little problem, I am trying to use the Follower object, so that I don't have to create the vec2 and attach it, but I don't seem to understand the documentation or what it means by "If this Game Object is enabled for physics then this property will contain a reference to a Physics Body." I have scoured the docs for hours. I see how to 'enable' in arcade physics but I cannot find any reference to how with impact physics. I am able to create a body object, and assign it to the game object, as well as assign the the game object to the body, but they do not move in tandem. in fact the body does not move at all. P.S. This is not the only bug, when converting from matter.js to impact.js physics my logic on pausing player movement when the dialog modal broke. but one problem at a time.. P.P.S I know its not the best code //SHIVA path3 = new Phaser.Curves.Path(550, 450); path3.lineTo(450, 450); path3.lineTo(450, 505); path3.lineTo(550, 505); path3.lineTo(550, 450); path3.lineTo(450, 450); shiva = this.add.follower(path3, 550, 450, 'shiva'); //Phaser.GameObjects.BuildGameObject(this, Phaser.GameObjects.PathFollower) //this.game.physics.enable(shiva, impact); shivaBody = this.impact.add.body(550, 450, 16, 12); //TRYING DIFFERENT WAS TO SET BODY //shivaBody.setOffset(550, 450, 16, 12); shiva.body = shivaBody; shivaBody.setGameObject(shiva); shiva.name = "shiva"; shiva.setRotation(); shiva.depth = 30; //ALT WAY TO GET NAME //shiva.name = "shiva"; shiva.setData(npc, true); shiva.setData("name", "shiva"); npcBodies[2] = shivaBody; npcs.add(shiva); shiva.startFollow({ ease: 'Linear', duration:6000, yoyo:true, repeat: -1, _delay: 200, delay: 100 }); P.P.P.S I also tried this.physics.world.enable(shiva); this.impact.world.enable(shiva); dialog_plugin.js game.js index.html city.json
-
Hello, I am trying to use the Pixi.js example for mouse trails, and I wanted to spice it up with switching up the mouse trail every time I click a button Here is the HTML <!doctype html> <html> <head> <style> body{ margin: 0; } </style> </head> <body> <button id = "trailSwap">Swap Trail Color</button> <script src="pixi.js"></script> <script src="mouse-trail.js"></script> <script type="text/javascript"> </script> </body> </html> And here is the Javascript that I changed, the actual following and functionality of the trail works perfectly, however the actual act of switching between the trails doesn't. var app = new PIXI.Application({ backgroundColor: 0x1099bb }); document.body.appendChild(app.view); var bol = false; var swap = document.getElementById("trailSwap"); var picture = 0; let trailTexture = PIXI.Texture.from('pic/trail0.png'); var historyX = []; var historyY = []; var historySize = 20; var ropeSize = 1000; var points = []; // Create history array. for (let i = 0; i < historySize; i++) { historyX.push(0); historyY.push(0); } // Create rope points. for (let i = 0; i < ropeSize; i++) { points.push(new PIXI.Point(0, 0)); } // Create the rope let rope = new PIXI.SimpleRope(trailTexture, points); // Set the blendmode rope.blendmode = PIXI.BLEND_MODES.ADD; app.stage.addChild(rope); rope.interactive = true; rope.buttonMode = true; swap.addEventListener('click', onClick); function onClick(){ alert("here"); bol = !bol; if (bol){ let trailTexture = PIXI.Texture.from('pic/trail1.png'); } else{ let trailTexture = PIXI.Texture.from('pic/trail0.png'); } let rope = new PIXI.SimpleRope(trailTexture, points); alert("here again"); } The rest of the code isn't important to this as it is just making the trail smooth and follow the mouse properly. Any help would be splendid. Thank you!
-
I am creating a game and want user logins. I am using Node, socket, and MySQL. What do I need so that when a user log's in they don't need to login again?
-
Hi all, I have made a game where once the player reaches the end of it a new level should start but I'm not sure how to do this? I have set up multiple states such as a boot, load, game, main menu and the actual game. Is it possible to set up a state so that will switch to level 2 once the goal is reached? Here is my code for reference, any help is appreciated : (the win state takes the player to a menu that congratulates them, this is where I want the player to press a key and the next level can be loaded) //this game will have only 1 state var music; var score = 0; var scoreString = ''; var scoreText; var playState = { //initiate game settings init: function () { //adapt to screen size, fit all the game this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = 1000; this.cursors = this.game.input.keyboard.createCursorKeys(); this.game.world.setBounds(0, 0, 360, 700); this.RUNNING_SPEED = 180; this.JUMPING_SPEED = 550; }, //executed after everything is loaded create: function () { this.sfx ={ jump : this.add.audio('jump'), coin: this.game.add.audio('coin') }; music = game.add.audio('lvl1'); music.play(); //Score scoreString = 'Score : '; scoreText = game.add.text(175, 55, scoreString + score, { font: '34px Arial', fill: '#fff' }); scoreText.fixedToCamera = true; this.ground = this.add.sprite(0, 638, 'ground'); this.game.physics.arcade.enable(this.ground); this.ground.body.allowGravity = false; this.ground.body.immovable = true; //Parse the file this.levelData = JSON.parse(this.game.cache.getText('level1')); this.platforms = this.add.group(); this.platforms.enableBody = true; this.levelData.platformData.forEach(function (element) { this.platforms.create(element.x, element.y, 'platform') }, this); this.platforms.setAll('body.immovable', true); this.platforms.setAll('body.allowGravity', false); //fires this.fires = this.add.group(); this.fires.enableBody = true; var fire; this.levelData.fireData.forEach(function (element) { fire = this.fires.create(element.x, element.y, 'fire'); fire.animations.add('fire', [0, 1], 4, true); fire.play('fire'); }, this); this.fires.setAll('body.allowGravity', false); //coins this.coins = this.add.group(); this.coins.enableBody = true; var coin; this.levelData.coinData.forEach(function (element) { coin = this.coins.create(element.x, element.y, 'coin'); coin.animations.add('coin', [0, 1, 2, 3], 8, true); coin.play('coin'); }, this); this.coins.setAll('body.allowGravity', false); //goal this.goal = this.add.sprite(this.levelData.goal.x, this.levelData.goal.y, 'goal'); this.game.physics.arcade.enable(this.goal); this.goal.body.allowGravity = false; //create player this.player = this.add.sprite(10, 545, 'player', 3); this.player.anchor.setTo(0.5); this.player.animations.add('walking', [0, 1, 2, 1], 6, true); this.game.physics.arcade.enable(this.player); this.player.body.collideWorldBounds = true; this.game.camera.follow(this.player); this.barrels = this.add.group(); this.barrels.enableBody = true; this.createBarrel(); this.barrelCreator = this.game.time.events.loop(Phaser.Timer.SECOND * this.levelData.barrelFrequency, this.createBarrel, this); }, update: function () { scoreText.bringToTop(); this.game.physics.arcade.collide(this.player, this.ground); this.game.physics.arcade.collide(this.player, this.platforms); this.game.physics.arcade.collide(this.barrels, this.ground); this.game.physics.arcade.collide(this.barrels, this.platforms); this.game.physics.arcade.overlap(this.player, this.coins, this.collectCoin,null,this); this.game.physics.arcade.overlap(this.player, this.fires, this.killPlayer); this.game.physics.arcade.overlap(this.player, this.barrels, this.killPlayer); this.game.physics.arcade.overlap(this.player, this.goal, this.win); this.player.body.velocity.x = 0; if (this.cursors.left.isDown) { this.player.body.velocity.x = -this.RUNNING_SPEED; this.player.scale.setTo(1, 1); this.player.play('walking'); } else if (this.cursors.right.isDown) { this.player.body.velocity.x = this.RUNNING_SPEED; this.player.scale.setTo(-1, 1); this.player.play('walking') } else { this.player.animations.stop(); this.player.frame = 3; } if (this.cursors.up.isDown && this.player.body.touching.down) { this.sfx.jump.play(); this.player.body.velocity.y = -this.JUMPING_SPEED; } this.barrels.forEach(function (element) { if (element.x < 10 && element.y > 600) { element.kill(); } }) }, collectCoin:function(player, coin){ // Increase the score score += 20; scoreText.text = scoreString + score; this.sfx.coin.play(); coin.kill(); }, killPlayer: function (player, fire) { score = 0; music.stop(); game.state.start('die'); }, win: function (player, goal) { game.state.start('won'); music.stop(); }, createBarrel: function () { //Give me the first dead sprite var barrel = this.barrels.getFirstExists(false); if (!barrel) { barrel = this.barrels.create(0, 0, 'barrel'); } barrel.body.collideWorldBounds = true; barrel.body.bounce.set(1, 0); barrel.reset(this.levelData.goal.x, this.levelData.goal.y); barrel.body.velocity.x = this.levelData.barrelSpeed; } };
-
Hi! So I'm working on a 2D space shooter type of game and am trying to get a parallax background thing going. But I'm having trouble getting the math right. You can see my work in progress here: https://www.youtube.com/watch?v=Pea9yVbTD64 As stated in the video everything works if the players x and y are positive, but breaks when they are negative, and I can't figure out what I am doing wrong. Any help would be greatly appreciated. Or perhaps there is a better way to accomplish this? What I'm doing is randomly generating out a bunch of the Sprites, and then updating their position with this code. _Nebulas: is Array<NebulaParticle> which is listed below as well. p.distance: is a number between 1 and 5 to signify how far away the sprite is and is used to make them move slower when they are furher away. _Width and _Height are both arbitrary numbers to signify how big the area is that the parallax should cover, in the video they are both set to 80. OriginalOffsetX/Y is the original random position the Sprite was given. public update(delta: number, playerx: number, playery: number) { console.log(playerx + ", " + playery ); for (let i = 0; i < this._Nebulas.length; i++) { let p = this._Nebulas[i]; p._Sprite.x = (playerx + (this._Width / 2)) - (((playerx / p.distance) + p.OriginalOffsetX) % this._Width); p._Sprite.y = (playery + (this._Width / 2)) - (((playery / p.distance) + p.OriginalOffsetY) % this._Height); } } class NebulaParticle { public _Sprite: Phaser.GameObjects.Sprite; public OriginalOffsetX: number; public OriginalOffsetY: number; public distance: number; } Thank you very much.
-
I am adding overlap in create function for bullets group and enemy1 sprite. I try many different variations but it either does not worked or throwed an error. this.physics.add.overlap(enemy1, bullets, killEnemy, null, this); function killEnemy(enemy1, bullet){ enemy1.visible = false; enemy1.active = false; }
-
Well, I´m a noob creating games and stuff but currently I'm developing a 2D game. I've designed my principal character but the original images of it are quite big and I need to change its size to add the character to the game. The original images are like 560px x 400px and I need to reduce it to 27px x 20px. How can I do that? I tried this but its useless var character create function() { character = game.add.sprite(100, 150, "main"); character.anchor.setTo(0.5); character.style.width = "27px"; character.style.height = "20px"; I´ll be really grateful if you could help me. ?
-
How do I use the license when creating my games? I've read the license but I still don't understand what exactly I need to do to abide by the license. How should I do this? -
i have issue in 3d analog clock i have export 3d watch from blender everything done just need to work on clock function my also fucntion is also done but its not working like clock please check the video and help me out and i have this code for clock function all Object piviot point is center but clock function not working perfectly please Check and help me out please scene.registerBeforeRender(function () { var date = new Date(); var hour = date.getHours() % 12; var minute = date.getMinutes() ; var second = date.getSeconds() ; hand_sec.rotation.y = (second/60.)*minute.*Math.PI/180.; hand_min.rotation.y = (minute/60.)*360.*Math.PI/180.; hand_hour.rotation.y = (hour/12.)*360.*Math.PI/180.; }); // this is code i have add but not working 0125.webm -
Hello Community, Can anyone help me to find out the best shader editor for Babylon, I had found that ShaderFrog provides shader editor but it is targetting another engine, I would like to add it for BabylonJS. Also please provide me some document reference to create a shader for WebGL, as I am a new learner for WebGL Shader and want to use in my App. -
Hi, I'm having trouble with browsers blocking popups. I know the rule is that it needs to be in response to a user action. Is this a bug with phaser? this.input.on('pointerdown', (pointer, targets) => { window.open('https://fb.gg/play/freeriderjumps', '_blank'); }); Thanks
-
Hello everyone, I have a project with Phaser and I'm stuck. I need your help. I have two layers (images) and I want to erase the first layer with the user's action (I do not want to destroy it). I have tried this with the masks but I do not know how to make the mask dynamically drawn by the player. I do not know if you understand me. I'm not good at English. Any clue how can I do this effect? I included an image.
-
I am currently using the Phaser project template located on Github. I tried to search online for a way to minify my game files, yet I've ran into pages that talk about using 'GruntJS'. I am currently not familiar with the javascript task runner. Can anyone give me links to tutorials on how to minify phaser games? Or can anyone post a detailed description on how to do so? I would appreciate it greatly.
-
phaser canvas maybe stop propagation as default so i can't use jqueryUI draggable over this parent div, please help.
-
Hello, Here I would like to know how to do, to make the effect of a torch on fire on Phaser, in the genre we see only 10 cm around and the rest of the room is black? Sincerely and thank you
