Search the Community

Website Link I have been learning PixiJs for some time now, and recently I wanted to put everything I learned into one small project to deepen my understanding of it. And it happened that I was playing the great game "Night in the Woods", so I decided to make a 2D side-scroller web app with the same feel and look of the game and can be used as the game promotional website. As I said earlier, I am not experienced in Pixi.js, so there has been many obstacles and TONS of refactoring along the way. Initially, I started building the app with vanilla JavaScript, then it became clear that TypeScript would be a much better option. Finding the appropriate project structure proved to be a much harder thing than I thought it would be, and I wished that there was some general structure or "template" online that I could have used as the base for my project. In the beginning, I thought about using a proper game engine ( as Phaser ) instead of the more general purposed rendering engine Pixi.Js, but I continued with it because I wanted to have a deeper understanding about the basics and lower-level stuff, then I may go to a full games engine. It was very hard at times, and many basic features are not implemented ( like multi-animations sprite ), but at the same time it was very informative ( and fun ). I uploaded the project code on Github for anyone interested: Github Repo I would love to hear your feedback and opinions.

Hi, I am working on my first 2D game with phaser 3. I have set up vscode with node https server and running it to deploy the game on localhost. While the game gets compiled successfully and deployed I get a run time error when executing the collider and overlap function. For the time being I have a title screen with "welcome to my game" text and it is clickable. One you click that you are navigating to play scene. When naigating to play scene I am getting the error displayed in the following scrren shot. I suspect that this is caused by 'this' keyword and the scope of it. But I have no idea how to fix that. I spent 2-3 hours debugging and playing with 'this.' here and there but I am still clueless as to how I can fix this and what I did wrong. I have added my code below as well. Any help will be greatly appriciated. The comment " //Error on "is parent undefined" " is added to mark the lines I get the error. import Phaser from 'phaser'; class PlayScene extends Phaser.Scene { constructor() { super('PlayScene'); } create() { var player; var stars; var bombs; var bomb; var platforms; var cursors; var score = 0; var gameOver = false; var gameOverText; var scoreText; var leftKey; var rightKey; var upKey; var repeatStarCount; this.add.image(400, 300, 'sky'); platforms = this.physics.add.staticGroup(); platforms.create(390, 568, 'ground1'); platforms.create(750, 200, 'ground2'); platforms.create(0, 150, 'ground4'); platforms.create(690, 420, 'ground4'); platforms.create(100, 320, 'ground4'); player = this.physics.add.sprite(100, 450, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); player.setScale(0.15); player.setSize(300, 400, false); player.body.offset.y = 0; player.body.offset.x = 0; // Input Events this.cursors = this.input.keyboard.createCursorKeys(); this.leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT); this.rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT); this.upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP); // player animations this.anims.create({ key: 'LeftRun', frames: this.anims.generateFrameNumbers('dude', { start: 14, end: 17 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'LeftJump', frames: [{ key: 'dude', frame: 13 }], frameRate: 10, repeat: -1 }); this.anims.create({ key: 'LeftIdle', frames: this.anims.generateFrameNumbers('dude', { start: 9, end: 10 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'LeftDizzy', frames: this.anims.generateFrameNumbers('dude', { start: 10, end: 11 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'RightRun', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'RightJump', frames: [{ key: 'dude', frame: 4 }], frameRate: 10, repeat: -1 }); this.anims.create({ key: 'RightIdle', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 1 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'RighttDizzy', frames: this.anims.generateFrameNumbers('dude', { start: 2, end: 3 }), frameRate: 10, repeat: -1 }); // Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis repeatStarCount = 10; this.stars = this.physics.add.group({ key: 'star', repeat: repeatStarCount, setXY: { x: 8, y: 0, stepX: 50 }, setScale: { x: 0.05, y: 0.05 } }); this.stars.children.iterate(function(child) { child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); }); this.bombs = this.physics.add.group(); var style = { font: "30px Arial", fill: "#ffff00", stroke: "#535353", align: "center", strokeThickness: 15, }; var style1 = { font: "40px Arial", fill: "#ffff00", stroke: "#535353", align: "center", strokeThickness: 15, }; scoreText = this.add.text(0, 0, "Score: 0", style); gameOverText = this.add.text(300, 250, "Game Over", style1); gameOverText.visible = false; // Collide the player and the stars with the platforms this.physics.add.collider(player, platforms); this.physics.add.collider(stars, platforms); this.physics.add.collider(bombs, platforms); //Error on "is parent undefined" this.physics.add.overlap(player, stars, () => { star.disableBody(true, true); // Add and update the score score += 10; scoreText.setText('Score: ' + score); if (stars.countActive(true) === 0) { repeatStarCount = +3; // A new batch of stars to collect stars.children.iterate(function(child) { child.enableBody(true, child.x, 0, true, true); }); var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400); var bomb = bombs.create(x, 16, 'bomb'); bomb.setBounce(1); bomb.setCollideWorldBounds(true); bomb.setVelocity(Phaser.Math.Between(-200, 200), 20); bomb.allowGravity = false; } }, null, this); //Error on "is parent undefined" this.physics.add.collider(player, bombs, () => { this.physics.pause(); if (player.anims.currentAnim.key === 'RightRun' || player.anims.currentAnim.key === 'RightIdle' || player.anims.currentAnim.key === 'RightJump') { player.anims.play('RighttDizzy'); } if (player.anims.currentAnim.key === 'LeftRun' || player.anims.currentAnim.key === 'LeftIdle' || player.anims.currentAnim.key === 'LeftJump') { player.anims.play('LeftDizzy'); } gameOver = true; let timer = this.time.delayedCall(500, () => { player.anims.stop(); gameOverText.visible = true; }, [], this); }, null, this); } update() { if (this.gameOver) { return; } if (this.cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('LeftRun', true); } else if (this.cursors.right.isDown) { player.setVelocityX(160); player.anims.play('RightRun', true); } else if (Phaser.Input.Keyboard.JustUp(this.leftKey)) { player.setVelocityX(0); player.anims.play('LeftIdle', true); } else if (Phaser.Input.Keyboard.JustUp(this.rightKey)) { player.setVelocityX(0); player.anims.play('RightIdle', true); } else if (Phaser.Input.Keyboard.JustUp(this.upKey) && player.anims.currentAnim != null) { if (player.anims.currentAnim.key === 'LeftJump') { player.anims.play('LeftIdle', true); } if (player.anims.currentAnim.key === 'RightJump') { player.anims.play('RightIdle', true); } } else if (this.cursors.up.isDown && player.anims.currentAnim != null) { if (player.anims.currentAnim.key === 'RightIdle') { player.anims.play('RightJump', true); if (player.body.touching.down) { player.setVelocityY(-350); } } if (player.anims.currentAnim.key === 'LeftIdle') { player.anims.play('LeftJump', true); if (player.body.touching.down) { player.setVelocityY(-350); } } } } } export default PlayScene;

I have finally launched my game Bullet Hell Reversal! It is launched at itch.io and I have spent countless of sleepless nights developing game and would mean a lot to me if you could give the game a try and rate it if you found it fun! Some small update logs are on the page if you are interested Thanks! Play the game HERE!

After the awesome cricket game "Cricket World Cup", Freak X Apps has come again with another Super cool cricket game "Street Cricket". "Street Cricket" is a casual game with cute graphics and sounds. In each round, you get a target, ball and wickets to start with. As soon the ball reaches you just tap to hit it. With the power bar, you can take the shots higher. More high power bar means more runs. It's Cricket time. Grab your bat and start hitting sixes. Check the demo of Street Cricket here - https://freakxapps.com/demo/me/street-cricket/ Contact for publishing games with Freak X Apps.

<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>M N B</title> <script src="js/phaser.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { var width = window.screen.width; var availwidth = window.screen.availWidth; var height = window.screen.height; var availheight = window.screen.availHeight; var textStyle = { font: "20px Arial", fill: "#ffffff"}; var game = new Phaser.Game(availwidth , availheight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { //game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('red','assets/red.png'); game.load.image('green','assets/green.png'); } function create () { game.stage.backgroundColor = "000000"; var graphics = game.add.graphics(0,0); graphics.lineStyle(1,0xffffff,1); var box_width = (availwidth/10)-5; var box_height = (availheight/10)-5; last_start = box_width*10; last_end = box_height*10; //draw vertical lines for(var i=0;i<=last_start;i+=box_width){ graphics.moveTo(i,0); graphics.lineTo(i,last_end); } //draw horizontal lines for(var j=0;j<=last_end;j+=box_height){ graphics.moveTo(0,j); graphics.lineTo(last_start,j); } } function update(){ } }; </script> </body> </html> When I run the above code, and emulate it in Google Nexus 7 using Intel XDK, it does not show the last horizontal line (image below) On the other hand, when I emulate it in Apple Ipad (image below), it shows the complete grid perfectly (even though I need to scroll down to see the last line) Ques 1: Why is the above difference coming? Ques 2: Why is there a scrollbar coming when I am scaling the content properly? Thanks in advance.

i am new to phaser framework. i start making a new game on notepad using phaser.min.js file but it shows nothing on browser no image no canvas. can anybody tell me whats the problem??