• Content Count

  • Joined

  • Last visited

About RyanTheBoy

  • Rank
    Advanced Member

Contact Methods

  • Twitter
  1. RyanTheBoy

    Box2D vs P2

    I'm curious about this as well. I've seen more documentation on Box2d in general, but I've yet to dive into P2. If Box2d is better anyway, the physics transition would be easier with the plugin.
  2. Excellent work! Have you posted the source anywhere? I am working on a project that is going to utilize soft/rigid body physics objects; I can't seem to get past the flow level at all. =/
  3. I had written a few prototypes for my current employer using it and I can say it was rough. The translations on the API are only partially completed so it took a lot of guess and check for many of the functions(if I didn't write my way around them entirely). I will just say I have been much happier since I transitioned to Phaser. =)
  4. Two good image optimizers for Mac users. http://imageoptim.com/ http://pngmini.com/
  5. RyanTheBoy

    animation editor

    Do you know the best way to implement the output from this program into a Phaser.io project? Or perhaps there is a tutorial elsewhere? EDIT: Nevermind, found some detes! http://www.html5gamedevs.com/topic/4121-dragonbones-atlas-support-for-phaser-png-data-merged-files/
  6. I knew it was something stupid obvious. Thanks!
  7. I don't quite understand what you mean: I am not redefining create, I am calling the class's function.
  8. I am trying to create a simple meter to keep the beat for a launcher game I am developing. For some reason when I call the group's create function(this.bugs.create()) in my update loop it works once then never again. Why is it not continually adding sprites? Am I wrong in thinking it should? This is incredibly frustrating and I wondered if anyone may be able to spot the problem in my logic below. STATES.Game = function(game) { this.meter = null; this.bugs = null; this.timer = null; this.pattern = new Array(3); this.initTime = null; this.currentTime = null; this.currentBeat = null; this.elapsedSec = 0;};var spaceBar = null;var BPM = 96;var beep = null;var bugAdded = false;STATES.Game.prototype = { create: function () { this.initTime = Math.floor(this.game.time.time); // Sets initial time to number of milliseconds elapsed since game // game began. We can manually manipulate our level timers using // this as a base. beep = this.game.add.audio('hit1', 0.25); this.meter = this.add.sprite(0, 0, 'meter'); this.bugs = this.game.add.group(); spaceBar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); for (var i = 0, ii = this.pattern.length; i < ii; i++) { this.pattern[i] = 4 * (i + 1); } }, update: function () { this.currentTime = this.elapsedSec * 1000 + (this.game.time.time - this.initTime); if (this.game.time.time - this.initTime >= 1000) { this.elapsedSec++; this.initTime = Math.floor(this.game.time.time); } // Measures beats with sixteenth note precision this.currentBeat = Math.floor((this.currentTime / 1000) * BPM * (1/60) * 4); this.currentBeat %= 16; if (!bugAdded) { if (this.currentBeat % 4 == 0) { console.log(this.currentBeat + "\n" + this.currentTime); this.bugs.create(512, 0, 'bug'); bugAdded = true; } } else if (this.currentBeat % 4 != 0) { console.log('test'); bugAdded = false; } this.bugs.x -= 5; if (this.bugs.getAt(0).body.x <= 0) this.bugs.getAt(0).destroy(); if (spaceBar.isDown) console.log(this.pattern); }, quitGame: function (pointer) { // Here you should destroy anything you no longer need. // Stop music, delete sprites, purge caches, free resources, all that good stuff. // Then let's go back to the main menu. this.game.state.start('MainMenu'); }}; In this portion of the update loop... if (!bugAdded) { if (this.currentBeat % 4 == 0) { console.log(this.currentBeat + "\n" + this.currentTime); this.bugs.create(512, 0, 'bug'); bugAdded = true; } } else if (this.currentBeat % 4 != 0) { console.log('test'); bugAdded = false; } It always triggers the console.log() of both if() statements but only ever adds the one sprite to the group. WHY?!
  9. Well, damn. Fix was easy. Changed this... head[i].rotation = this.game.physics.angleToPointer(head[i]) + Math.PI; ...to this... head[i].rotation = this.game.physics.arcade.angleToPointer(head[i]) + Math.PI;
  10. Hey All, So I put a lot of time into this code and happily found it doesn't work in Phaser 2.0; instead it now throws the error... TypeError: this.game.physics.angleToPointer is not a function I don't want to write this all over again(though I may not have a choice), so I thought I would post the code here to see if anyone could suggest a simple solution. I could roll back to version 1.1.6 for now but that would be a little cheaty I suppose. Anyway, here is the source. (Essentially, this would make my Cat by drawing the body and the head. The head would angle toward the mouse and the puke would spray based on the angle to it. Without the .angleToPointer() function it is entirely broken.) Cat.JS Cat = function(game) { this.game = game; this.catGrp = null; this.catState = null; this.catPuke = null;};var torso = null;var head = new Array(3);var pivotPt = null;var launchPt = null;var REG = 0;var SICK = 1;var PUKING = 2;Cat.prototype = { create: function() { // Create a group to store all of the cat based sprites. this.catGrp = this.game.add.group(); // The torso is the base of the cat and is stationary, // thus it is placed first at the bottom of the cat // stack. torso = this.catGrp.create(this.game.world.width / 2, this.game.world.height / 2, 'cat', 'torso0'); // Wag the cat's tail. torso.animations.add('wag', ['torso0', 'torso1', 'torso2', 'torso3', 'torso2', 'torso1'], 10, true); torso.animations.play('wag'); // The head[] array will hold all of the cats various // heads. The update function in turn will use for loops // to update them all synchronously. head[0] = this.catGrp.create(torso.x + 35, torso.y, 'cat', 'head0'); head[0].anchor = new Phaser.Point(0.8, 0.9); head[1] = this.catGrp.create(torso.x + 45, torso.y + 7, 'cat', 'head1'); head[1].anchor = new Phaser.Point(0.7, 0.9); head[2] = this.catGrp.create(torso.x + 45, torso.y + 7, 'cat', 'head2'); head[2].anchor = new Phaser.Point(0.7, 0.7); // Place the pivot point(pivotPt so the we can mathemagically // ensure the puke is coming out of the puking head's(head[2]) // mouth. The emitter's(this.catPuke) position is set to (0, 0) // initially and will be moved during the update function based // on where the head is aiming. pivotPt = new Phaser.Point(head[2].x, head[2].y); // this.catState will be used to poll for whether or not the cat // is idle(REG), charging its puke(SICK), or launching its vom // (PUKING). Later the game will manage these states based on how // well the player performs during the charging stage. this.catState = PUKING; this.catPuke = this.game.add.emitter(0, 0); this.catPuke.makeParticles('testPuke', 0, 100, true, false); //this.catPuke.start(false, 0, 50); }, update: function() { for (var i = 0; i < 3; i++) { head[i].alpha = 0; head[i].rotation = this.game.physics.angleToPointer(head[i]) + Math.PI; if (head[i].angle >= 25) head[i].angle = 25; else if (head[i].angle <= -15) head[i].angle = -15; } this.catPuke.x = pivotPt.x - 30 * Math.cos(head[2].angle * Math.PI / 180); this.catPuke.y = pivotPt.y - 30 * Math.sin(head[2].angle * Math.PI / 180); var xRay = -(Math.abs(this.catPuke.x - pivotPt.x)); var yRay = -(pivotPt.y - this.catPuke.y); this.catPuke.setXSpeed(5 * xRay, 10 * xRay); this.catPuke.setYSpeed(5 * yRay, 10 * yRay); if (this.catState == REG) { head[0].alpha = 1; } if (this.catState == SICK) { head[1].alpha = 1; } if (this.catState == PUKING) { head[2].alpha = 1; if (!this.catPuke.on) this.catPuke.start(false, 0, 50); } }, render: function() { this.game.debug.renderSpriteBounds(head[2]); this.game.debug.renderPoint(pivotPt); //this.game.debug.renderPoint(launchPt); }}; -Ryan
  11. I am currently using Toast Editor which outputs a .CSV. I am curious though as to what the preferred or 'best' format is. Will one format necessarily load more quickly than another?
  12. Aaaand ShoeBox works without issue. Stay classy TexturePacker.
  13. Hey errybody! I tried to search for this and didn't seem to find anything similar to this issue; I am using TexturePacker to pack a JSON Hash and am running into this funny issue... Essentially, the face is being cut off on the left. This isn't all of the sprites however; some of them render fully and look fine. Others aren't showing at all and the majority of them clip oddly like this one. I've included the JSON below as well as the PNG generated with TexturePacker. I had no issues when I used Shoebox so for now I will go through the hassle of booting up my non-Ubuntu pc to use it instead. Thanks for the help folks! JSON {"frames": {"body":{ "frame": {"x":2,"y":293,"w":263,"h":243}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":263,"h":243}, "sourceSize": {"w":263,"h":243}},"face0":{ "frame": {"x":267,"y":293,"w":148,"h":219}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":148,"h":219}, "sourceSize": {"w":148,"h":219}},"face1":{ "frame": {"x":818,"y":314,"w":175,"h":240}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":175,"h":240}, "sourceSize": {"w":175,"h":240}},"face2":{ "frame": {"x":818,"y":2,"w":185,"h":310}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":185,"h":310}, "sourceSize": {"w":185,"h":310}},"head0":{ "frame": {"x":475,"y":2,"w":341,"h":403}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":341,"h":403}, "sourceSize": {"w":341,"h":403}},"head1":{ "frame": {"x":2,"y":2,"w":471,"h":289}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":471,"h":289}, "sourceSize": {"w":471,"h":289}},"tail":{ "frame": {"x":417,"y":407,"w":138,"h":205}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":138,"h":205}, "sourceSize": {"w":138,"h":205}}},"meta": { "app": "http://www.codeandweb.com/texturepacker ", "version": "1.0", "image": "body.png", "format": "RGBA8888", "size": {"w":1024,"h":1024}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:68db4318c0c3c22a3e7a1ca29c9a68af:bd1147365b95c49eb71b8c826abb952d:6edbb70161d1b060b04ac1ffb23eaae4$"}}
  14. Well, that is good to know. Thanks! =)
  15. Hello everybody! I am attempting to use a bitmapFont I generated using Littera and am receiving some errors. Littera outputs a .png bitmap and a .fnt in xml format. When I attempt to load it with the following code... Preloader.js STATES.Preloader = function(game) {this.preloadBar = null;}; STATES.Preloader.prototype = {preload: function() {this.preloadBar = this.game.add.sprite(this.game.world.centerX - 100, this.game.world.centerY, 'preloadBar');this.load.setPreloadSprite(this.preloadBar); this.load.spritesheet('buttons', 'assets/buttonSheet.png', 360, 50); this.load.bitmapFont('shortStack', 'assets/shortStack.png', 'assets/shortStack.fnt');}, update: function() {this.game.state.start('MainMenu');}}; I receive this error... Uncaught Error: Phaser.Loader. Invalid XML given phaser.min.js:10 c.Loader.xmlLoadCompletephaser.min.js:10 b.xmlURL._xhr.onloadphaser.min.js:10 I thought maybe the .fnt extension is what was causing the issue so I just changed it to .xml and then got this error... Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object] phaser.min.js:4 b.Texture.setFramephaser.min.js:4 b.Texturephaser.min.js:4 c.LoaderParser.bitmapFontphaser.min.js:11 c.Cache.addBitmapFontphaser.min.js:10 c.Loader.xmlLoadCompletephaser.min.js:11 b.xmlURL._xhr.onloadphaser.min.js:10 Any help would be appreciated! I've included the archive Littera produced if anyone would like to take a closer look at those files. shortStack.zip