• Content Count

  • Joined

  • Last visited

About fedora

  • Rank
    Advanced Member

Recent Profile Visitors

1,022 profile views
  1. fedora

    Timer/Counter Reset On Game End

    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. fedora

    Timer/Counter Reset On Game End

    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. fedora

    Keyboard Instead of Mouse Control

    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. fedora

    How Drag sprite around circle

    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. fedora

    How Drag sprite around circle

    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. fedora

    Creating A Custom Player

    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. fedora

    Creating A Custom Player

    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. fedora

    Trouble With Ground

    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.