fedora

Members
  • Content Count

    31
  • Joined

  • Last visited

  • Days Won

    1

fedora last won the day on May 3

fedora had the most liked content!

About fedora

  • Rank
    Advanced Member

Recent Profile Visitors

1107 profile views
  1. Glad I was able to help .. a little ... I need to circle back to figure out why in mine it sometimes does not clear/refresh --
  2. Thank you for updating the the code and also the other tips/direction. I am excited to work with it and discover the possibilities. Thanks again it is very much appreciated.
  3. I was able to overcome the font issue. At one point, I got confused because there is no .xml for the big_font.png. But now the menu comes up as expected. In working with the fonts, I came across this thread which has online editors that some may fine useful - I know they have been to me tonight. Regarding the level icons and clicking to go to the game -- before passing level data -- all I was attempting to do tonight is to drop in your code and see if I could click a level icon and have it take me to the game state. Unfortunately, I have not been successful (and trust me it is not from lack of trying {or shall we say banging my head against keyboard}. The dropped code worked fine (ie no errors), but I think where I am faulting is the place I need to call the these function. I tried every possible location thinking the most appropriate var PLAYER_DATA = [0,3,2,3,1,1,1,2];var holdicons = [];var LevelData = [ { title:"An easy level to start", layout:"550f000202020000000002020000000202000000000202020001", timelimit:120, backcolor:"#3333ff", mustscore:1000, tutorialmessage:1 }, { title:"Introducing enemies", layout:"550f000000000040000200000200400000400002000002004000", timelimit:75, backcolor:"#33ffcc", mustscore:1600, tutorialmessage:2 }, { title:"Now try this", layout:"550f0000200000021116200024c0180010292202000010000001", timelimit:100, backcolor:"#9933ff", mustscore:2500 },];var menuState = function(game){ var levelparams = LevelData[this._levelindex] }; onLevelIconDown: function(sprite, pointer) { // retrieve the iconlevel, stored in sprite.health here var levelnr = sprite.health; console.log('onLevelIconDown - levelnr=' + levelnr); // simulate button press animation to indicate selection var IconGroup = this._icons[levelnr - this._offset - 1]; var tween = this.game.add.tween(IconGroup.scale) .to({ x: 0.9, y: 0.9}, 100, Phaser.Easing.Linear.None) .to({ x: 1.0, y: 1.0}, 100, Phaser.Easing.Linear.None) .start(); // start the level after tween is complete tween.onComplete.add(function(){this.onLevelSelected(sprite.health);}, this); }, onLevelSelected: function(levelnr) { console.log('onLevelSelected ---> levelnr=' + levelnr); // pass levelnr variable to 'Game' state this.game.state.states['states.game']._levelIndex = levelnr-1; this.game.state.start('states.game'); // etc. }, My thought was that even though the data would be bogus that clicking would take me to the game state. I am hoping you can help.
  4. THANK YOU. Great suggestion and a tool I did not know about, but will definitely add to the tool box. The issue was the font. Although I had commented it out in one section -- //game.add.bitmapText(256, 24, 'font72', 'Select a level!', 48);I missed some area and so it was causing the JS to hang. font72:{URL:['assets/fonts/font72.png', 'assets/fonts/font72.xml'], name:'font72'},// add stars, if neededif (isLocked == false) {var txt = game.add.bitmapText(24, 16, 'font72', ''+levelnr, 48);var icon2 = game.add.sprite(0, 0, 'levelselecticons', (2+stars));IconGroup.add(txt);Not sure why this is causing an issue, but will troubleshoot this evening. I will also be attempting to get the levels information to work and the user input. I will let you know of my progress and hope you don't mind me asking for assistance if I get stuck.
  5. Thanks for the information. Let me say, when I take your code and copy it directly -- works like a charm (not surprising) So my next trick was just to try and drop the code into my game and I have been unsuccesful. I am using the following State to show a dashboard and high score of the game. It works fine: var states = { main: "main", game: "game",};var graphicAssets = { menu:{URL:'assets/images/menuscreen-version3.png', name:'menu'},};// MAIN STATEvar mainState = function(game){ this.tf_start;};mainState.prototype = {init: function(score) { var score = score || 0; this.highestScore = this.highestScore || 0; this.highestScore = Math.max(score, this.highestScore); }, preload: function () { game.load.image(graphicAssets.menu.name, graphicAssets.menu.URL); }, create: function () { this.add.sprite(0, 0, 'menu'); //highest score text = "HIGHEST SCORE: "+this.highestScore; style = { font: "15px Arial", fill: "#fff", align: "center" }; var h = this.game.add.text(this.game.width/2, this.game.height/2 + 50, text, style); h.anchor.x = 0.5; h.anchor.y = -6.5; game.input.onDown.addOnce(this.startGame, this); }, startGame: function () { game.state.start(states.game); },};var game = new Phaser.Game(gameProperties.screenWidth, gameProperties.screenHeight, Phaser.AUTO, 'gameDiv'); game.state.add(states.main, mainState); game.state.add(states.game, gameState); game.state.start(states.main);So I tried to apply the same general structure: var states = { main: "main", menu: "menu", game: "game",};var graphicAssets = { menu:{URL:'assets/images/menuscreen-version3.png', name:'menu'}, levelselecticons:{URL:'assets/images/levelselecticons.png', name:'levelselecticons', width:96, height:96}, };var fontAssets = { font72:{URL:['assets/fonts/font72.png', 'assets/fonts/font72.xml'], name:'font72'},};var PLAYER_DATA = [0,3,2,3,1,2];var holdicons = [];// MENU STATEvar menuState = function(game){ };menuState.prototype = { preload: function () { game.load.spritesheet(graphicAssets.levelselecticons.name, graphicAssets.levelselecticons.URL, graphicAssets.levelselecticons.width, graphicAssets.levelselecticons.height, graphicAssets.levelselecticons.frames); //game.load.bitmapFont(fontAssets.font72.name, fontAssets.font72.URL); }, create: function () { game.stage.backgroundColor = 0x80a0ff;game.add.text(256, 24, 'Select a level!', {font: '48px Arial', fill: '#FFFFFF', align: 'center'}); //game.add.bitmapText(256, 24, 'font72', 'Select a level!', 48);this.createLevelIcons();this.animateLevelIcons(); }, update: function () {// nothing to do but wait until player selects a level }, render: function () {// display some debug info..? }, // ------------------------------------- // Add level icon buttons // ------------------------------------- createLevelIcons: function () {var levelnr = 0;for (var y=0; y < 3; y++) {for (var x=0; x < 4; x++) {// player progress info for this levellevelnr = levelnr + 1;var playdata = PLAYER_DATA[levelnr-1];// decide which iconvar isLocked = true; // lockedvar stars = 0; // no starsif (playdata > -1) {isLocked = false; // unlockedif (playdata < 4) {stars = playdata;}; // 0..3 stars};// calculate position on screenvar xpos = 160 + (x*128);var ypos = 120 + (y*128);// create iconholdicons[levelnr-1] = this.createLevelIcon(xpos, ypos, levelnr, isLocked, stars);var backicon = holdicons[levelnr-1].getAt(0);// keep level nr, used in onclick methodbackicon.health = levelnr;// input handlerbackicon.inputEnabled = true;backicon.events.onInputDown.add(this.onSpriteDown, this); }; }; }, createLevelIcon: function (xpos, ypos, levelnr, isLocked, stars) {// create new groupvar IconGroup = game.add.group();IconGroup.x = xpos;IconGroup.y = ypos;// keep original position, for restoring after certain tweensIconGroup.xOrg = xpos;IconGroup.yOrg = ypos;// determine background framevar frame = 0;if (isLocked == false) {frame = 1};// add backgroundvar icon1 = game.add.sprite(0, 0, 'levelselecticons', frame);IconGroup.add(icon1);// add stars, if neededif (isLocked == false) {var txt = game.add.bitmapText(24, 16, 'font72', ''+levelnr, 48);var icon2 = game.add.sprite(0, 0, 'levelselecticons', (2+stars));IconGroup.add(txt);IconGroup.add(icon2);};return IconGroup; }, onSpriteDown: function (sprite, pointer) {// retrieve the iconlevelvar levelnr = sprite.health;if (PLAYER_DATA[levelnr-1] < 0) {// indicate it's locked by shaking left/rightvar IconGroup = holdicons[levelnr-1];var xpos = IconGroup.xOrg;var tween = game.add.tween(IconGroup).to({ x: xpos+4 }, 20, Phaser.Easing.Linear.None).to({ x: xpos-4 }, 30, Phaser.Easing.Linear.None).to({ x: xpos+4 }, 40, Phaser.Easing.Linear.None).to({ x: xpos }, 50, Phaser.Easing.Linear.None).start();} else {// simulate button press animation to indicate selectionvar IconGroup = holdicons[levelnr-1];var tween = game.add.tween(IconGroup.scale).to({ x: 0.9, y: 0.9}, 100, Phaser.Easing.Linear.None).to({ x: 1.0, y: 1.0}, 100, Phaser.Easing.Linear.None).start();tween._lastChild.onComplete.add(function(){console.log('OK level selected! -> ' +sprite.health);}, this)// }; }, animateLevelIcons: function () {// slide all icons into screenfor (var i=0; i < holdicons.length; i++) {// get variablesvar IconGroup = holdicons[i];IconGroup.y = IconGroup.y + 600;var y = IconGroup.y;// tween animationgame.add.tween(IconGroup).to( {y: y-600}, 500, Phaser.Easing.Back.Out, true, (i*40)); }; },};// GENERALvar game = new Phaser.Game(gameProperties.screenWidth, gameProperties.screenHeight, Phaser.AUTO, 'gameDiv');game.state.add(states.main, mainState);game.state.add(states.menu, menuState);game.state.add(states.game, gameState);game.state.start(states.menu);Unfortunately, all I get is the colored background with a blank square. I was able to add the title text but not using the bitmapped font. I am glad I took this step before I tried to tack the passing of level data on figuring out the click to function. I am hoping you can spot my mistake -- Thanks for any assitance.
  6. Thank you for posting the sample code -- super useful for my understanding as I create a level selector screen in my game. I do have a couple of probably dumb questions -- How do you tie the Level to the appropriate action -- ie when user clicks Level 1 how does it know where to go (and would you recommend separate .js files for each level)I assume this would be placed in function update() but a sample would helpI assume it would be straight forward to remove the stars and just use the code to pass the level info IS there a "best way" to pass the level data to the menu screenThanks in advance for any help/guidance
  7. In my code, I am using the following to create a timer that counts down: var counter = 60;create: function () {timerText = game.add.text(game.world.centerX, game.world.centerY, 'TIMER: 60', {font: '15px Arial', fill: '#FFFFFF', align: 'center'});timerText.anchor.setTo(0.5, 12.4);game.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);}updateCounter: function () {counter -= 1;timerText.setText('TIMER: ' + counter);}, timeUp: function () {stateText.text="GAME OVER";stateText.visible = true; },The above works as expected -- my problem is that when the game ends and the user plays again the timer becomes glitchy showing at times negative numbers or starting at weird places .. I assume what I need to do is reset the time or detroy the timer at the game end function but I have been unsuccesful in figuring out how to do so -- Any guidance would be greatly appreciated --- I think it is probably something simple -- but I could be wrong ---
  8. In case anyone is looking for the answer -- the below is thanks to the expertise of jmp909 (http://www.html5gamedevs.com/topic/18140-how-drag-sprite-around-circle/#entry107548) here's one way to do it using Sin/Cos http://phaser.io/sandbox/gXbgAMnK/play and another using phaser's point rotation function (with a distance constraint... http://phaser.io/doc...nt.html#rotate) http://phaser.io/sandbox/wDpGcNHm/play I've taken 0 angle as the top of the circle, but that's not the normal way angles are measured so i've shifted the value accordingly
  9. jmp909 Thanks. That worked perfectly. But I guess you knew it would (fyi I used your first suggestion) I know I can alter speeds of the left/right keys by adding: if(leftKey.isDown) { angle+=speed+4 moved=true }I know this is not what you asked -- so I will do some digging to see what I can come up with as aoptions.
  10. jmp909 -- Is it possible to use your example -- but instead of mouse drag you move by using cursor keys -- I was unable to figure it out -- Any assistance would be appreciated.
  11. Currently, I have this script in my application to move the player in a circle using the mouse (taken from this example: http://phaser.io/sandbox/CpErwgAd/play) : var mouseX = this.input.x; var mouseY = this.input.y; theta = Math.atan2(mouseX-cX, mouseY-cY) var newX = Math.sin(theta) * radius; var newY = Math.cos(theta) * radius; rocket.x=cX + newX; rocket.y=cY + newY;I would like to change the above to key control ("A"/'D") -- but can't get the right code to work. FYI, I am using the cursor arrows for other movement with no problem. Any assistance would be greatly appreciated.
  12. Thank you. I too have seen it done numerous times. Definitely understand your explanation and the challenge of matching together pieces and parts of a sprite. I feel confident and comfortable on the ability to get them to work together -- but I was hoping to be able to see a sample/tutorial when it comes to the actual code -- even just a snip usually helps me as I try to create in new areas. I am surprised that I have not been able to find anything in my searches -- but maybe I am just searching wrong terms. I definitely want to go with the first (more complex) approach because it will improve the User experience. Please let me know of any such tutorials as I continue to investigate options.
  13. I am looking for some guidance or example of how to integrate into my game the ability for users to create their own "player." I would like them to be able to select a character and then be able to customize that character (change hair; shape; body etc) prior to playing. I have searched extensively but have been unsuccessful in locating any assistance/tutorials/examples online for this type of action.
  14. Thanks. The sprite can now move but unfortunately it is not following the direction of whatever you rotated it to -- it is moving to the edges of the game ---
  15. I am attempting to create movement of a player (Ship) where holding down the left and right key will rotate the player (ship) -- and holding down the up key moves the player (ship) in the direction of said angle -- similar to http://gamemechanicexplorer.com/#thrust-2 . Unfortunately, I can get the player (ship) to rotate right and left with no problem, but when I use the up arrow nothing happens. I can only guess I am missing something obvious -- but hope that someone can spot it -- because I am missing it --- create: function() { this.ROTATION_SPEED = 180; this.ACCELERATION = 200; this.MAX_SPEED = 250; this.DRAG = 50; this.player = this.game.add.sprite(this.game.width/2, this.game.height/2, 'player'); this.player.anchor.setTo(0.5, 0.5); this.player.angle = 360; this.game.physics.enable(this.player, Phaser.Physics.ARCADE); this.player.body.maxVelocity.setTo(this.MAX_SPEED, this.MAX_SPEED); this.player.body.drag.setTo(this.DRAG, this.DRAG); this.game.camera.follow(this.player); this.cursors = this.game.input.keyboard.createCursorKeys(); }, update: function() { if (this.player.x > this.game.width) this.player.x = 0; if (this.player.x < 0) this.player.x = this.game.width; if (this.player.y > this.game.height) player.y = 0; if (this.player.y < 0) this.player.y = this.game.height; if (this.cursors.left.isDown) { this.player.body.angularVelocity = -this.ROTATION_SPEED; } else if (this.cursors.right.isDown) { this.player.body.angularVelocity = this.ROTATION_SPEED; } else { this.player.body.angularVelocity = 0; } if (this.cursors.up.isDown) { this.player.body.acceleration.x = Math.cos(this.player.rotation) * this.ACCELERATION; this.player.body.acceleration.y = Math.sin(this.player.rotation) * this.ACCELERATION; } else (this.cursors.down.isDown) { this.player.body.acceleration.setTo(0, 0); } },Thank you in advance for the assistance.