Jump to content

Search the Community

Showing results for tags 'prototype'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. Hi! I'm new to this forum. I've searched a lot, but couldn't find a way to fix my issue. What I'm trying to do is to override destroy method of the Sprite class. Here's a code, that I use (TypeScript): const destroySprite = Sprite.prototype.destroy; console.log(PIXI.Sprite.prototype, PIXI.Sprite, Sprite.prototype, Sprite, PIXI); Sprite.prototype.destroy = function (options: any) { // doing some extra logic destroySprite.call(this, options); }; But when I debug the application - I see that I can only step into this overridden method from the derived objects (like Text, TilingSprite etc.). Pixi's version in the package.json is: "pixi.js": "^5.3.8", Also I use webpack 5 for modules bundling. I have some suspicion that it may be the source of problems. And there's a result console.log, that I've added to the code snippet above: I would be very thankful if someone could give me an advise on how that issue can be fixed. Thanks in advance.
  2. What softwares do you use, or know to be used, for fast prototyping? What do you find limiting about them and why are them better than others? By 'softwares' I also mean web apps and libraries.
  3. Ohayo! Description: Currently in my free time i'm working on crysis-like 2D shooter game prototype about aliens invasion (events between Crysis 2 and Crysis 3) and specialy trained humans in new version of nanosuit (less power of Prophet suit but more soldiers gets it). It will be multiplayer arena shooter, but for now i'm focusing on singleplayer training mission gameplay, and after i complete with fixing prototype with players feedback i'll start working on the core of the game which is multiplayer arena part. Game works smoothly on Google Chrome (game optimisation for Firefox is on future todo list) and was designed for gamepads (PlayStation and Xbox), but you can play with mouse and keyboard too. Right now aliens are very strong so gameplay is focused on tactics and hide&seek more than just running around and shooting everything you see ;P It runs on mobile too but there is no virtual controls (it's on future todo list) so don't ask me for it now Right now i'm asking you guys to tell me how does controls feels and how much time you had to play to destroy all 4 alien bases (big green dots on minimap, you can kill them only with 2 grenade shots per base :P). Play Online (please, use Chrome): http://soulhunter.psichix.io Tech used: - Oxygen Core (my html5 game engine toolset based on best Unity and Godot concepts mixed with latest best html5 apis); - ES7 with babel transpiler; - Webpack for game bundling and live development; I don't know what i should say more about techs, because everything that is there, it is those 3 things If you're interrested in something more about tech, and i will be happy to tell everything you ask ------ BTW. I want to publish topic/article about game engine used here - which subforum should i use to place that kind of topic?
  4. 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/ NOTICE for canvas+, avoid this syntax, that don't work in canvas+, in webview and webview+ no problem let variable; const anothervariable; var myFunc=()=>{} and prefer this: var variable; var myFunc = function(){}; 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(0.5,0.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(0.5,0.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(0.5,0.5); this.green_circle.alpha=0.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 liste of tools i use : image editor => https://www.gimp.org/fr/ vector image => https://inkscape.org/fr/ font to image => http://kvazars.com/littera/ convert music to ogg => https://audio.online-convert.com/fr/convertir-en-ogg reduce png => https://tinypng.com/ particle editor => https://phaser-particle-editor.firebaseapp.com/ text editor the best => https://neovim.io/doc/user/nvim.html plugin with nvim : Plug 'scrooloose/nerdtree' Plug 'morhetz/gruvbox' Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' } Plug 'Raimondi/delimitMate' Plug 'rhysd/github-complete.vim' Plug 'easymotion/vim-easymotion' Plug 'terryma/vim-multiple-cursors' Plug 'vim-syntastic/syntastic' Plug 'kien/ctrlp.vim' Plug 'majutsushi/tagbar' Plug 'pangloss/vim-javascript' Plug 'vim-scripts/indenthtml.vim' Plug 'walm/jshint.vim' syntax style correct => http://jshint.com/ colorscheme => https://github.com/joshdick/onedark.vim os : awesome wm on linux with zsh an interesting link to review the basis from javascript in 5 minutes > https://learnxinyminutes.com/docs/javascript/ template.zip
  5. Hi, I'm coming from Unity (C#), I've followed some JS tutorials, but I can't find really clear answers about OOP. Because many js online documentation talks about web developpement, I don't know if it's better to use CLASSES over PROTOTYPES in javascript game dev ? What th pros, what the cons ? (Or where can I find answers about ?)
  6. 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);
  7. 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) //
  8. 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) }
  9. 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
  10. 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.
  11. 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?
  12. 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) }, }
  13. 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
  14. 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
  15. 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 } }
  16. 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?
  17. 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!
  18. 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?
  19. 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)
  20. espace

    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) } }
  21. 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
  22. 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
  23. 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);
  24. 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
  25. 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
  • Create New...