• Content Count

  • Joined

  • Last visited

Everything posted by Teonnyn

  1. I solved it. The issue turned out to be in the database, one of the images had an extra https:// attached to it that was getting corrected on the site, but was fooling Phaser.
  2. I have a system where I'm trying to load images from two sources remotely. They work half the time... but then a third of that, it suddenly attempts to add an additional http to the domain which causes the load to fail. I'm not 100% sure what is going on here, and it's been baffling. Part of it is that the images are being loaded in a loop - could that be causing the issue? This is the error that I'm getting: error loading asset from URL https:https://images.igdb.com/igdb/image/upload/t_thumb_2x/arlh24mn9p9x5blpuxqb.jpg This is the code I'm currently using: populateGameData(data) { if (this.gameData.length < 0) { for(let i = 0; i < this.gameData.length; i++) { this.game.cache.removeImage(this.gameData[i]['id']); } } this.gameData = []; this.gameData = data['gameData']; for(let i = 0; i < this.gameData.length; i++) { game.load.image(this.gameData[i]['id'], this.gameData[i]['gameImage']); } setTimeout( () => { game.load.start(); }, 3500 ); game.load.onLoadComplete.add(this.loadCheck, this); } loadCheck() { console.log(this.gameData[0]['id']); //let testImage = game.add.sprite(0, 0, this.gameData[0]['id']); } I do have allowed access to the images through Cors - has anyone else run into this problem before?
  3. Well I feel stupid. Fixed it. Forgot to include this.emitter.particleClass
  4. I'm trying to create a custom particle emitter that will select random sprites from a sprite sheet while it emits. However, this setup is not working the way I want it to precisely. The emitter fires, and it fails to load the sprite sheet, however the "parent object" also uses the exact same sheet...and loads it just fine. Shown in this example, a working sprite from the sprite sheet. However, the green squares also pull from the same sheet. I saw it working briefly precisely... once, before reloads started producing this effect. I moved the "make particle" out of the generation loop, and it stopped running. The emitter code is bog standard, and just moves a basic emitter from place to place then fires the particles. However, I am using this class as well that generates the effect: export class EmojiParticle extends Phaser.Particle { frameBlock: any; constructor(game: Phaser.Game, x: number, y: number) { super(game, x, y, 'emoji' ); this.frameBlock = this.animations.frameData.getFrameIndexes(); } onEmit() { this.frame = this.frameBlock[Math.floor(Math.random() * this.frameBlock.length)]; } }; This appears to be because the EmojiParticle effect can't read the cache, even though it seems to work. What can I do to fix this?
  5. Fixed things! Looks like it's been in how the latest version of Phaser CE reads atlas files. I removed one line of code in the generator that appended a name to the top, rebuilt the atlas, and it's now behaving properly. I also trimmed directory path and file extensions as well, although numbers would do just as good, from everything but the file link.
  6. Okay, check on the image. That itself loads perfectly. Not entirely sure what's going on with the atlas though. I based it off the one generated by TexturePacker for Phaser. My own version is also generated automatically when these files are created. I had a hunch that it might be because the atlas was trying to locate a local file and not finding it, but redirecting the meta to look at the server has had no effect on loading thus far.
  7. I'll try that, though interestingly enough I have a previous version that was not using Angular CLI - just plain Javascript and some jQuery. That was having no trouble loading the atlas and json file associated with positioning.
  8. I have Angular 5 and Phaser CE set up, and loading correctly. When running a test state, I can get the system to render text from a text object. However, when I try to load an atlas and image from my server, these items show up as being brought into the client in the browser debug console - I can see, and click on the links of both. Phaser, though, produces a few errors. preload() { // Handle Application-specific graphics loading // if (Global.gameKey != undefined) { let image = Global.currentImage; let json = Global.currentJSON; this.load.atlasJSONHash('emoji', image, json ); } switch(Global.gameKey) { } } create() { if (Global.gameKey == undefined) { this.state.start('NullState'); } else { this.load.onLoadStart.add(this.loadStart, this); this.load.onLoadComplete.add(this.onLoadComplete, this); this.load.start(); } } onLoadComplete() { console.log("Switching"); switch(Global.gameKey) { case "drop": this.state.start('Drop', true, false); break; } } The two errors produced here are Phaser.Loader - textureatlas[emoji]: Cannot read property 'x' of undefined and Phaser.Cache.getImage: Key "emoji" not found in Cache. The server is CORS enabled and under my control, and I can actually "see" both files apparently get loaded, but the Phaser cache appears to be ignoring them. Any object created that uses the atlas shows up with the second error. Is this issue something Webpack or Angular CLI related, or am I missing something in the code?
  9. DOH! I'm going to file this one in "obvious in hindsight", but it was late-night last night when I posted and there were hours of frustration building on that. Thank you!
  10. I'm not sure what's happening here, but I'm trying to establish a basic P2 world with Phaser. However, despite essentially copying the basic settings, my test sprite keeps pulling to the -right-, as if there was horizontal gravity acting on it. The sprite is generated from an object, but mostly to contain some functions. It's anchor is set to center, and nothing else ought to be acting on it. Here's a short clip of how it's behaving with nothing but default configuration. It ought to be falling straight down, but it is not: https://i.gyazo.com/9bbcf69b6c7fb1e8a65fe3b4b1f676f6.mp4 Here is the code for P2: game.physics.startSystem(Phaser.Physics.P2JS); game.stage.disableVisibilityChange = true; game.physics.p2.gravity.y = 80; game.physics.p2.applyGravity = true; And on the sprite itself: Phaser.Sprite.call(this, game, X, Y, 'ball'); game.physics.p2.enable(this); this.body.damping = 0.5; this.body.fixedRotation = true; this.anchor.x = 0.5; this.anchor.y = 0; What the heck is going on here?
  11. I've created something that's akin to somewhat of a joke site, but it's a fairly good one. Somehow, I would like to monetize it with just one advertisement. However, actually finding material on this is proving to be baffling. My original intent was to add a sidebar ad to the site side itself, however Phaser.io seems to block additional divs when loaded dynamically. I'd like to possibly show a ad in the preload, but finding a way to do this is confusing at best. Everything relevant seems to be rather scattered. I stumbled on the Orange Games plugin, but going through DoubleClick appears to require approval, etc. In 2017, are there any better tutorials or structured frameworks, suggestions on how to do this?
  12. I'm creating a game that requires a grid, and while I've got the basics down, I'd like it to turn a finite grid into infinite that can be scrolled in all directions. How would I go from this: function CreateHexGrid() { for(var x=0; x< mapSize; ++x) { gameMap[x] = []; for (var y=0; y < mapSize; ++y) { var square = new diamondTile(game, x, y); gameMap[x][y] = square; gameContainer.add(square); } } game.world.setBounds(); } to infinite? The image I have describes the results I have thus far.
  13. DOH! So, figured out the second issue. The code was perfect for the situation, but I managed to be off by a single number. I'm still trying to figure out the first with the map, however.
  14. Hey! I'm fairly new to these forums and to Phaser in general. I have a two-fold issue at hand here, and I wasn't sure if I need to create two separate threads for it or not but decided to present them as one. So far, I'm enjoying Phaser and it's been working great. However, I keep hitting little snags and I've finally found two I can't fix. First one: I've got a state-based game set up, and after a few primary states (Boot, Preload), it switches over to the Engine. The engine builds the main game, sets up the map and the foreground aesthetics. However... once the map loads, it seems to be determined to stay on top of everything else and I cannot figure out why. It is a TILED map - one that I only really use to provide a default 'fill' of tiles before the game remaps it to something dynamically generated. This is my code for this segment thus far: GameObject.Engine = function() {};GameObject.Engine.prototype = { init : function() { this.map; this.cursors; this.mapLayer = game.add.group(); this.mapLayer.z = 0; this.asteroidShadowGroup = game.add.group(); this.asteroidShadowGroup.z = 200; this.mapSizeWidth = 1280; this.mapSizeHeight = 960; this.bufferZone = 60; game.world.setBounds(0, 0, this.mapSizeWidth, this.mapSizeHeight); this.initPhysics(); }, initPhysics :function() { game.physics.startSystem(Phaser.Physics.ARCADE); this.asteroidShadowGroup.enableBody = true; this.asteroidShadowGroup.physicsBodyType = Phaser.Physics.ARCADE; }, create : function() { this.map = game.add.tilemap('World'); this.map.addTilesetImage('Textures', 'Background'); this.map.createLayer('BaseWorld'); this.cursors = game.input.keyboard.createCursorKeys(); this.createPlayer(); this.buildAsteroids(); }, update: function() { this.asteroidShadowGroup.forEachExists(this.Boundaries, this); if (this.cursors.up.isDown) { game.camera.y -= 4; } else if (this.cursors.down.isDown) { game.camera.y += 4; } if (this.cursors.left.isDown) { game.camera.x -= 4; } else if (this.cursors.right.isDown) { game.camera.x += 4; } }, createPlayer: function() { this.humanPlayer = new Player(this.game, 20, 20, 'white', false); }, Boundaries: function (sprite) { if (sprite.x < -this.bufferZone) { sprite.x = this.mapSizeWidth + this.bufferZone; } else if (sprite.x > this.mapSizeWidth + this.bufferZone) { sprite.x = -this.bufferZone; } if (sprite.y < -this.bufferZone) { sprite.y = this.mapSizeHeight + this.bufferZone; } else if (sprite.y > this.mapSizeHeight + this.bufferZone) { sprite.y = -this.bufferZone; } }, buildAsteroids: function () { for (var i=0; i < 8; i++ ) { var x = game.rnd.integerInRange(0, this.mapSizeWidth); var y = game.rnd.integerInRange(0, this.mapSizeHeight); this.createAsteroid(x, y); } }, createAsteroid: function (x, y) { var asteroid = this.asteroidShadowGroup.create(x, y, 'asteroids', game.rnd.integerInRange(0, 12)); asteroid.anchor.set(0.5, 0.5); asteroid.angularVelocity = game.rnd.integerInRange(0, 360); var randomAngle = game.math.degToRad(game.rnd.angle()); var randomVelocity = game.rnd.integerInRange(10, 40); game.physics.arcade.velocityFromRotation(randomAngle, randomVelocity, asteroid.body.velocity); }}I have double-checked this and seen that the asteroids, for instance, are generated 'under' the map but cannot figure out why, as is the player (when the player works, which brings me to the second issue): I decided to build my player into a reusable object so that once the basics of the game are done, I can then add multiplayer. This works fine, to a point, but I've seen this error reported elsewhere as well. When I try to add animations to this object, I get this error: Uncaught TypeError: Cannot read property 'index' of undefined Beyond the map issue, the above code segment also shows how I'm creating the player as well. Here's the code for the player object - it's based off a sprite extension: 'use strict'; // without this the animation.add will not workvar Player = function(game, x, y, PlayerColor, Network) { Phaser.Sprite.call(this, game, x, y, PlayerColor); game.add.existing(this); this.anchor.setTo(0.5, 0.5); // Player Properties this.owner = ""; this.isNetwork = false; this.animationSpeed = 15; this.hitpoints = 100; this.level = 0; this.exp = 0; this.playerState = 0; // 0 = Idle // 1 = WalkArmed // 2 = Walk Weapon Down // 3 = Walk Scanner // 4 = Walk // Establish Animations // this.animations.add('Idle', [11], 0, true); this.animations.add('WalkArmed', [2,3,4], this.animationSpeed, true); this.animations.add('WalkWeaponDown', [5,6,7], this.animationSpeed, true); this.animations.add('WalkScanner', [8,9,10], this.animationSpeed, true); this.animations.add('Walk', [12,13,14], this.animationSpeed, true); // enable physics game.physics.enable(this, Phaser.Physics.ARCADE); }// Players are a type of Phaser.SpritePlayer.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;I've tried a couple solutions already, making sure I used "this.game" and "use strict", but nothing has worked yet. I'm using Phaser version v2.4.4