Search the Community

Showing results for tags 'prototype'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 35 results

  1. Hi everybody, To thank the users of this forum who helped me a lot, i put my template available to help new beginners or someone else. This template offers : correct scaling without stretching effect portrait mode (for landscape mode you must invert width and height) works with cocoon in webview+ and canvas+ mode (deviceready implemented) upload the file source.zip in cocoon.io and run it. https://cocoon.io/ simple example with prototype and inheritance use the states (i personnaly put all the states in a single file but you can quite put them in separate files, it's necessary to inform them in index.html eg: <script src="src/otherfile.js"></script> This template is based on : https://github.com/EnclaveGames/Cyber-Orb and how to adjust the scale is based on: Now my template for the beginners , index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>example_test_scale</title> <link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> <style> body { margin: auto; display: table; position: absolute; border:0px; top: 0px; left: 0px; padding: 0; margin: 0; background: #ffff00 } </style> <!--necessary for cocoon.js--> <script src="cordova.js"></script> <script src="src/phaser.js"></script> <script src="src/main.js"></script> </head> <body> </body> <script> document.addEventListener("deviceready", function() { setTimeout(function() { navigator.splashscreen.hide(); }, 5000, false); }); (function() { //start with a game with these resolution : 1280-1920 // personnaly i find it offers the best graphics for all devices but may slow some devices. // after put a safe zone //1280+200 > 1480 //1920 +350 > 2270 (350 is 200*1.5 > ratio from 1920/1280) var safe_zone_width=1480 var safe_zone_height=2270 var w = window.innerWidth ;//* pixelRatio, var h = window.innerHeight ;//* pixelRatio; var lw, lh; if ( h > w ) { lw = h; lh = w; } else { lw = w; lh = h; } var aspect_ratio_device = lw/lh; var aspect_ratio_safe_zone = safe_zone_height / safe_zone_width; var extra_height = 0, extra_width = 0; if (aspect_ratio_safe_zone < aspect_ratio_device) { // have to add game pixels horizontally in order to fill the device screen extra_height = aspect_ratio_device * safe_zone_width - safe_zone_height; } else { // have to add game pixels vertically extra_width = safe_zone_height / aspect_ratio_device - safe_zone_width; } game = new Phaser.Game( safe_zone_width + extra_width, safe_zone_height + extra_height, Phaser.CANVAS, 'game'); game.state.add('boot', boot); game.state.add('preloader', preloader); game.state.add('the_game', the_game); game.state.add('next_screen', next_screen); game.state.start('boot'); })(); </script> </html> my main.js //initialize variables here var test="1...2...3" var text="hello from sprite" //example of prototype => a simple sprite _sprite = function(game,posx,posy,picture){ this.picture=picture this.posx=posx this.posy=posy //call the class sprite from Phaser Phaser.Sprite.call(this,game,this.posx,this.posy,this.picture) this.anchor.setTo(.5,.5) game.add.existing(this) } _sprite.prototype=Object.create(Phaser.Sprite.prototype) // say hello from sprite _sprite.prototype.say_hello=function(){ alert(text) } //use another prototype but with the previous parameter from _sprite, it's inheritance _super_sprite=function(game,posx,posy,picture,super_power){ //call the first prototype _sprite.call(this,game,posx,posy,picture) this.super_power=super_power this.scale.setTo(2,2) } _super_sprite.prototype=Object.create(_sprite.prototype) // add a new characteritic to this prototype _super_sprite.prototype.show_super_power=function(){ alert(this.super_power) } var boot = { preload: function() { }, create: function() { //to scale the game this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; //red color to see the background of the game itself // you must change the background in the index.html to have the same color in the background game // > change the yellow in red it's only to see how the game is scalling this.game.stage.backgroundColor = '#ff4000' this.game.scale.refresh() this.game.state.start('preloader'); }, }; var preloader = { preload: function() { this.load.image('green_circle', 'img/green_circle.png'); this.load.image('white_circle', 'img/white_circle.png'); }, create: function() { this.game.state.start('the_game'); //do not use arrow function like this var some_function=()=>{alert(test)} //it works on webview+ mode but not on canvas mode var some_function=function(){ alert(test) } some_function() } }; var the_game = { create: function(){ //to center an object in your game use this: this.green_circle = this.add.sprite(this.game.world.centerX,this.game.world.centerY,'green_circle') this.green_circle.anchor.setTo(.5,.5) this.game.add.existing(this.green_circle) this.game.time.events.add(2000,function(){this.game.state.start('next_screen')},this); //use prototype => sprite with white_circle this.white_circle=new _sprite(game,this.game.world.centerX,1800,'white_circle') this.game.time.events.add(1000,function(){this.white_circle.say_hello()},this); //use another prototype with inheritance this.super_white_circle=new _super_sprite(game,this.game.world.centerX,1500,'white_circle','i am superman') this.game.time.events.add(1500,function(){this.super_white_circle.show_super_power()},this); this.game.time.events.add(1800,function(){this.super_white_circle.say_hello()},this); }, }; //for the next screen => next state, the green_circle move to top and alpha is minder var next_screen = { create: function(){ console.log("next") this.green_circle = this.add.sprite(this.game.world.centerX,300,'green_circle') this.green_circle.anchor.setTo(.5,.5) this.green_circle.alpha=.5 this.game.add.existing(this.green_circle) }, }; And finally you could download all the template below(template.zip). To launch the app, go to template/www/index.html or upload the file template.zip in cocoon.io and run it. https://docs.cocoon.io/article/developer-app/ Enjoy ! ps : an interesting link to review the basis from javascript in 5 minutes > https://learnxinyminutes.com/docs/javascript/ template.zip
  2. New Playniax Asset Pack Available Now!

    Greetings all,We just released CrashTest Art pack V1.2! Get it at here or see all our stuff here
  3. Hello! I'm trying to refactor my code making some inheritance. I'm using a Character prototype which is supposed to inherit from Phaser.Sprite and then there can be - for example - a Player prototype which inherits from the Character. The problem is that i get this error: this.onTextureUpdate is not a function inside phaser.js when trying to create the Player object inside the create-function of the level. I would be greatful if someone could take a look on this. Here is the code relevant to the issue (I think) (It's in separate files): Character = function(game, x, y, type){ Phaser.Sprite.call(this, game, x, y, type); this.id = 0; this.name = ""; this.health = 0; this.dexterity = 0; this.defense = 0; this.strength = 0; /*Räknas ut*/ this.primalDamage = 0; //TODO: Lägg till uträkning this.weaponDamage = 0; this.attackRate = 0; this.hit = 0; this.protection = 0; this.block = 0; this.reach = 0; /*---------*/ }; Character.prototype = Object.create(Phaser.Sprite.prototype); Character.prototype.constructor = Character; Character.prototype = { countStats: function(){ }, Etc. etc etc...... Then the player: Player = function(game, x, y){ Character.call(this, game, x, y, 'player'); this.equipped = { rightHand: { name: "broadsword", type: "weapon", damage: 4, protection: 0, attackRate: 1.6 , block: 0, }, }; this.health = 20; this.dexterity = 13; this.defense = 14; this.strength = 15; this.groupCombatEnabled = false; this.animations.add('idleRight', [0], 5, true); this.animations.add('right', [0, 1, 2], 5); this.animations.add('hitRight', [0, 3, 4], 5, true); this.animations.add('idleLeft', [5], 5, true); this.animations.add('left', [5, 6, 7], 5); this.animations.add('hitLeft', [5, 8, 9], 5, true); this.animations.add('idleUp', [10], 5, true); this.animations.add('up', [10, 11, 12], 5); this.animations.add('idleDown', [15], 5, true); this.animations.add('down', [15, 16, 17], 5); this.animations.add('hitDown', [15, 18, 19], 5, true); this.reachCircle = this.game.add.graphics(); this.reachCircle.beginFill(0x000000, 1); this.reachCircle.drawCircle(this.x+24, this.y+24, this.reach*48); this.reachCircle.alpha = 0.2; this.reachCircle.endFill(); this.events.onAnimationComplete.add(function(self, animation){ this.animations.stop(true, true); if(animation.name.includes("hit") && this.enemiesAttacked.length > 0){ this.enemiesAttacked.pop().takeDamage(this, "primary"); } }, this); this.wasd = { up: this.game.input.keyboard.addKey(Phaser.Keyboard.W), down: this.game.input.keyboard.addKey(Phaser.Keyboard.S), left: this.game.input.keyboard.addKey(Phaser.Keyboard.A), right: this.game.input.keyboard.addKey(Phaser.Keyboard.D) }; this.combatKeys = { switchCombatStyle: this.game.input.keyboard.addKey(Phaser.Keyboard.Q) }; this.dmgTextColour = "#ff0000"; }; Player.prototype = Object.create(Character.prototype); Player.prototype.constructor = Player; Player.prototype = { checkActions: function(levelObjects){ this.reachCircle.clear(); this.reachCircle.beginFill(0x000000, 1); this.reachCircle.drawCircle(this.x+24 Etc. etc. etc.. Then there is the level: /** * Level state. */ function Level() { Phaser.State.call(this); // TODO: generated method. } /** @type Phaser.State */ var proto = Object.create(Phaser.State.prototype); Level.prototype = proto; Level.prototype.constructor = Level; Level.prototype = { create: function(){ this.map = this.game.add.tilemap('oryxtiles'); this.map.addTilesetImage('tiles', 'tiles'); this.map.addTilesetImage('tree', 'tree'); this.backgroundLayer = this.map.createLayer('backgroundLayer', 768, 768); this.blockLayer = this.map.createLayer('blockLayer', 768, 768 ); this.map.setCollisionBetween(1, 3000, true, 'blockLayer'); this.backgroundLayer.resizeWorld(); this.createItems(); this.createDoors(); var playerStart = this.findObjectsByType('playerStart', this.map, 'objectLayer')[0]; this.player = new Player(this.game, playerStart.x, playerStart.y);
  4. hi, i'm searching to modify a variable with dat gui. Dat.gui appears on my screen and i have no error. The option "speed" appears also and i can modify the value but that do noting on my object. in fact i must access to this.weapon.fire() to update the result but i can't acess to it. What's the true syntax to access this function ? thanks for your help. _weapon = function(delay,posx,posy,speed,frequency,variance,angular,_flag,kill_with_world,special_color){ this.special_color=special_color this.kill_with_world=kill_with_world this.delay=delay this.posx=posx this.posy=posy this.flag_explode=false this.speed=speed this.angular=angular this.frequency=frequency this._flag=_flag this.variance=variance this.sound_pop=game.add.audio('pop') this._flag=true //canon Phaser.Sprite.call(this,game,this.posx,this.posy,'canon') this.anchor.setTo(.5,.5) this.angle=this.angular this.inputEnabled=true this.input.enableDrag(true) this.events.onDragStop.add(logic_position,this) this.events.onDragStart.add(show_grid_on_logic_position,this) this.input.enableSnap(40,40,true,true) game.physics.arcade.enable(this); if(this.special_color=="vrai"){ this.weapon=game.add.weapon(9,'bullet_color') }else{ this.weapon=game.add.weapon(9,'bullet') } if(this.kill_with_world=="faux"){ for (var i = 0; i < 9; i++) { this.weapon.bulletCollideWorldBounds=true this.weapon.bullets.children[i].body.bounce.setTo(1,1) } }else{ this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; } // Because our bullet is drawn facing up, we need to offset its rotation: this.weapon.bulletAngleOffset = 0; // The speed at which the bullet is fired this.weapon.bulletSpeed = this.speed; // Speed-up the rate of fire, allowing them to shoot 1 bullet every 60ms this.weapon.fireRate = this.frequency ; // Add a variance to the bullet angle by +- this value this.weapon.bulletAngleVariance = this.variance; // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically this.weapon.trackSprite(this,0,0,true); game.time.events.add( this.delay,function(){this._flag=false},this ) } _weapon.prototype = Object.create(Phaser.Sprite.prototype) _weapon.prototype.constructor = _weapon _weapon.prototype.update = function(){ if(this._flag==false){ this.weapon.fire() } } //in state Level1// //var gui //var canon=[] canon[0]=new _weapon(800,200,800,900,2990,0,180,hero.flag_level_complete,"vrai","faux") gui=new dat.GUI() gui.add(canon[0],'fire') gui.add(canon[0],'speed',0,50) //
  5. hi, i have two object hero and enemy. My hero is an array with 3 player. when my hero collide with the enemy i would invoke the function : "hero.explode". My snippet is below. the problem is with the function createBodyCallback, i have two problem. the function this.hero.explode works before the collision...and my hero don't touch the enemy....why ? i cant access the body2.otherfunction() because the callback is in fact this.hero.player.body.otherfunction so i have an error. could you help me for these 2 points ? thanks. character = function(){ game.physics.startSystem(Phaser.Physics.P2JS); game.world.setBounds(-1000,-1000,40000,40000) Phaser.Sprite.call(this,game,640,h+500,'rect') this.flag_mouse=false this.flag_show_button=true //cible this.cible=game.add.sprite(w2,300,'cible') this.cible.anchor.setTo(.5,.5) game.physics.p2.enable(this.cible) this.cible.body.static=true this.cible.scale.setTo(1.5,1.5) this.player={} for (var i = 0; i < 3; i++){ this.player[i]=game.add.sprite(640,1980+i*500,'rect') game.physics.p2.enable(this.player[i]) this.player[i].body.setCircle(20) } } character.prototype = Object.create(Phaser.Sprite.prototype) character.prototype.constructor = character character.prototype.explode=function(body1,body2){ body2.sprite.alpha=0 body2.otherfunction() } character.prototype.otherfunction=function(){ console.log("explode") } this.hero=new character() //far for (var i = 0; i < 3; i++){ this.enemy.body.createBodyCallback(this.hero.player[i],this.hero.explode,this) }
  6. My current project uses game states, and I'm to the point where I have a character that can walk between different levels (states), but in every js file where my individual levels are I have all my code for player movement duplicated in each. I'd like to make my code slimmer and more modular because I'm to the point where I'm getting some slow down/lag in chrome browsers, and I'd like to keep scaling my project and that isn't easy with all of this duplicate code in every state. For reference, the way my project is constructed is based off of this tutorial: http://www.emanueleferonato.com/2014/08/28/phaser-tutorial-understanding-phaser-states/ For example, if this were one of my level states: var theGame = function(game){ spriteNumber = null; number = 0; workingButtons = true; higher = true; score = 0; } theGame.prototype = { create: function(){ number = Math.floor(Math.random()*10); spriteNumber = this.game.add.sprite(160,240,"numbers"); spriteNumber.anchor.setTo(0.5,0.5); spriteNumber.frame = number; var higherButton = this.game.add.button(160,100,"higher",this.clickedHigher,this); higherButton.anchor.setTo(0.5,0.5); var lowerButton = this.game.add.button(160,380,"lower",this.clickedLower,this); lowerButton.anchor.setTo(0.5,0.5); }, clickedHigher: function(){ higher=true; this.tweenNumber(true); }, clickedLower: function(){ higher=false; this.tweenNumber(false); } } How could I add methods to the theGame prototype object from a separate JS file? For this example, I'll like to use the clickedHigher method in a handful of different states, but I don't want to have to go through and edit it in each state. In my actually game I'm going to have up 50 different states and each time I refine my controls or add new mechanics I'd have to go through each state and copy paste. Thanks in advance
  7. My current project uses game states, and I'm to the point where I have a character that can walk between different levels (states), but in every js file where my individual levels are I have all my code for player movement duplicated in each. I'd like to make my code slimmer and more modular because I'm to the point where I'm getting some slow down/lag in chrome browsers, and I'd like to keep scaling my project and that isn't easy with all of this duplicate code in every state. For reference, the way my project is constructed is based off of this tutorial: http://www.emanueleferonato.com/2014/08/28/phaser-tutorial-understanding-phaser-states/ For example, if this were one of my level states: theGame.prototype = { create: function(){ number = Math.floor(Math.random()*10); spriteNumber = this.game.add.sprite(160,240,"numbers"); spriteNumber.anchor.setTo(0.5,0.5); spriteNumber.frame = number; var higherButton = this.game.add.button(160,100,"higher",this.clickedHigher,this); higherButton.anchor.setTo(0.5,0.5); var lowerButton = this.game.add.button(160,380,"lower",this.clickedLower,this); lowerButton.anchor.setTo(0.5,0.5); }, clickedHigher: function(){ higher=true; this.
  8. How to access bullets in collide function?

    So I'm currently following @rich 's Shoot-em-up tutorial from over here https://phaser.io/tutorials/coding-tips-007. Please have a look at the source code if you haven't already. From what I understand he create's a weapon array that holds all the weapon types (each of which are an object inside a Weapon object). Now my question is How do I access the current weapon bullets in game.physics.arcade.collide? I've used game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies) and this works fine, the bullets and the enemy collide well. BUT what if I want to kill that bullet? How would I pass the specific bullet that collided with the enemy into a function? This is what I've tried: game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies, function(bullet, enemy) { bullet.kill(); }, null, this); However the above code doesn't work. Bullet is undefined. What do I do?
  9. weapon.prototype problem

    hi, i'm searching to make a prototype with the weapon class but that don't work. i have this error : phaser.min.js:6 Uncaught TypeError: a.parent.removeChild is not a function at c.World.b.DisplayObjectContainer.addChildAt (phaser.min.js:6) at c.World.b.DisplayObjectContainer.addChild (phaser.min.js:6) at c.World.c.Group.add (phaser.min.js:11) at c.GameObjectFactory.existing (phaser.min.js:14) at Object.create (main.js:322) at c.StateManager.loadComplete (phaser.min.js:10) at c.StateManager.preUpdate (phaser.min.js:10) at c.Game.updateLogic (phaser.min.js:12) at c.Game.update (phaser.min.js:12) at c.RequestAnimationFrame.updateRAF (phaser.min.js:18) however i take this from these example https://phaser.io/examples/v2/weapon/asteroids what 's wrong ? Thanks. weapon = function(){ Phaser.Weapon.call(this,game,20,'rect') this.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: this.bulletAngleOffset = 90; // The speed at which the bullet is fired this.bulletSpeed = 400; // Speed-up the rate of fire, allowing them to shoot 1 bullet every 60ms this.fireRate = 60; // Add a variance to the bullet angle by +- this value this.bulletAngleVariance = 10; this.canon = game.add.sprite(320, 500, 'rect'); game.physics.arcade.enable(this.canon); // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically this.trackSprite(this.canon, 14, 0); } weapon.prototype = Object.create(Phaser.Weapon.prototype) weapon.prototype.constructor = weapon weapon.prototype.update = function() { this.fire() } var game_state = { create: function(){ game.physics.startSystem(Phaser.Physics.ARCADE) this.canon=new weapon() game.add.existing(this.canon) }, }
  10. I have started work on Photoshop script that exports layer data to a JSON file that can be imported at runtime by Phaser to recreate the design using images from a sprite sheet. This is still work in progress as I will be cleaning this up and adding more features such as bitmap text support and animated spritesheets. Add separation from the design from the game code. No more manually placing images. Make changes in Photoshop and see them right away in the running game. Does anyone else have a similar tool or process for updating and placing their images in Phaser? I used to use Flash and a FSFL script, but this new setup skips the Flash import process. The pipeline I use is as follows: 1. Photoshop using Generator and PhotoshopPhaserExport.jsx 2. TexturePacker auto creates a spritesheet from the Generator created images using a smart folder (Watch your atlases sizes in real time!) 3. Phaser imports the single spritesheet and the data JSON file for all the states as one file and creates each state when it is loaded 4. I didn't add it to my demo, but I use live.js to auto refresh the game when any changes are made 5. I use VirtualHostX to test locally across multiple devices at once, combined with live.js, they all refresh automatically when the game is updated Photoshop PSD Notes: Use Aa single Photoshop PSD for the whole game with a folder for each state, the name of the folder should match the state name in the code Any images that need to be exported as an image is a smart object with the extension .png , with Generator turned on in Photoshop, all those images will export in real time! Create additional instances of the smart objects can have a unique index as the extension instead of png so they share the same source image, for example blueBox.png, can have more instances named blueBox.1, blueBox.2 ect. The attached zip has a quick demo project, psd, and the Photoshop script that exports the JSON data. This concept is based on some of steps from this post bellow and is still very much work in progress. http://www.html5gamedevs.com/forum/14-phaser/?do=add projectNameZip.zip
  11. hi, i would understand the difference between example 1 and example 2 with the usage of "this.posx" and simply "posx" is it the same ? why in some code i see the usage of this.something ? //example 1 object_physics = function(game,posx,posy,im,Group){ this.posx=posx this.posy=posy Phaser.Sprite.call(this,game,this.posx,this.posy,im) game.physics.arcade.enable(this) this.body.velocity.y=10 Group.add(this) } object_physics.prototype = Object.create(Phaser.Sprite.prototype) object_physics.prototype.constructor = object_physics //example 2 object_physics = function(game,posx,posy,im,Group){ Phaser.Sprite.call(this,game,posx,posy,im) game.physics.arcade.enable(this) this.body.velocity.y=10 Group.add(this) } object_physics.prototype = Object.create(Phaser.Sprite.prototype) object_physics.prototype.constructor = object_physics
  12. hi, I can access to this.timer_text in the bottom of my function. Can you help me ? ////////////////////////////////////////////////////////////////////////////////////////// //huds.js Timer = function(game,Group){ var timer_value="40" this.Group=Group this.timer_text = game.add.bitmapText(w2,h2,'lucky',timer_value, w*.15) this.flag = true game.time.events.loop(Phaser.Timer.SECOND, updateCounter,this) function updateCounter() { if (this.flag){ if (timer_value == 0) { } else { timer_value-- } this.timer_text.setText(timer_value) } } //modif anchors this.timer_text.anchor.x=.5 this.timer_text.anchor.y=.4 this.angle_array=[2820,2920,2740,2850,2760,1700,2800,2910,2020,2930] this.angular = this.angle_array[Math.floor(game.rnd.between(1,this.angle_array.length-1))]; Phaser.Sprite.call(this,game,w2,h2,'roll_turn') this.anchor.x=.5 this.anchor.y=.5 //cache au debut this.visible=false this.alpha=0 //ajout aux groupes this.Group.add(this.timer_text) this.Group.add(this) } Timer.prototype = Object.create(Phaser.Sprite.prototype) Timer.prototype.constructor = Timer Timer.prototype.turn_chooce = function() { this.visible=true this.tween_main=game.add.tween(this).to({alpha:1},900,Phaser.Easing.Linear.None,true,0) this.tween=game.add.tween(this).to({angle:this.angular},1000,Phaser.Easing.Circular.Out,true,1000) this.tween.onComplete.add(move_timer,this) /////////////////////////////////////////////////////////////////////// //////////////HERE MY ERROR I CAN ACCESS TO THIS.TIMER_TEXT > UNDEFINED function move_timer(){ this.flag=true this.timer_text.visible=true var tween00=game.add.tween(this.Group).to({x:0,y:h2-150},300,Phaser.Easing.Linear.None,true) tween00.onComplete.add(next_tw,this) } function next_tw(){ background.flag_close=true } }
  13. Hi all, Just want to share my activity for this October, Protober. It's basically like Inktober/Octobit, but for game designer/programmer. Instead of illustration/pixel art, you need to come up with a new gameplay idea/prototype everyday for the whole month! I have attached some of my prototype here, but feel free to check all the prototypes that I have made so far at: http://harsanalif.com/protober/ Any feedback will be appreciated. Maybe anyone interested following Protober too for the last 10 days?
  14. First and foremost, I want to thank the devs for making Phaser Editor, it's amazing! I'll definitely be purchasing it on my next paycheck (if my company doesn't expense it). For a bit of background I'm new to web-based game development (and web programming as a whole), and Phaser Editor is my entry point! That being said I come from a background as a Unity developer, and so I apologize if many (if not all) of my questions relate more to Phaser and js as a whole and not Phaser Editor in particular, but I'm hoping for the way to best do things using Phaser Editor. These questions are asked having done the "Mario-Style Platformer" tutorial found at: https://gamedevacademy.org/make-a-mario-style-platformer-with-the-phaser-editor/ There are a few things I'm having a bit of trouble wrapping my head around:What exactly is a prototype? Does every object (sprite) have one? Where/how can you access this? Is it the name of the original image file? The first instance you create? The name of a function you first need to write and then assign? How would that be done?When you drag an object from assets to scene, or duplicate an object, does it create a new prototype, or a new instance?Can you assign instance variables to prototypes/objects? Can this be done in the scene editor? (ie every "coin" has the variable "collected" set to "false" at start)What is the best way to do this?In the templates and the "Mario-Style Platformer" tutorial, all logic is done in Level.js. Can you instead place the logic of each prototype/object into its own script? (ie Player.js, Coin.js)As Level.js already loads the assets.json, does every script need to do the same, or can they just access it from Level.js? How is cross-script referencing done?In the same tutorial, all the fruits/coins are collected into a group. Is this a container/parent object? Are the elements then children? What is the best way/when is the best time to assign a variable to all elements? (I tried doing so in Create using "this.pickups.setAll("collected", false);", but when I checked the value in an element later it returned null) In many Phaser examples online, Functions are done with out any form of container (ie Function preload()), and everything is executed by game (ie game.add._____) but in both the tutorial and the templates, functions are done through Level.protoype (ie Level.prototype.preload = function()), and everything is executed by this. (which I assume also points to Level.prototype?). Is there a difference? Is there a reason to doing things one way or the other? What is the best way to check/set a value in each element of the group?(ie Instead of kill the fruit object upon overlap with player, I set them to play an animation. How would I then set them to destroy upon completion?)Is there a way to find a specific element in a group (similar to an array index)?Can you set parent child relations in the scene editor? If not how is this set?Is there a way to use Vectors/containers to compare and assign values? (ie player.position = Vector2(x, y))Is there a way to emulate/simulate a 3 button mouse/middle click? (ie ctrl + alt + left click)I understand that at this time, Phaser Editor does not support Typescript. However as I am more familiar with C based OOP, many have suggested it. Would using Typescript externally alongside Phaser editor break workflow/the project? (From what I understand Phaser Editor does not support editing files externally?)Sorry for the trouble, and thank you for your time!
  15. Hi everyone. I'm creating a game and I was testing it into different browsers. I always use Chrome for my tests and everything is fine there. I tried on Edge and it works perfect as in Chrome. Then I opened it in Firefox and there's a problem. It opens the preloader, the mainMenu page in which there is the name of the game and two buttons, but as I try to click on the "play" button, which brings me to the actual game, I have no answers. When I open the page I get these messages in firefox console log: I think the WebGL error is a Phaser one, because I use CANVAS in my game: (in index.html) var game = new Phaser.Game(800, 600, Phaser.CANVAS,''); And I guess that the "mozHidden" etc line is just a warning. So that TypeError must be the issue. What is the problem with those lines? What am I doing wrong with the instantiation of my game? Is it a problem that I use prototypes for my game like: (in Level1.js) Game.Level1 = function(game) { }; Game.Level1.prototype = { preload:function(game){ //... }, create:function(game){ //... } }; ? Oh, and I tried opening the game in the Firefox safe-mode, without the additional plug-ins, and it works like it should be. Any help would be really appreciated! Thank you very much. EDIT I tried deleting the cache on Chrome and Edge and it doesn't work immediately even there, giving me some phaser errors like the ones before. But no error about my code. And if I refresh the page several times, like 4 or 5 or more, it begins working again like it should. What could this problem be due to?
  16. prototype sprite.tint

    Hi, My prototype below works but i want to have an option to choose if yes or no i put a tint color. So if tint = "none" my sprite have no tint if i put an another color like 0xFFFFFF then my sprite have this tint color. How do you that ? Thanks e = function (game,nameA,posx,posy,width,height,anchor,tint,alpha) { Phaser.Sprite.call(this,game,posx,posy,nameA) this.x=posx; this.y=posy; this.width=width; this.height=height; this.anchor.set(anchor); this.tint=function(tint) { if ( tint == "none" ) { tint=null; } else { tint=tint; } return tint; } this.alpha=alpha;; game.add.existing(this); } e.prototype = Object.create(Phaser.Sprite.prototype); e.prototype.constructor = e; var example = new e(this.game,'rect',100,100,90,90,.5,"none",1)
  17. moving a grid

    Hi, I have the file background.js (below) and in use it to draw some elements of my background. The problem is with my grid. My grid is correctly drawing in my stage but i can't move his position. By default the origin is (0,0). i put grid.x=400 but it's still to x=0. How do you move it ? I try also to build my grid with the prototype function but i don't know do it... //background.js //e for background function draw(e,game,nameA,posx,posy,wi,he,color,valueAlpha) { var e=game.add.sprite(0,0,nameA); e.x=posx; e.y=posy; e.width=wi; e.height=he; e.tint=color; e.alpha=valueAlpha return e } //g for game, w for width, h for height //color like white and red is on a separate file function Grid(e,g,row,line,w,h) { //var group=g.add.group() var grid=[]; for (var j = 0; j < line; j++) { grid[j] = []; for (var i = 0; i < row; i++) { grid[j][i] = draw(e,g,"rect",0,0,w,h,white,1) ; grid[j][i].x = i*(w+1) grid[j][i].y =j*(h+1) }; }; grid.x=400 return grid } function drawE(g,e) { var e=[] e.player=draw(e,g,"rect",0,0,320,480,red,1) e.papers=Grid(e,g,1,9,10,10,80,240) return e } //game.js var theGame = function(game){ background = null } theGame.prototype = { create: function(){ background=drawE(this.game,this.background) } }
  18. Hello forum I am writing a game using phaser v2.4.8 which has several states. The general structure of my game is: Level list - the player can select a level to play on a draggable background Level - each level consists of 5 puzzles (mini games) Puzzle - each puzzle is a state I am fairly new to javascript and phaser (but not to programming or scripting languages). Enough introductions - after watching several phaser tutorials I just couldn't understand why states are defined in the following way: game.state.add('Boot', Game.Boot); ... //in a separate Boot.js file: var Game = {}; Game.Boot = function(game) { this.someVariableName = ...; ... }; Game.Boot.prototype = { preload: function () { this.add.image(...); ... }, create: function() {...}, ... }; Whereas my states are written as so: game.state.add('Boot', BootState); game.state.add('Preload', PreloadState); ... //in a separate js file: var BootState = { preload: function() { game.add.image(...); ... }, create: function() {...}, ... } //in a separate js file: var PreloadState = { preload: function() { game.add.image(...); ... }, create: function() {...}, ... } My questions are: What is the purpose of the 'game' parameter in Game.Boot = function(game) {...} ? Is the game object automatically passed as an argument in game.state.add('Boot', Game.Boot) ? Is there any reason for me to use the first approach instead of the other one? What are the differences? Thank you in advance for your responses Force out
  19. [PIXI] [WIP] Crazy4

    Hi guys, Just to show my new prototype :http://jefframos.github.io/crazy4/ Is a simple connect4, but arcade, the player have few time to take decisions. Is still work in progress and one day I hope I will finish this =) Cheers
  20. I'm working on a Phaser game but I'm running into some sort of scoping issue and I don't know how to solve it (also posted on stackoverflow btw) When the player wins a ResultPanel appears with the score and some buttons. The player can press the buttons to go to the next level or reset etc. The code to handle back/reset/next is in prototype functions, but those aren't yet defined when the constructor is called(?). At is it now, the function doBtnBack is never called when I press the button. What am I doing wrong? What's the right way to do this? // level complete panel constructor ResultPanel = function(game, stars) { this.game = game; // display how many yellow stars var star1 = stars > 0 ? 'star_yellow' : 'star_grey'; var star2 = stars > 1 ? 'star_yellow' : 'star_grey'; var star3 = stars > 2 ? 'star_yellow' : 'star_grey'; // add text and stars this._panelCaption = this.game.add.bitmapText(144, 12, 'bigrigsfont', 'you are winner!', 48); this._panelStar1 = this.game.add.sprite(300-160, 144, 'buttonicon', star1); this._panelStar2 = this.game.add.sprite(300, 144, 'buttonicon', star2); this._panelStar3 = this.game.add.sprite(300+160, 144, 'buttonicon', star3); // add button icons // NOTE: below code runs but something is wrong because // this.doBtnBack this.doBtnReset etc. is undefined this.btnBack = this.game.add.button(300-100, 300, 'buttonicon', this.doBtnBack, this, 'back_grey', 'back_hl'); this.btnReset = this.game.add.button(300, 300, 'buttonicon', this.doBtnReset, this, 'reset_grey', 'reset_hl'); this.btnNext = this.game.add.button(300+100, 300, 'buttonicon', this.doBtnNext, this, 'next_grey', 'next_hl'); }; ResultPanel.prototype.doBtnBack = function() { console.log('Panel button BACK pressed') // never reaches here }; ResultPanel.prototype.doBtnReset = function() { console.log('Panel button RESET pressed'); }; ResultPanel.prototype.doBtnNext = function() { console.log('Panel button NEXT pressed'); }; I also tried this, but that gives an error Uncaught TypeError: this.doBtnBack is not a function this.btnBack = this.game.add.button(300-100, 300, 'buttonicon', function(){this.doBtnBack();}, this, 4, 0, 8);
  21. Game Testing Feedback

    Hey guys, I made this game using phaser and wanted some feedback on it our pc or laptop go to https://soccerhead.herokuapp.com from your pc or laptop and connect using your smartphone. Some areas I have concerns with are :- Ball gets stuck in middle of player Audio on safari Not sure how to combat these obstacles but any feedback is appreciated thanks
  22. [Prototype] JustRun

    Hi guys! I am newbie in html5 gamedev, I would like to share with you my first desktop html5 game. Feel free to feedback and suggestions. Every rate, facebook like and twitter followers are greatly appreciate. Thanks for your support ! JustRun it's a prototype of game, which was created using HTML5 technology. Now it's avaliable to play at Kongregate.com. We apriciate every comment and rate at Kongregate.com to help future development of the game. The basics of JustRun: Our hero is stuck at the moving maze to escape you must find lever which opens a way to exit. Also, you have to find at least one gem to score points and compete with other players. There are three gems in maze, more collected means better score. Be careful there are increasing number of monsters in the maze, dead equals to 0 scored points. Time does matter for the score so be fast. Will you risk collecting all 3 gems ? PLAY Controls: ARROW KEYS - moving (hold) Z - sprint X - action key Special thanks to Rajawali and Vibrato for creating monster sprite used in the game. Visit Us Like Us Tweet Us
  23. Hello, I've got a peculiar thing. I want to capture the instances in such a way that once I've left my create scene handlers, I can return to my model calculators (i.e. scene hosts). User will engage with some form fields, during which time, I want to look up the related model calculators and make changes, potentially rebuild the scene based on the input. I've tried something like this, but it falls over on account of the scene object, deep within which is circular I think; somewhere is, at any rate. Point is, jumping to/from JSON is not going to work very well for purposes of what I am doing. <script type="application/json" id="data"> {"calc1": null, "calc2": null, "calc3": null} </script> Perhaps I will need to completely decouple the calculator configuration from the scene modeling bits, that's probably the right longer range answer. But I want to see if I can make it work without jumping to/from JSON first. Partly, too, is my ignorance concerning JavaScript object life cycle of variables throughout the scripts, i.e. if they survive the load and can be referenced at a later point. Regards, Michael Powell
  24. Extending an extended class

    Hello! I'm having a hell of a time trying to create different bullet types in my game (and this problem extends to different weapon types, enemy types, etc.). I know how to extend Sprite, and I have done so to make a base bullet class. However, I can't seem to figure out how to extend that class to make bullets that behave differently. For example: I have a weapon of type Pistol that will shoot bullets of type BulletPistol, and a weapon of RocketLauncher that will shoot bullets of type BulletRocket. The form is like a typical bullet, while the latter will start moving slowly, then accelerate. My thinking is that for the base Bullet class, I can put in all of the default behavior. For BulletPistol, and any other weapons that use this behavior, I merely pass in the sprite I want to use. For BulletRocket, I will need to override the update function (at least) to change how the rocket moves. Here is the code in my Bullet.js file: var Bullet = function(game, key) { console.log("Bullet.prototype"); Phaser.Sprite.call(this, game, 0, 0, key); this.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST; this.anchor.set(0.5); this.checkWorldBounds = true; this.outOfBoundsKill = true; this.exists = false; this.tracking = false; this.scaleSpeed = 0; }; Bullet.prototype = Object.create(Phaser.Sprite.prototype); Bullet.prototype.constructor = Bullet; Bullet.prototype.fire = function(x, y, angle, speed, gx, gy) { gx = gx || 0; gy = gy || 0; this.reset(x, y); this.scale.set(1); this.game.physics.arcade.velocityFromAngle(angle, speed, this.body.velocity); this.angle = angle; }; Bullet.prototype.update = function() { console.log("Bullet.prototype.update"); if (this.tracking) { this.rotation = Math.atan2(this.body.velocity.y, this.body.velocity.x); } if (this.scaleSpeed > 0) { this.scale.x += this.scaleSpeed; this.scale.y += this.scaleSpeed; } }; //////////////////////////////////////////////////////////// // PISTOL //////////////////////////////////////////////////////////// var BulletPistol = function(game) { console.log("Bullet.Pistol.prototype"); Bullet.call(game, 'img_BulletPistol'); }; BulletPistol.prototype = Object.create(Bullet.prototype); BulletPistol.prototype.constructor = BulletPistol; BulletPistol.prototype.fire = function(x, y, angle, speed, gx, gy) { // }; BulletPistol.prototype.update = function() { console.log("Bullet.Pistol.prototype.update"); }; Here are the error messages and console logs I get when I load my game: I'm not sure what I'm doing wrong, exactly. I went through 11 pages on this forum and several more on Google, but the closest things I could find to what I'm attempting were written in other languages. Any insight on how to extend an extended class is greatly appreciated!
  25. Hi, I am new to PhaserJS and I have been learning the basics with the Interphase book. I would like to know why is everything defined inside the prototype? Is this for avoiding performance issues? Common practice? Or because I am going in this way you can reuse the State several times in the game? Also, what is the purpose of defining objects properties inside the function and then use them in the prototype? For example, see this.sprite and this.bg in the example below; is this a way of sharing the parameters across states? var MyGame = {};MyGame.StateA = function (game) { this.sprite = null; this.bg = null;};MyGame.StateA.prototype = { preload: function () {}, create: function () {}};