Search the Community

I'm trying to se my interaction mode to true so I can set my sprite to follow my cursor. I've managed to do this before i Added ES6 and webpack. Here is a code example: import * as PIXI from 'pixi.js'; // App with width and height of the page const app = new PIXI.Application({ width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAAA, }); document.body.appendChild(app.view); let player = new PIXI.Sprite.from('assets/dirt.png'); player.anchor.set(0.5); player.x = app.view.width / 2; player.y = app.view.height / 2; app.stage.addChild(player); const movePlayer = function (e) { let pos = e.data.global; player.x = pos.x; player.y = pos.y; } app.stage.interactive = true; app.stage.on("pointermove", movePlayer); Console screenshot: https://i.imgur.com/w4fAcb9.png I think that the problem may be related to webpack somehow ;(

Hello everyone, currently I'm developing a small game and I want to have multiple animation sets from the same sprite sheet, they're done with aseprite. I've implemented a simple loader (in typescript), which loads all the sprite stuff correctly (json atlas), but when generating the animations it stops working if I specify the start and end properties of the configuration object, for the Scene::anims#generateFrameNames(string, object) method. Note that the error is thrown when using the animation, not when creating it! Also anim comes from a valid array of objects (As they work when not using "tags"). Animation.js:1006 Uncaught (in promise) TypeError: Cannot read property 'frame' of undefined at Animation.setCurrentFrame (Animation.js:1006) at Animation.updateFrame (Animation.js:1041) at Animation.load (Animation.js:509) at AnimationManager.load (AnimationManager.js:438) at Animation.load (Animation.js:420) at Animation._startAnimation (Animation.js:583) at Animation.play (Animation.js:530) at Sprite.play (Sprite.js:136) at TestDamages.eval (TestDamages.ts:84) at step (TestDamages.ts:45) Code examples (note that it's written in Typescript 3, but the language is not supported) This works so far: export class SampleLoad { /** * Loads the animation object. */ private readonly loadAnimation = (anim: any) => { this.anims.create({ ...anim, frames: this.anims.generateFrameNames(anim.frames) }); }; } However, adding "Tag detection" feature does not, and I'm ensured (Tested so far) that the tag will contain two valid values for tag.from and tag.to: export class SampleLoad { /** * Loads the animation object. */ private readonly loadAnimation = (anim: any) => { const { meta } = this.cache.json.get('json@' + anim.frames); let cfg: any; const tag = meta.frameTags.find((s: any) => s.name === anim.tag); if (tag && tag.from !== tag.to) { cfg = { start: tag.from, end: tag.to }; console.log('Tag found', tag, cfg, anim); } this.anims.create({ ...anim, frames: this.anims.generateFrameNames(anim.frames, cfg) }); }; } Thanks for your help! PD: The syntax highlight is quite broken, sorry for that...

I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble? var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} }; var game = new Phaser.Game(config); function preload () { this.load.image('freeplayBG', 'images/freeplay-BG.png'); this.load.image('shark', 'images/nice-shark.png'); this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} ); } function create() { //Set background this.add.image(685, 384, 'freeplayBG'); //Set shark and make draggable var shark = this.add.sprite(200, 300, 'shark').setInteractive(); this.input.setDraggable(shark); this.input.dragDistanceThreshold = 16; this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); //create the bubble sprite var bubble = this.add.sprite(700, 300, 'bubblePop'); console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …} console.log(bubble.animations); // undefined console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …} bubble.animations.add('pop'); //error happens here bubble.animations.play('pop', 10, false, true);

hi guys, i have updated my pixi from 4.3.5 to 4.5.1, and I found there is a little change in touch event onTouchStart(e) { console.log(e.data.originalEvent.touches); // before originalEvent is TouchEvent so it has touches // new version originalEvent change to PointerEvent which does not have touches } somehow the originalEvent change from TouchEvent to PointerEvent which does not have touches, I used to detect touches to prevent multiple touches, so I have two question 1. what cause this change? 2. is there any other efficient way to limit the touches on my game, in my case, I only hope 1 touch exist at the same time? thanks to your help

Say I have a simple class: class SimpleGame { game: Phaser.Game; myColor: Phaser.Color; constructor() { this.myColor = Phaser.Color.createColor(255,255,0); this.game = new Phaser.Game(1200, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create}); } preload(){ this.game.load.image("platform", "Graphics/platform.png"); } create() { console.log(this.myColor); } } window.onload = () => { var game = new SimpleGame(); }; The console always prints/returns undefined and if I try to modify the value of myColor, it brings up an error. Can the create method not access class properties? What have I done wrong here? Thanks

The previous time I worked on this project it would load no problem within the browser, now I get the error Uncaught TypeError: Cannot read property 'x' of undefined and it says it's coming from phaser.min.js:24 which isn't making sense to me. var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV); this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32); this.game.load.spritesheet('player', 'assets/penguin.png', 32,48); } var cursors; //var snowballs; //var sTime = 0; //var fireButton; function create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); cursors = game.input.keyboard.createCursorKeys(); this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('snow_tiles_32', 'tiles'); this.game.stage.backgroundColor = '#80e3ff'; this.ground = this.map.createLayer(0); this.ground.resizeWorld(); this.game.slopes.convertTilemapLayer(this.ground,{ 1: 'FULL', 2: 'FULL', 3: 'FULL', 4: 'FULL', 5: 'FULL', 6: 'FULL', 7: 'FULL', 8: 'FULL', 9: 'HALF_TOP', 10: 'FULL', 12: 'FULL', 13: 'HALF_BOTTOM_LEFT', 14: 'HALF_BOTTOM_RIGHT', 15: 'HALF_BOTTOM_LEFT', }); this.map.setCollisionBetween(1, 34, true, 0); //player this.player = this.game.add.sprite(100, 50, 'player'); this.game.physics.arcade.enable(this.player); this.player.body.slopes = {sat: {response: 0}}; // workaround for a phaser bug this.game.slopes.enable(this.player); this.player.body.slopes.preferY = true; // stops the player sliding down slopes this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 700; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true); //this.snowballs = game.add.group(); //this.snowballs.enableBody = true; //this.snowballs.physicsBodyType = Phaser.Physics.ARCADE; //this.snowballs.createMultiple(1, 'snowball'); //this.snowballs.setAll('anchor.x', 0.5); //this.snowballs.setAll('anchor.y', 1); //this.snowballs.setAll('outOfBoundsKill', true); //this.snowballs.setAll('checkWorldBounds', true); //this.fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.game.slopes.enable(this.player); this.game.camera.follow(this.player); } function update() { this.game.physics.arcade.collide(this.player, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150; this.player.animations.play('right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && (this.player.body.onFloor() || this.player.body.touching.down)){ this.player.body.velocity.y = -350; } //if(fireButton.isDown){ //this.fireSnowball(); //} //} //function fireSnowball(){ //if(game.time.now > sTime){ //this.snowball = snowballs.getFirstExists(false); //if(snowball){ // this.snowball.reset(player.x+30, player.y+30); //this.snowball.body.velocity.x = 400; //this.sTime = game.time.now = 10; // } //} } Test Game Phaser2.rar

Hello all, I'm trying to programmatically create a cylinder using the following: var cylinder = BABYLON.MeshBuilder.CreateCylinder("wormhole", {diameter: 1, tessellation: 24}, this.resourceStore["GameScene"]); cylinder.position = BABYLON.Vector3(-0.56, 1.27, 1.235); and it is throwing a TypeError: e is undefined with the following trace: o</i.prototype.copyFrom() babylon-2.4.min.js:1 t</i.prototype.computeWorldMatrix() babylon-2.4.min.js:6 o</i.prototype._evaluateActiveMeshes() babylon-2.4.min.js:10 o</i.prototype._renderForCamera() babylon-2.4.min.js:11 o</i.prototype._processSubCameras() babylon-2.4.min.js:11 o</i.prototype.render() babylon-2.4.min.js:11 GameManager.prototype.initialize/</textTask.onSuccess</<() GameManager.js:191 bound () self-hosted c</o.prototype._renderLoop() babylon-2.4.min.js:4 bound () self-hosted Any ideas? Everything works fine (i.e. scene loads, textures show, materials work, controls work). I have noticed lately that my textures seem to disappear at a particular camera but the geometry is still there. Not sure if its related.

Hello, I have the following error when I try to clone an object. Uncaught TypeError: Cannot set property 'references' of null What can I do? Why does this happen? Best regards Kevin

I'm trying to detect collisions between sprites within the same group and use the callback function to turn them immovable: game.physics.arcade.collide(platforms, platforms, makeImmovable(), null, game); function makeImmovable(piece1, piece2){ piece1.body.immovable=true; //CRASHING HERE piece2.body.immovable=true; } It's crashing with a "Uncaught TypeError: Cannot read property "body" of undefined" on the commented line. What could it be?

Hi everybody! I have a problem with a loop in my game. The problem is this: I have a loop that after certain seconds it executes and generates some sprites in the game (it takes it from a group), it works fine the first time. But after the specified seconds pass and the loop executes again it throws me this error: "Uncaught TypeError: Cannot read property 'apply' of undefined" Here's the Code (there are 3 loops in total, but for the example i just focused in the first). /Creation of the fire traps this.fireballs = game.add.group(); this.fireballs.createMultiple(100, 'fireball'); this.fireballs.callAll('animations.add', 'animations', 'shoot', [0,1,2,3], 16, true); game.physics.arcade.enable(this.fireballs); this.fireballs.enableBody = true; //Multiple Fire traps this.loop1 = game.time.events.loop(2000, this.activateMultipleFireTraps('1'), this); //this.loop2 = game.time.events.loop(4000, this.activateMultipleFireTraps(2), this); //this.loop3 = game.time.events.loop(6000, this.activateMultipleFireTraps(3), this); activateMultipleFireTraps: function(position){ if(position == '1'){ var firePositions = [[528, 7488], [528, 7360], [528, 7232], [528, 7088]]; var index = 0; for(index = 0; index < firePositions.length; index++){ var fire = this.fireballs.getFirstDead(); fire.anchor.setTo(0.5); fire.scale.setTo(0.5); fire.scale.x = -1; fire.reset(firePositions[index][0], firePositions[index][1]); fire.body.velocity.x = -150; fire.animations.play('shoot'); } } else if(position == 2){ var firePositions = [[0, 7552], [0, 7424], [0, 7296], [0, 7168]]; var index = 0; for(index = 0; index < firePositions.length; index++){ var fire = this.fireballs.getFirstDead(); fire.anchor.setTo(0.5); fire.scale.setTo(0.5); fire.scale.x = 1; fire.reset(firePositions[index][0], firePositions[index][1]); fire.body.velocity.x = 150; fire.animations.play('shoot'); } } else{ var firePositions = [[112, 7040], [256, 7040], [400, 7040]]; var index = 0; for(index = 0; index < firePositions.length; index++){ var fire = this.fireballs.getFirstDead(); fire.anchor.setTo(0.5); fire.scale.setTo(0.5); fire.scale.y = -1; fire.reset(firePositions[index][0], firePositions[index][1]); fire.body.velocity.y = 150; fire.animations.play('shoot'); } } }, I dont know why it doesnt work. Thanks!

Hello, I encountered an error in "RenderingGroup.prototype.dispatch = function (subMesh)". This occured when I tried to activate shadows on a mesh. "material" is undefined in this case and produces an "needAlphaBlending of undefined" error.

Hello, this is my first topic on this board. I'm coding a simple BreakOut clone in TypeScript. My app consists of a main BreakOut class and the instances for Ball, Paddle and the canvas context. BreakOut.ts /** * Created by Nomid on 20/01/2016. */ /// <reference path="GameObject.ts"/> /// <reference path="Ball.ts"/> /// <reference path="Paddle.ts"/> /// <reference path="Direction.ts"/> /// <reference path="Sprite.ts"/> /// <reference path="Key.ts"/> class BreakOut { Ball : Ball; Paddle : Paddle; private pressed_keys : { [keycode: number] : boolean }; update(time: number): void { this.context.fillStyle = "red"; this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height); this.Ball.update(time); this.Paddle.update(time, this.pressed_keys); } updateKeys(E: KeyboardEvent) { this.pressed_keys[E.which || E.keyCode] = !this.pressed_keys[E.which || E.keyCode]; } constructor(public context: CanvasRenderingContext2D) { this.Ball = new Ball(context); this.Paddle = new Paddle(context); this.pressed_keys = []; window.addEventListener("keypress", this.updateKeys); window.addEventListener("keyup", this.updateKeys); } } It compiles without errors, but when I run it, these errors appear: BreakOut is initialized as follows: // jQuery 2.2.0 $(document).ready(function() { var Canvas = $("<canvas/>") .attr("width", window.innerWidth) .attr("height", window.innerHeight) .appendTo("body"); window.Game = new BreakOut(Canvas[0].getContext("2d")); window.requestAnimationFrame(Game.update); }); Thank you for helping me.

Hey, I currently develop a simple game with Phaser and Javascript for a student project . I have added a "start screen" and now an error message "TypeError: an is undefined" pops up by calling the first state . It's located in the file "phaser. min. js". I already have tried to exchange this by another "phaser. min. js" file, but it still gets the mistake. Does somebody know advice? The attached file contains the js code of the first state. state1.txt

I'm using phaser to make a game to have some fun and im almost finishing the game but i came across a problem thats i breaking the game and honestly i cannot fix it. I'm making a sort of Flappy Bird game to start out, and when the walls pass the screen i remove them this.walls.forEachAlive(function(wall) { if(wall.x + wall.width < game.world.bounds.left) { wall.destroy(); } });but it gives me the error: Uncaught TypeError: Cannot read property 'forEachAlive' of undefined. Any tips? thank you!

Hi, I'm new in babylon.js (and the others 3d frameworks). A moment ago I exported scene from *.obj to *.babylon. Now I'm trying to load it, but im getting error: My simple code: if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load("", "/~patrol/objects/maps/city/scene.babylon", engine, function (newScene) { // Wait for textures and shaders to be ready newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { newScene.render(); }); }); }, function (progress) { // To do: give progress feedback to user }); }

I'm working on a game and need help with an error (Uncaught TypeError: Cannot set property 'frame' of undefined) that appears when I run code inside a function. Here's the full game code, with the error at line 60: function getRandom(min, max) { return Math.floor((Math.random() * (max - (min - 1))) + min);}var game = new Phaser.Game(480, 360, Phaser.AUTO, '', { preload: preload, create: create, update: update });var colorPosition = [0, 1, 2, 3];function preload() { game.stage.disableVisibilityChange = true; game.stage.backgroundColor = '#393837'; game.load.image('collide', 'assets/collide.png'); game.load.spritesheet('bucket-front', 'assets/bucket-front.png', 112, 82, 4); game.load.spritesheet('square', 'assets/square.png', 20, 20, 4); game.load.image('arrow', 'assets/arrow.png'); game.load.spritesheet('bucket', 'assets/bucket.png', 112, 82, 4);}function create() { collide = game.add.sprite(0, 317, 'collide'); game.physics.enable(collide, Phaser.Physics.ARCADE); arrow = game.add.sprite(175, 230, 'arrow'); for (var x = 0; x < 4; x++) { this['bucket' + x] = game.add.sprite((x * 120) + 4, 278, 'bucket', x) } squares = game.add.group(); function addSquare() { square = squares.create((getRandom(0, 3) * 120 + 50), -20, 'square', getRandom(0, 3)); game.physics.enable(square, Phaser.Physics.ARCADE); square.body.velocity.y=100; } for (var x = 0; x < 4; x++) { this['bucketFront' + x] = game.add.sprite((x * 120) + 4, 278, 'bucket-front', x) } game.time.events.loop(Phaser.Timer.SECOND * 1, addSquare, this);}function update() { if ((game.input.x - 120) > 0 && (game.input.x + 120) <= 480) { arrow.x = ((Math.round((game.input.x - 120) / 120)) * 120) + 55; } function removeSquare(collide, square) { //square.kill(); } game.physics.arcade.overlap(collide, squares, removeSquare, null, this); //if (game.input.activePointer.isDown) { game.input.onDown.add(swap(), this) function swap() { //alert(colorPosition) //alert((arrow.x - 55) / 120 + 1) var swap = colorPosition[(arrow.x - 55) / 120] colorPosition[(arrow.x - 55) / 120] = colorPosition[(arrow.x - 55) / 120 + 1] colorPosition[(arrow.x - 55) / 120 + 1] = swap //alert(colorPosition) this['bucket' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120] //Here's the line the error occurs on this['bucket' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1] this['bucketFront' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120] this['bucketFront' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1] //this['bucketFront' + (arrow.x - 55) / 120].frame = parseInt(colorPosition[(arrow.x - 55) / 120]) //alert(this['bucket' + (((arrow.x - 55) / 120) + 1)].frame) //alert(colorPosition[((arrow.x - 55) / 120) + 1]) }}This is my first attempt to do anything with JavaScript, so please try to be patient.

Hi, I just upgraded my game to Phaser 2.1.3. (from v2.0.7) but it force some weird errors... - Especially PIXI is undefined. (I fixed that I load pixi.js to header) - biggest problem is that Pathfinder Plugin stopped working... (https://github.com/appsbu-de/phaser_plugin_pathfinding), maybe it is working but is not loaded it's loaded like this: pathfinder = game.plugins.add(Phaser.Plugin.PathFinderPlugin); Please check my screenshot, I need some advice how to fix this to work on latest version of Phaser

Hi everyone, I'm a newbie in development. i'm using babylon v1.11.0 and i want to use the actionManager object but it seems undefined in the javascript source file and i didn't find it in the documentation despite of the tutorial about it . I don't know why i can't use it. Thanks in advance for your help.

Hi, I recently decided to have a go at making a game (a very simple one) and have run into an error and I am now unsure what to do. I'm using version 2.0.5 and the error I get is 'TypeError: h is undefined' (In firebug it says the error is coming from phaser.min.js) My game is split into states (load, game, menu, level) I've pasted my level code into JSFiddle http://jsfiddle.net/PrZPA/ Thank you for any help and if you need more info then I'll provide it.

EDIT: For those still interested in this issue I have revived it with updated code and such here. Heya, this is my first post so I apologize if this has already been covered in another relevant topic. Essentially I am setting up a HUD prototype. I pass the game object to the HUD initially then prototype all of the relevant functions afterword. I am trying to get a timer setup to essentially display a 1 minute countdown. Each time I try to run the game though I get the error... Uncaught TypeError: Cannot call method 'loop' of undefined Here is the code I am using... ~~~ HUD = function(game) {this.game = game;this.score = 0;this.text = null;//this.timer = null;}; var countDown = 60; HUD.prototype = {create: function() {this.text = this.game.add.text(16, 16, 'Score: 0\nTimer: 01:00', { fontSize: '32px', fill: '#000' });this.game.time.events.loop(Phaser.Timer.SECOND, updateText, this.game);}, update: function() { }}; function updateText() {countDown--; if (countDown < 10) {this.text.content = 'Score: 0\nTimer: 00:0' + countDown;} else {this.text.content = 'Score: 0\nTimer: 00:' + countDown;} if (countDown == 0) {endGame();}} function endGame() {game.state.start('GameOver');}~~~Any thoughts?