Nebulocity

Members
  • Content Count

    78
  • Joined

  • Last visited

About Nebulocity

  • Rank
    Advanced Member
  • Birthday 11/22/1981

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

669 profile views
  1. Well, you could also create four separate groups of enemies, then add them to a parent group (something that I am also sort-of working with right now). I suppose that if you did that, you could create at least one enemy in each group (say, Group1, Group2, Group3, Group4), and then get the first child object inside on of those randomly. I'm not the best programmer in the world, and my JavaScript is seriously lacking in many areas, but this might do what you want (modified for your code, of course)? // Create the four groups to hold your different enemy typesthis.group1 = game.add.group();this.group2 = game.add.group();this.group3 = game.add.group();this.group4 = game.add.group();// Add an enemy into each groupthis.group1.create(x, y, "enemy1");this.group2.create(x, y, "enemy2");this.group3.create(x, y, "enemy3");this.group4.create(x, y, "enemy4");// Create the parent group for all enemiesthis.enemies = game.add.group();// Add each enemy group into the parent groupthis.enemies.add(this.group1);this.enemies.add(this.group2);this.enemies.add(this.group3);this.enemies.add(this.group4);// Create a function that you can call. Pass it the enemy group (group1, group2, etc) for whatever group you want to perform on. Then do whatever you want inside the function. If you have more than one enemy in each group (for example, there are 3 enemies of the type in group1, 2 of the type in group2, etc), modify the function to also accept an integer for the number of enemies you want to return. Of course, you'll probably want to create a list to add them to and return that, but this might be a good start for what you want?enemies.forEach(function(enemygroup){ // I'm not sure if you can check the name of the group. If not, you can refer to the group by its index in the "enemies" group. if (enemygroup.name == "group1") { // Get the first dead enemy in the group, assign it to the variable "selectedEnemy" selectedEnemy = enemygroup.getFirstDead() // Reset the position of the sprite for the enemy. Put it in the center of the game world. selectedEnemy.reset(game.world.centerX, game.world.centerY) }});
  2. "Bump", but with some extra info: I am still unable to determine why the sprite animation won't change. However, when the game runs, I'm getting the text notification int he console log that the sprite did indeed touch the wall... Any assistance would be greatly appreciated!
  3. Well, you can do something like this: this.enemies = game.add.group();this.enemies.createMultiple(5, 'enemySpriteToUse')That basically gives you 5 enemies to choose from. You can look at the documentation for Groups at http://docs.phaser.io/Phaser.Group.html, and type "get" unto the search box. It should give you a few methods such as getFirstDead, getAtIndex, etc, so you can pick out specific children from the "enemies" group. There's also a section at http://examples.phaser.io/ that shows you how to use some of those, such as getting the first child in a group, etc. Hope that helped.
  4. My game is a small platformer, where the player has to avoid enemies that drop down from the top of the "room", while performing the goal for the level. My problem is that, after the enemies have dropped down, they do not change their animation sequence after touching a wall. For instance, the top-most enemy in the screenshot below will eventually bump into the left wall. When he does so, it will then start walking right (because I'm using game.physics.arcade.collide and enemy.body.bounce.x = 1). However, I can't get the sprite's animation to change when this happens. In the code below, I'm calling enemy.animations.play() to play the appropriate animation that should happen after the sprite is blocked on the left or right, but it's not working...the sprite changes direction as it should, and just continues to "moonwalk" as it marches across the screen Does anyone have an idea on why this would be happening, and what might be needed to fix it? Thanks! // Change animation if enemy touches a wall this.enemies.forEachAlive(function(enemy){ // If the enemy is on the floor and was blocked on the left, make it walk right if (enemy.body.onFloor() && enemy.body.blocked.left) { console.log('I was touched on the left!'); enemy.animations.play('right'); } // If the enemy is on the floor and was blocked on the right, make it walk left. else if (enemy.body.onFloor() && enemy.body.blocked.right) { console.log('I was touched on the right!'); enemy.animations.play('left'); } })
  5. Oops, that did it! I've been out of the loop for a while, as I just spent the past 6 months not touching JavaScript because I was handed a very large back-end project (all in T-SQL). Thanks for the advice!
  6. Hello everyone, I hope the new year is treating everyone well so far! I've been out of the loop for a while, but I'm misunderstanding something about how groups, sprites, and sprite bodies interact. I couldn't find anything relevant on the search function, but I wanted to ask this question: What's the commonly accepted way to create groups that contain a variety of enemy types (each type having a different sized sprite, with differing numbers of frames for animation, and different names)? I have five enemy types in my game, each with differing sizes and differing animation frames (one might have 5 frames, another 8, etc). I created a group for each of these ("enemyType1Group", and so on), add enemies to each group based on the current level, and then add each of those enemyTypeXGroups to the main "enemies" group so that I can call functions on all of it's children (in the enemyTypeXGroups) instead of having to call the same code for each group individually (like setting scale, playing animations, etc). The problem is, during my Update() function, if I call something like the following, it breaks because the properties are undefined. I'm fairly certain I'm nesting groups incorrectly, or just going about it the wrong way, so any help would be fantastic. Of course, if anyone has some suggestions to shape the code up into something more efficient, I'm more than open to suggestions. Thanks! createEnemies: function() { // Removed group 4 because the sprite is being re-done. I'll add it later. // Create separate group for each enemy type this.enemyType1Group = game.add.group(); this.enemyType2Group = game.add.group(); this.enemyType3Group = game.add.group(); this.enemyType5Group = game.add.group(); // Create enemies for each group based on what the current level is. if (game.global.level == 1) this.enemyType1Group.createMultiple(5, 'enemy1') else if (game.global.level == 2) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') } else if (game.global.level == 3) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') this.enemyType3Group.createMultiple(5, 'enemy3') } else if (game.global.level == 4) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') this.enemyType3Group.createMultiple(5, 'enemy3') } else if (game.global.level == 5) { this.enemyType1Group.createMultiple(5, 'enemy1') this.enemyType2Group.createMultiple(5, 'enemy2') this.enemyType3Group.createMultiple(5, 'enemy3') this.enemyType5Group.createMultiple(5, 'enemy5') } // Add enemy animations to each enemy group this.enemyType1Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3, 4, 5, 6, 7], 8, true); this.enemyType1Group.callAll('animations.add', 'animations', 'left', [8, 9, 10, 11, 12, 13, 14, 15], 8, true); this.enemyType2Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3, 4, 5, 6, 7], 8, true); this.enemyType2Group.callAll('animations.add', 'animations', 'left', [8, 9, 10, 11, 12, 13, 14, 15], 8, true); this.enemyType3Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3], 4, true); this.enemyType3Group.callAll('animations.add', 'animations', 'left', [4, 5, 6, 7], 4, true); this.enemyType5Group.callAll('animations.add', 'animations', 'right', [0, 1, 2, 3, 4, 5, 6, 7], 8, true); this.enemyType5Group.callAll('animations.add', 'animations', 'left', [8, 9, 10, 11, 12, 13, 14, 15], 8, true); // Group contains all enemy groups, so that I can call animations, scale, etc on all sub-groups at once. this.enemies = game.add.group(); // Add enemy type groups to main group this.enemies.add(this.enemyType1Group) this.enemies.add(this.enemyType2Group) this.enemies.add(this.enemyType3Group) this.enemies.add(this.enemyType5Group) // Turn on teh body physics this.enemies.enableBody = true; // Resize enemies if spritesheet is too large. this.enemies.scale.setTo(0.5, 0.5); this.enemies.setAll('body.height', (35 * .5)); this.enemies.setAll('body.width', (41 * .5)); this.nextEnemy = 0; // Set enemy spawn to now},update: function() { // Ensure enemies face the correct direction this.enemies.forEachAlive(function(enemy) { enemy.animations.play('right'); }},
  7. Lewster32, Marvster, thank you both for your input. I tried the three available (ISON, UTF, and ANSI) and none of the three resolved the issue. I ended up contacting the hosting company, and as it turns out, they don't have a MIME type in the web.config for JSON unless it is requested...after I submitted the ticket, 30 minutes went by and I got a response with a screenshot of the game working! ;-) So, I guess we can add that to the list of troubleshooting steps if anyone else has issues...add a MIME type permission in the web.config for JSON files, and you're good to go!
  8. I built the game from LessMilk's "Discover Phaser" eBook, and it went great. It runs fine using the Mongoose web server on my home PCIt runs fine IIS at work (lunchtime fun)It runs fine hosted off of Google Drive...It fails to run when hosted on my site (through Arvixe.com). Being extremely new to using JSON, I wanted to see if I could get some assistance from folks who had more experience with loading JSON files (through Phaser, as it's a Phaser error), before I contacted my host to find out if the error could be on their side (maybe they block JSON?). When I try to run the game, I get the following two errors: Error: http://literaryhodor.us/games/superyenman/phaser.min.js is being assigned a //# sourceMappingURL, but already has one "Phaser v2.0.6 - Renderer: WebGL - Audio: WebAudio - http://phaser.io" phaser.min.js:8SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data phaser.min.js:14The first error about "sourceMappingURL" only happens when using phaser.min.js.The second error about JSON.parse happens with both phaser.min.js and phaser.js.I'm not sure what else to do to try fixing this. As I said, it works at 3 other locations, and fails at one. If this is a hosting issue, I can't call them until tomorrow, which is why I'm checking here to be absolutely sure. Links, in case anyone wants to help troubleshoot. Just for kicks, I uploaded the final code for the game from the book, untouched by me, and it still throws a fit: Google Drive (works): http://bit.ly/1nH8Rn2Hosted Site (fails): http://literaryhodor.us/games/superyenman/Hosted Site [code from book] (fails): http://literaryhodor.us/games/chapter-7/Any help would be appreciated. Edit: Apparently I cannot upload JSON files (not sure why I expected it to work, lol), so here's the file's contents. { "backgroundcolor":"#4b57ff", "height":17, "layers":[ { "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], "height":17, "name":"Tile Layer 1", "opacity":1, "type":"tilelayer", "visible":true, "width":25, "x":0, "y":0 }], "orientation":"orthogonal", "properties": { }, "tileheight":20, "tilesets":[ { "firstgid":1, "image":"tileset.png", "imageheight":20, "imagewidth":40, "margin":0, "name":"tileset", "properties": { }, "spacing":0, "tileheight":20, "tilewidth":20 }], "tilewidth":20, "version":1, "width":25}
  9. That's a good idea, I hadn't thought of that. Sometimes I try to modularize things too much...a failing that I have a hard time catching on my own, lol. I took your advice, created an over-arching "atom" group, and then whenever the element was changed in the table, I did this: // If the newly clicked atom is not the same as the last atom, if (currentAtom != lastAtom) { // Remove all child groups from the "atom" group atom.removeAll(); // select the new element SELECTED_ELEMENT = Elements[atomicNumber].Number; // Create the new atom loadAtom(SELECTED_ELEMENT); // Assign the current atom as the previous atom lastAtom = currentAtom; }Since GROUP.removeAll() removes all children, but keeps the parent container, I can just re-use that group as many times as needed. One problem that I ran into (more than a few times) was not realizing when the group was going to be undefined because it didn't exist in the context in which I was calling it...I gotta work on that (in JavaScript) some more, now that I'm feeling more comfortable with the language. Thanks for your help ;-) I'll update the web site in a moment and tinker with it some more later on. Cheers!
  10. I built a "game" that was essentially just a copy of the Periodic Table of Elements" inside of a Table with dynamically generated rows and columns. A working example of how the "game" should work is hosted on my web site, http://literaryhodor.us/. Except for the fact that you can't change the element being displayed when clicking on an Element within the table (I wasn't sure how to do this...which is what lead me to using States). Each <td> (cell) within the table had an Id, which I used to return the atomic number of the element that was clicked in the table. When an element was clicked, I wanted the atom for that element to display in the table. That became a problem. I could set the element to load when the canvas loaded, and it would display what I wanted. But in order to re-load the canvas, I'd have to dispose of the canvas and create it all over again...something that I don't know how to do, and something that I'm fairly certain isn't recommended. So I've been trying for the past hour to set up States within the game, so that I could do something like this: <script> (function() { var game = new Phaser.Game(768, 480, Phaser.CANVAS, 'model'); game.state.add('Boot', PeriodicTable.Boot); game.state.add('Preloader', PeriodicTable.Preloader); game.state.add('CreateElementArray', PeriodicTable.CreateElementArray); game.state.add('LoadTable', PeriodicTable.LoadTable); game.state.add('LoadElement', PeriodicTable.LoadElement); game.state.add('UpdateAngles', PeriodicTable.UpdateAngles); game.state.start('Boot'); })(); </script>This would allow me to do the following: Load any assets I needed beforehand (in case I wanted a menu or something), Create the array of elements, Load the periodic table (build the table cells in JavaScript), Load an element (for example, loading Hydrogen's atom at the start), Update the angles of the electrons that are orbiting the nucleus of the atom, Call the LoadElement state again when a different table cell is clicked, pass the atomic number for that element, and display it.I think I understand how the State system works, but this is my first time using it, and so I figured there would be problems. The way I created and loaded the element array in the CreateElementArray state was like this: PeriodicTable.CreateElementArray = function(game) {};PeriodicTable.CreateElementArray.prototype = { preload: function() { function Element(number, symbol, name, mass, valenceElectrons) { this.Number = number; this.Symbol = symbol; this.Name = name; this.Mass = mass; this.NumValenceElectrons = valenceElectrons; } var Elements = []; // Element(atomic number, symbol, name, atomic weight, number of valence electrons) Elements[1] = new Element(1, 'H', 'Hydrogen', 1.008, 1); Elements[2] = new Element(2, 'He', 'Helium', 4.003, 2); Elements[3] = new Element(3, 'Li', 'Lithium', 6.941, 1); Elements[4] = new Element(4, 'Be', 'Beryllium', 9.012, 2); Elements[5] = new Element(5, 'B', 'Boron', 10.81, 3); // And so on... // Output the first 5 elements to the console to verify load var index; for (index = 0; index < 5; ++index) { console.log(Elements[index]); } }, create: function() { this.game.state.start('LoadTable'); }};And that's my problem...from what I understand of States, everything in here gets disposed of once the State changes, right? Which explains why my first major hurdle is getting this exception: Element {Number: 1, Symbol: "H", Name: "Hydrogen", Mass: 1.008, NumValenceElectrons: 1} CreateElementArray.js:139Element {Number: 2, Symbol: "He", Name: "Helium", Mass: 4.003, NumValenceElectrons: 2} CreateElementArray.js:139Element {Number: 3, Symbol: "Li", Name: "Lithium", Mass: 6.941, NumValenceElectrons: 1} CreateElementArray.js:139Element {Number: 4, Symbol: "Be", Name: "Beryllium", Mass: 9.012, NumValenceElectrons: 2} CreateElementArray.js:139Element {Number: 5, Symbol: "B", Name: "Boron", Mass: 10.81, NumValenceElectrons: 3} CreateElementArray.js:139Uncaught ReferenceError: Elements is not defined LoadTable.js:56So it's reading the array within that State, but when it moves on to creating the HTML table in the LoadTable State (which requires this array of Elements from the previous state), it gives that ReferenceError at the point at which I try to assign the atomic number to a table cell. var cellText = atomicNumber + "<br /><strong>" + Elements[atomicNumber].Symbol + "</strong><br />" + Elements[atomicNumber].Mass;Ugh, I'm confused by all this, but it seems to be the only way to do what I'm trying to do. Where should this array of elements be stored within the State system in order for it to be accessed outside of the State that it was created in? Even if I put the code to create the elements, the array, and the table all within the same State, whenever I call the State "LoadElement" to load a new element, it'll dispose of the table and the array, right?
  11. Ahh, I see. Thank you for that clarification. The reason why i was trying to use Phaser.Circle is because I want to make a sprite move along the path if the circle. I guess i got confused in what that class was for. Cheers!
  12. I want to do two things: Draw concentric circles Not have them "filled"At first, I tried doing the following: var ctx = this.game.canvas.getContext('2d'); // First circle ctx.beginPath(); ctx.arc(game.world.centerX, game.world.centerY, 50, 0, 360); ctx.lineWidth = 1; ctx.strokeStyle = 'red'; ctx.stroke(); // Second circle ctx.beginPath(); ctx.arc(game.world.centerX, game.world.centerY, 100, 0, 360); ctx.lineWidth = 1; ctx.strokeStyle = 'green'; ctx.stroke(); // Third circle ctx.beginPath(); ctx.arc(game.world.centerX, game.world.centerY, 150, 0, 360); ctx.lineWidth = 1; ctx.strokeStyle = 'blue'; ctx.stroke(); // The alert acts as a "pause" so that I can see the circles drawn, // Before they get drawn over by displaying my sprites in phaser. alert('pause'); So it works! But then (after the alert), my sprites drawn with Phaser show up, which erases the circles that I drew. I want these circles to show up as part of my background (without having to resort to a background image for the canvas). I tried rummaging around in the Phaser documentation, and while there is a Phaser.Circle class, doesn't seem to have a "no fill" propert to it. But even with that being said, drawing circles like this doesn't work. circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 100)Nothing shows up at all. So I'm not sure what I should be doing...if I draw it on the canvas directly, it gets overwritten. If I try drawing circles with Phaser (although, they're "filled" from what I can tell in the examples), they don't show up. Any help would be appreciated.
  13. I want to do two things: Draw concentric circles Not have them "filled"At first, I tried doing the following: var ctx = this.game.canvas.getContext('2d'); // First circle ctx.beginPath(); ctx.arc(game.world.centerX, game.world.centerY, 50, 0, 360); ctx.lineWidth = 1; ctx.strokeStyle = 'red'; ctx.stroke(); // Second circle ctx.beginPath(); ctx.arc(game.world.centerX, game.world.centerY, 100, 0, 360); ctx.lineWidth = 1; ctx.strokeStyle = 'green'; ctx.stroke(); // Third circle ctx.beginPath(); ctx.arc(game.world.centerX, game.world.centerY, 150, 0, 360); ctx.lineWidth = 1; ctx.strokeStyle = 'blue'; ctx.stroke(); // The alert acts as a "pause" so that I can see the circles drawn, // Before they get drawn over by displaying my sprites in phaser. alert('pause'); So it works! But then (after the alert), my sprites and whatnot drawn in Phaser show up, which erases the circles that I drew. I want these circles to show up as part of my background (without having to resort to a background image for the canvas). I tried rummaging around in the Phaser documentation, and while there is a Phaser.Circle class, doesn't seem to have a "no fill" propert to it. But even with that being said, drawing circles like this doesn't work. circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 100)Nothing shows up at all. So I'm not sure what I should be doing...if I draw it on the canvas directly, it gets overwritten. If I try drawing circles with Phaser (although, they're "filled" from what I can tell in the examples), they don't show up. Any help would be appreciated.
  14. I know why this isn't returning anything, but I'm not quite sure how to go about changing it. apple= spawnApple('appleSprite');apple.anchor.setTo(0.5, 0.5);function spawnApple(sprite) { // Place apple in center of canvas apple= game.add.sprite(game.world.centerX, game.world.centerY, sprite);}alert(apple.anchor);The above returns an error in the console: Uncaught TypeError: Cannot read property 'anchor' of undefinedSo I tried fixing by creating a function inside the function, but this doesn't work either: apple= spawnApple('appleSprite');apple.anchor.setTo(0.5, 0.5);function spawnApple(sprite) { // Place applein center of canvas apple= game.add.sprite(game.world.centerX, game.world.centerY, sprite); apple.anchor = function() { apple.anchor.setTo(0.5, 0.5); }}alert(apple.anchor);But this doesn't solve anything either. Could anyone help me in understanding how to assign properties to objects, so that those properties are accessible outside of the object's creating function?
  15. Nope, that didn't solve it. Any other ideas, anyone? Still the same behavior