Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Search the Community

Showing results for tags 'example'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • 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

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Website URL

Twitter

Skype

Location

Interests

Found 27 results

  1. Harvey
    Hello everyone, firstly I am new to Phaser, but I would really like to create a typing/educational game ! (like moon-type : http://www.wordgames.com/moon-type-2.html) I have already created a background and a caracter (the simplest stuff), but I have no idea how to create moving text blocks containing a dictionnary (although I have a .txt file with a list of all existing words), progressive difficulty and a scoring system.. I know, I'm asking a lot, but i really need help, I'm more on the actual look of the game. Please help me ! Thank you in advance.
  2. ShivamS
    This is an example for changing the scenes when an object hits a certain value on x-axis using basic HTML, Phaser and JavaScript. Index.Html file. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="phaser.js"></script> <script src="game.js"></script> <title>Test</title> </head> <body> </body> </html> Now the Game.js file content:- This contains the Scene wise functions. 1. GameScene1 var pikachu; var GameScene1 = new Phaser.Class({ Extends:Phaser.Scene, initialize: function GameScene1() { Phaser.Scene.call(this,{key: 'GameScene1'}); }, preload: function() { this.load.image('pikachu','pikachu.png'); }, create:function () { cursors= this.input.keyboard.createCursorKeys(); this.pikachu = this.add.image(400, 350, 'pikachu').setScale(0.2); var txt= this.add.text(300,19,'Scene1 button'); txt.setInteractive().on('pointerdown', function () { this.scene.scene.start('GameScene2'); }) }, update:function () { if (cursors.right.isDown) { if (this.pikachu.x !=1000) { this.pikachu.x += 2.0; } } else if (cursors.left.isDown) { if (pikachu.x !=0) { pikachu.x -= 2.0; } } if(this.pikachu.x== 700){ this.scene.start('GameScene2'); } } }); The update:function contains the most important part of this example: if(this.pikachu.x== 700){ this.scene.start('GameScene2'); This defines if the value of x is 700 for the object's position it will trigger to load "GameScene2" i.e. the next scene. 2. GameScene2 var GameScene2 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene2() { Phaser.Scene.call(this,{ key: 'GameScene2'}); }, preload: function () { }, create: function () { cursors = this.input.keyboard.createCursorKeys(); var txt = this.add.text(300, 19, 'Exit'); txt.setInteractive().on('pointerdown', function () { this.scene.scene.start('GameScene1'); }) }, update: function () { } }); Similarly the pointerdowndown method is used in the GameScene2 for exit button. Below are some screenshots of the program which will help you in understanding it better:- 1. The initial screen. 2. Moving the object to right side on x-axis where it is about to touch 700. 3. On moving the above object a bit more rightwards it'll trigger the scene to change i.e. to the next GameScene2. This Scene is completely empty as you can see. The object is no longer visible as it's not inserted in the GameScene2. I am new to phaser so if there are any mistakes please correct me, also I am happy to help. :D
  3. Ppozniak
    Phaser 3 BOILERPLATES | STARTERS Unify, upgrade, use. Last updated: March 6 Table of contents: 1. Intro 2. create-phaser-app 3. List of existing boilerplates 4. What kind of features we need/want 5. What's the point Intro: Hello there everyone! As Phaser 3 came out I immediately started to look after some Boilerplate which would take care of basic stuff and speed up the development. If you don't know what I am talking about, think of create-react-app, but for Phaser. There are a few already, however I think that is one of the things that shouldn't be re-created every time, but I'd rather see one, powerful, generator that is community driven, updated, and has many options. Richard has mentioned that he prefers this to be created by community, and just highlighted on the Phaser website. I am aware that sometimes you need something really different and boilerplate X won't suit your needs, but that's where configuration comes in (for example question at the beginning which physics you want to use). Unless even that can help you - get a different boilerplate/create new one. I want to help and in my opinion boilerplates are great way to unify the community, show out the best practices and speed up the development. Let me know what do you think about it. create-phaser-app: So currently I am developing this generator, which follows the convention of create-X-app. It will be configurable with --options, or by default running a "wizard" where you select basic options. At the start there will be only plain JS and typescript probably, but later on I'm planning to add things like multiple examples (ping-pong, platformer, etc) and many other stuff, but also some --basic flag where you get 0 configuration small project without any webpacks or anything! https://github.com/phaser-contrib/create-phaser-app Here's the repo. Project will be open up for contributions after I prepare the base. Hopefully after everything's prepared community will be able to focus this one and stop creating new ones, unless they really need to. Existing boilerplates list: https://github.com/oliverbenns/phaser-starter - https://github.com/rblopes/generator-phaser-plus - by @rblopes https://github.com/lean/phaser-es6-webpack/tree/phaser3 - (phaser 3 on different branch, i think it's still in development for p3) by @leandro Boilerplates/examples (things that fall in into example category, but still can be a good foundation) https://github.com/nkholski/phaser3-es6-webpack - generic platformer template (mario in this case) and it's based on phaser-es6-webpack by @nkholski I'll keep the list updated, you can give links in the comments too! Features: What should the perfect boilerplate have Recognizable name ES6 transpilation with babel ES6, CoffeeScript or TypeScript Webpack, along with live and hot reload Environment variables Continuous delivery and continuous deployment Images compress JS minify Standard folder structure with basic scenes like preload screen, game Config file for game configuration with all possible options Maybe something that will make sprite bundles ES lint configuration? (not quite sure as many people have different ways of writing code, however maybe just a small base for further configuration?) CLI commands (like create new object) Popular building integrations (Cordova, Cocoon etc) at least on some level Easy way to update Phaser Configurable at the start: Provide bigger example? or just standard template (for example do you want only one example asset, or whole game generated) Physics selection List of some basic useful plugins? That's all coming to my mind for now, leave the comments what would you like to see in a boilerplate! The point?: I know this may be not immediately clear "what the hell this guy want to do with this topic". I think it would be nice if community choose one boilerplate that already is in a good shape and drop all the focus on it. I don't think that this will be better if every person creates a new boilerplate for no good reason and reinvents the wheel. So to summarize: Create a list of boilerplates to have it in one place Let's choose together a boilerplate which community would accept to take care of, becoming a kind of "official" boilerplate (again think of create-react-app that is used by most of the people). (and yes, I am aware that not everybody will want that, but in most cases unified standard is a good thing, I guess?) List of features that this boilerplate would ideally have. I want to hear your feedback about the whole concept, maybe I am dreaming too much. From my side: https://github.com/lean/phaser-es6-webpack/tree/phaser3 seems to be the most popular, however don't think it's phaser 3 ready yet? Haven't looked at it yet. https://github.com/rblopes/generator-phaser-plus is also looking great, I've used it at it seems it has most of the features. What would I like to hear from you guys: Do you like the idea? If yes, would you like to prefer to choose an existing boilerplate or create a new one How would you name it if new one? If new one, clean start or forked from other project? What features would you add to the list Do you know any other generators that should be on the list? So let me know what do you think about it, let the discussion begin. Yey. Best regards.
  4. mind0n
    Babylon JS have excellent documentation, however, there's still broken links exists and really hope some one can fix it to make the documentation perfect. Open page https://doc.babylonjs.com/examples/ Click the first link item (not the word Document): Link to Typescript Playground Expected result: Page opened successfully at the right panel Actual result: Right panel displayed page not found error Page Not found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
  5. digitsensitive
    I just updated my repo with a new game (flappy bird). You can see the full source code and hopefully it will help you with your projects. https://github.com/digitsensitive/phaser3-typescript/blob/master/src/games/flappyBird/flappyBird.md
  6. olzi
    Hello phaser.io community. Here are two addresses for the same phaser.io example. One is hosted on the official site, and the other by me: https://phaser.io/examples/v2/input/game-scale http://olli.wtf/battleground3/scale.html Their javascript content should be identical, but the trouble is that I'm seeing inconsistent behavior on the example hosted by me. Steps to reproduce: 1. Open Chrome desktop browser (I'm on Windows 7 64-bit Home Premium, Chrome 64.0.3282.140 (Official Build) (64-bit)) 2. Activate Chrome's developer tools (pressing F12) 3. Toggle device toolbar on and select iPad from the toolbar, so that a touch device can be emulated 4. Open the example page: https://phaser.io/examples/v2/input/game-scale 5. When the example has loaded, click on one of the melon sprites in the right side of the screen, and take note of the "World X" coordinate in the debug panel 6. Using the keyboard arrow keys, scroll the camera enough to the right so that the melon sprite that was originally clicked is now on the left side of the screen 7. Click the same melon sprite again and take note of the "World X" coordinate again 8. Compare the two "World X" coordinates. They should match, and at this point they do. 9. Repeat steps 1-8, but in step 4 open the same example that is hosted by me: http://olli.wtf/battleground3/scale.html. Result of step 8 then is that the "World X" coordinates do not match. Since the javascript content should be the same in both examples, tackling this is a little difficult. Is there maybe some deployment process I'm missing that would add extra javascript/css etc?
  7. CaptainCannabis
    Took me some time to understand the example with a blank tilemap. Maybe because it comes along with mouse input and extraction of tiles from a predefined source. So i thought i'll leave this here. assets/bg.png is an image with 32x32 pixels holding 4 different background sprites. Dynamic tile map created from an array (found in another example): var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background', __dirname+'/assets/bg.png'); } var cursors; var map; var sand; var layer1; var obstacks; var tileset1; var tileset2; function create() { game.stage.backgroundColor = '#2d2d2d'; // Create some map data dynamically // Map size is 128x128 tiles var data = ''; for (var y = 0; y < 24; y++) { for (var x = 0; x < 24; x++) { data += game.rnd.between(0, 3).toString(); if (x < 23) { data += ','; } } if (y < 23) { data += "\n"; } } //console.log(data); // Add data to the cache game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV); map = game.add.tilemap('dynamicMap',16, 16); // Das Tilset für den Boden hinzufügen tileset1 = map.addTilesetImage('background','background', 16, 16); console.log('tileset1.tileWidth',tileset1.tileWidth); console.log('tileset1.tileHeight',tileset1.tileHeight); console.log('tileset1.columns',tileset1.columns); console.log('tileset1.rows',tileset1.rows); console.log('tileset1.total',tileset1.total); // Layer für den Hintergrund erstellen, Maße durch das data-Array vorgegeben layer1 = map.createLayer(0); layer1.scrollFactorX = 1.5; layer1.scrollFactorY = 1.5; // Scroll it layer1.resizeWorld(); console.log('layer1.world.x',layer1.world.x); console.log('layer1.world.y',layer1.world.y); console.log('layer1.world.x',map.heightInPixels); console.log('layer1.world.y',map.widthInPixels); console.log('map.tileWidth',map.tileWidth); console.log('map.tileHeight',map.tileHeight); // Hindernisse obstacks = game.add.group(); cursors = game.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) { game.camera.x--; } else if (cursors.right.isDown) { game.camera.x++; } if (cursors.up.isDown) { game.camera.y--; } else if (cursors.down.isDown) { game.camera.y++; } } function render() { } Dynamic tile map with "on the fly" created random tile: var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background', __dirname+'/assets/bg.png'); } var cursors; var map; var layer1; var obstacks; var tileset1; function create() { game.stage.backgroundColor = '#2d2d2d'; // Eine leere TileMap erstellen map = game.add.tilemap(); // Das Tilset für den Boden hinzufügen tileset1 = map.addTilesetImage('background','background', 16, 16); console.log('tileset1.tileWidth',tileset1.tileWidth); console.log('tileset1.tileHeight',tileset1.tileHeight); console.log('tileset1.columns',tileset1.columns); console.log('tileset1.rows',tileset1.rows); console.log('tileset1.total',tileset1.total); // Layer für den Hintergrund erstellen, 24 x 24 Tiles die jeweils 16 x 16 px groß sind layer1 = map.create('background', 24, 24, 16, 16); layer1.scrollFactorX = 1.5; layer1.scrollFactorY = 1.5; // Scroll it layer1.resizeWorld(); console.log('layer1.world.x',layer1.world.x); console.log('layer1.world.y',layer1.world.y); console.log('layer1.world.x',map.heightInPixels); console.log('layer1.world.y',map.widthInPixels); console.log('map.tileWidth',map.tileWidth); console.log('map.tileHeight',map.tileHeight); // Das Layer mit Tiles füllen for (var y = 0; y < 24; y++){ for (var x = 0; x < 24; x++){ // Zufälliges Bild aus dem Hintergrund-Tileset var SpriteIndex = game.rnd.between(0, tileset1.total-1).toString(); var t = new Phaser.Tile(layer1, SpriteIndex, x, y, 16, 16); map.putTile( t, x, y, layer1); } } // Hindernisse obstacks = game.add.group(); cursors = game.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) { game.camera.x--; } else if (cursors.right.isDown) { game.camera.x++; } if (cursors.up.isDown) { game.camera.y--; } else if (cursors.down.isDown) { game.camera.y++; } } function render() { }
  8. qwertysam
    I've used libraries in other languages before that provide different types of scaling via viewport types. The best example of what I want is from a library called libgdx for Java, their ScreenViewport. Essentially what I want is to: Fill the screen meaning that there's no black bars or the sides of the game Maintain the pixel ratio meaning that every in-game pixel is equal to one pixel on screen, so no stretching Not maintain aspect ratio meaning that it doesn't matter to my game what the aspect ratio of the game is. Its job is to forget about aspect ratio and follow the above two criteria The way how I'm achieving this is by using Phaser's EXACT_FIT scaling type so that the canvas automatically resizes to fit the window. Then upon resizing, I update the size of the camera and the game's renderer so that they match the new canvas size. Here's the code I have in my create function. this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; // Phaser.ScaleManager.SHOW_ALL USER_SCALE this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setResizeCallback(function () { var width = window.innerWidth; var height = window.innerHeight; console.log('size: ' + width + ', ' + height); this.camera.setSize(width, height); this.game.renderer.resize(width, height); }, this); It works fantastic in the horizontal axis, but when the window shrinks vertically, there is some vertical stretching of the pixels. Here's a working example of my issue And here's the code on GitHub, in case it's of any help. Here are some related topics that I've done my research on, in case they are also of help Thank you for reading, any help is appreciated! EDIT: I've isolated the issue, it appears to be that when the game is initially created, the height that I specify is the initial height of the canvas. e.g. var game = new Phaser.Game(16 * 80, 9 * 80, Phaser.AUTO, ''); Phaser's scaling method allows the canvas to grow in height, but not to shrink in height. The renderer is rendering to a much taller canvas (which goes off-screen) than expected, therefore causing the vertical stretching. Any thoughts on how I can shrink the canvas myself? Thanks!
  9. catafest
    I try to start it with this example : http://phaser.io/examples/v2/filters/blue-dots I use download zip , but seam need to fix a php server. I try to fix by using just the files and folder to run the example that but seem is not working . Can you give me some help ? Thank you. Best regards.
  10. Befive.Info
    Hi everyone! I uploaded a sample Phaser JS script of roulette with a hope that someone will find it useful. This Phaser JS script demonstartes a solution to show roulette that rotates and stops at a random position. Needle ticks with animation and sound as the roulette spins. The script itself could be rewritten into a really simple code and should be able to be integrate into any game at ease. You could use it for a simple game, a small lottery in your game, board games etc. (The code is totally a mess. Pardon my lousy coding manner.) https://github.com/BeFiveINFO/phaser_roulette_example Thank you for reading!
  11. MikauSchekzen
    Greetings, When searching for example/questions on how to do multiple cameras in Phaser, I came up with only one answer: using multiple Phaser instances. That was not how I wanted things to be done, so I made my own variant on it (which I saw Rich made a comment about on how it could be done) with a RenderTexture. I made a repository on GitHub containing a (fairly) heavily commented example on how things could be done this way, plus a live example. I'm honestly not sure about performance, but I can't imagine it would be worse than having multiple instances of Phaser. Look through the example, clone the repository and modify it to your heart's content, and if you have any questions, I'll do my best to answer them. This example was tested with Phaser CE 2.7.3 -MikauSchekzen
  12. espace
    it is a question that has already been often asked but no real answer. Can a kind soul could adapt the concepts of this tutorial about fulscreen on this empty phaser https://www.sitepoint.com/use-html5-full-screen-api/ here the virgin jsfiddle https://jsfiddle.net/espace3d/y8u4o5cw/ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create, update: update, render: render }); function preload() { game.load.image('circle', 'https://s13.postimg.org/xjhlzmiev/disc_png.png'); }; function create() { }; function update() { }; function render() { } I believe that this solution will delight many people....thanks for the repliers
  13. ian
    Is there any Demo or Example how should Brake code on component (from blender Group or Parent Children). So that each component is seperatet .ts or .js and so that each component have its own methods and propertis? greetings ian
  14. thefootballguy
    Working with a friend so, still more less the question can be of sending tiled data between client server through map array would be nice.
  15. thefootballguy
    There is only one of the coins falling and I don't understand why that is. I looked at the code but I can't seem to figure it out.You will have to reload the page if you miss it ( it is the 5th coin from the left). http://phaser.io/examples/v2/tilemaps/create-from-objects
  16. ian
    Hi, can we get source file of .blender of espilit example. Is possible to get .blender file of Espilit example which demo is on this page http://www.sitepoint.com/understanding-collisions-physics-babylon-js-oimo-js/ I would like to see how is model created in blender. So can we get .blender file of room which is loded from above demo? Greetings
  17. Lemon
    I'm trying to create the space invaders example game for an assignment, but I have no idea what to do. What do I do with the phaser examples folder?
  18. thatguy64
    Does anybody know of a html example of landscaping?(http://www.icemark.com/tower/landscaping.htm) If so post link.
  19. Shortstuff81000
    I started this thread to share my modified Phaser game examples, ask for help with them, and share the code for the complete versions. Visual Studio 2015 is my preferred IDE, so just ignore the web.config file when you open the .zip file. Invaders.zip
  20. Shortstuff81000
    Hello! I am relatively new to Phaser, so I downloaded the examples and started making little adjustments to them. So far the Invaders example is my favorite, so I started separating it into separate files and implementing my own graphics. Audio will come later. That is, after I figure out what to do with my game variables. I started copying the invaders code into a Visual Studio Phaser project I'd been playing around with. It wasn't much; just a bouncing Phaser logo, so I knew it would be easy to replace the existing code with the Invaders code. Everything works except for the code in the Game file: GameStates.Game = function (game) {};var player;var aliens;var bullets;var enemyBullet;var explosions;var ufoExplosions;var bulletTime = 0;var cursors;var fireButton;var starfield;var score = 0;var scoreString = '';var scoreText;var lives;var firingTimer = 0;var stateText;var livingEnemies = [];var colors = [ 0xff0000, 0xff1e00, 0xff4000, 0xff5e00, 0xff7f00, 0xff9d00, 0xffbf00, 0xffdd00, 0xffff00, 0xddff00, 0xbfff00, 0x9dff00, 0x80ff00, 0x5eff00, 0x40ff00, 0x1eff00, 0x00ff00, 0x00ff1e, 0x00ff40, 0x00ff5d, 0x00ff80, 0x00ff9d, 0x00ffbf, 0x00ffdd, 0x00ffff, 0x00ddff, 0x00bfff, 0x009dff, 0x0080ff, 0x005dff, 0x0040ff, 0x001eff, 0x0000ff, 0x1e00ff, 0x4000ff, 0x5e00ff, 0x8000ff, 0x9d00ff, 0xbf00ff, 0xdd00ff, 0xff00ff, 0xff00dd, 0xff00bf, 0xff009d, 0xff007f, 0xff005e, 0xff0040, 0xff001e, 0xffffff];GameStates.Game.prototype = { create: function () { game.physics.startSystem(Phaser.Physics.ARCADE); // The scrolling starfield background starfield = game.add.tileSprite(0, 0, 1024, 768, 'starfield'); starfield.tint = colors[Math.floor(Math.random() * colors.length)]; // Our bullet group bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(30, 'playerBullet'); bullets.setAll('anchor.x', 0.5); bullets.setAll('anchor.y', 1); bullets.setAll('outOfBoundsKill', true); bullets.setAll('checkWorldBounds', true); bullets.setAll('tint', colors[Math.floor(Math.random() * colors.length)]); // The enemy's bullets enemyBullets = game.add.group(); enemyBullets.enableBody = true; enemyBullets.physicsBodyType = Phaser.Physics.ARCADE; enemyBullets.createMultiple(30, 'enemyBullet'); enemyBullets.setAll('anchor.x', 0.5); enemyBullets.setAll('anchor.y', 1); enemyBullets.setAll('outOfBoundsKill', true); enemyBullets.setAll('checkWorldBounds', true); enemyBullets.setAll('tint', colors[Math.floor(Math.random() * colors.length)]); // The hero! player = game.add.sprite(512, 640, 'playerShip'); player.anchor.setTo(0.5, 0.5); player.tint = colors[Math.floor(Math.random() * colors.length)]; game.physics.enable(player, Phaser.Physics.ARCADE); // The baddies! aliens = game.add.group(); aliens.enableBody = true; aliens.physicsBodyType = Phaser.Physics.ARCADE; createAliens(); // The score scoreString = 'Score : '; scoreText = game.add.text(10, 10, scoreString + score, { font: '34px Arial', fill: '#fff' }); // Lives lives = game.add.group(); game.add.text(game.world.width - 100, 10, 'Lives : ', { font: '34px Arial', fill: '#fff' }); // Text stateText = game.add.text(game.world.centerX, game.world.centerY, ' ', { font: '84px Arial', fill: '#fff' }); stateText.anchor.setTo(0.5, 0.5); stateText.visible = false; for (var i = 0; i < 3; i++) { var ship = lives.create(game.world.width - 100 + (30 * i), 60, 'playerShip'); ship.anchor.setTo(0.5, 0.5); ship.angle = 90; ship.alpha = 0.4; } //Player Explosion pool explosions = game.add.group(); explosions.createMultiple(30, 'playerExplosion'); explosions.forEach(setupInvader, this); explosions.setAll('tint', colors[Math.floor(Math.random() * colors.length)]); //Enemy Explosion pool enemyExplosions = game.add.group(); enemyExplosions.createMultiple(30, 'enemyExplosion'); enemyExplosions.forEach(setupInvader, this); enemyExplosions.setAll('tint', colors[Math.floor(Math.random() * colors.length)]); // And some controls to play the game with cursors = game.input.keyboard.createCursorKeys(); fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, createAliens: function () { for (var y = 0; y < 10; y++) { for (var x = 0; x < 12; x++) { var alien = aliens.create(x * 48, y * 48, 'UFO'); alien.anchor.setTo(0.5, 0.5); alien.animations.add('fly', [0, 1, 2, 3], 20, true); alien.play('fly'); alien.body.moves = false; alien.tint = colors[Math.floor(Math.random() * colors.length)]; } } aliens.x = 100; aliens.y = 50; // All this does is basically start the invaders moving. Notice we're moving the Group they belong to, rather than the invaders directly. var tween = game.add.tween(aliens).to({ x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true); // When the tween loops it calls descend tween.onLoop.add(descend, this); }, setupInvader: function (invader) { invader.anchor.x = 0.5; invader.anchor.y = 0.5; invader.animations.add('enemyExplosion'); }, descend: function () { aliens.y += 10; }, update: function () { // Scroll the background starfield.tilePosition.y += 5; if (player.alive) { // Reset the player, then check for movement keys player.body.velocity.setTo(0, 0); if (cursors.left.isDown) { player.body.velocity.x = -400; } else if (cursors.right.isDown) { player.body.velocity.x = 400; } else if (cursors.up.isDown) { player.body.velocity.y = -200; } else if (cursors.down.isDown) { player.body.velocity.y = 200; } game.world.wrap(player, 0, true); // Firing? if (fireButton.isDown) { fireBullet(); } if (game.time.now > firingTimer) { enemyFires(); } // Run collision game.physics.arcade.overlap(bullets, aliens, collisionHandler, null, this); game.physics.arcade.overlap(player, aliens, playerHitsAlien, null, this); game.physics.arcade.overlap(enemyBullets, player, enemyHitsPlayer, null, this); } }, render: function () { }, collisionHandler: function (bullet, alien) { // When a bullet hits an alien we kill them both bullet.kill(); alien.kill(); // Increase the score score += 20; scoreText.text = scoreString + score; // And create an explosion var explosion = enemyExplosions.getFirstExists(false); explosion.reset(alien.body.x, alien.body.y); explosion.play('enemyExplosion', 30, false, true); if (aliens.countLiving() == 0) { score += 1000; scoreText.text = scoreString + score; enemyBullets.callAll('kill', this); stateText.text = " You Won, \n Hit Enter to restart"; stateText.visible = true; //the "click to restart" handler //game.input.onTap.addOnce(restart, this); //game.input.keyboard.addKey(Phaser.Keyboard.ENTER); this.enterKey = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER); this.enterKey.onDown.add(restart, this); } }, playerHitsAlien: function (player, alien) { // When the player hits an alien we kill them both live = lives.getFirstAlive(); if (live) { live.kill(); } alien.kill(); //No score for losing a life //Reset the player's location player.x = 512; player.y = 640; // And create an explosion var eExplosion = explosions.getFirstExists(false); eExplosion.reset(alien.body.x, alien.body.y); eExplosion.play('enemyExplosion', 30, false, true); // And create an explosion var pExplosion = playerExplosion.getFirstExists(false); pExplosion.reset(player.body.x, player.body.y); pExplosion.play('playerExplosion', 30, false, true); if (aliens.countLiving() == 0) { score += 1000; scoreText.text = scoreString + score; enemyBullets.callAll('kill', this); stateText.text = " You Won, \n Hit Enter to restart"; stateText.visible = true; //the "click to restart" handler //game.input.onTap.addOnce(restart, this); //game.input.keyboard.addKey(Phaser.Keyboard.ENTER); this.enterKey = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER); this.enterKey.onDown.add(restart, this); } }, enemyHitsPlayer: function (player, bullet) { bullet.kill(); live = lives.getFirstAlive(); if (live) { live.kill(); } // And create an explosion var explosion = explosions.getFirstExists(false); explosion.reset(player.body.x, player.body.y); explosion.play('playerExplosion', 30, false, true); // When the player dies if (lives.countLiving() < 1) { player.kill(); enemyBullets.callAll('kill'); stateText.text = " GAME OVER \n Hit Enter to restart"; stateText.visible = true; //the "click to restart" handler //game.input.onTap.addOnce(restart,this); //game.input.keyboard.addKey(Phaser.Keyboard.ENTER); this.enterKey = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER); this.enterKey.onDown.add(restart, this); } }, enemyFires: function () { // Grab the first bullet we can from the pool enemyBullet = enemyBullets.getFirstExists(false); livingEnemies.length = 0; aliens.forEachAlive(function (alien) { // put every living enemy in an array livingEnemies.push(alien); }); if (enemyBullet && livingEnemies.length > 0) { var random = game.rnd.integerInRange(0, livingEnemies.length - 1); // randomly select one of them var shooter = livingEnemies[random]; // And fire the bullet from this enemy enemyBullet.reset(shooter.body.x, shooter.body.y); game.physics.arcade.moveToObject(enemyBullet, player, 120); firingTimer = game.time.now + 2000; } }, fireBullet: function () { // To avoid them being allowed to fire too fast we set a time limit if (game.time.now > bulletTime) { // Grab the first bullet we can from the pool bullet = bullets.getFirstExists(false); if (bullet) { // And fire it bullet.reset(player.x, player.y + 8); bullet.body.velocity.y = -400; bulletTime = game.time.now + 100; } } }, resetBullet: function (bullet) { // Called if the bullet goes out of the screen bullet.kill(); }, restart: function () { // A new level starts //resets the life count lives.callAll('revive'); // And brings the aliens back from the dead aliens.removeAll(); createAliens(); //revives the player player.revive(); //hides the text stateText.visible = false; }};I have a strong feeling that the variables should go inside the "GameStates.Game.prototype = {". But when I put them there, I get many expectations of semicolons, identifiers, and closing curly brackets, and syntax errors. If I put them outside of the "GameStates.Game.prototype = {", I cannot leave the title screen. Where else can I put them?
  21. FrankCheng
    There are a few samples in studying sample may not function properly such as "Creature Dragon" it has an error. I don't know if he's working properly.
  22. madmarcel
    I working on my first game in Phaser, a pirate baking sim, where the player controls two hands using mouse and keyboard and interacts with items on the kitchen bench. BUT I got stuck on a specific problem: I would like to be able to find a point under the 'hands' of the arms, so that I can use that to add items in the correct place in the gameworld, and I want to use the same point to identify what is under the 'hands', so that the user can interact with and pickup items. The x and y coordinates of righthand.getBounds() are close to correct, but I suspect that is not the correct approach. The arms are currently just plain sprites, fixed to the camera and anchored to rotate around the bottom center edge. // right armthis.rightHand = this.handsGroup.create( 1074, 800, 'righthand' );this.rightHand.scale.set(0.75 , 0.75 );this.rightHand.anchor.setTo(0.5, 1.0);this.rightHand.frame = 0;this.rightHand.rotation = this.arms.rotR;this.rightHand.fixedToCamera = true;Is there is an easy solution or am I modelling my game incorrectly? The (unfinished) pirate baking game with graphics, music. hookhands etc is here: http://gamejolt.com/games/strategy-sim/arrrr-pirate-baking/64428/ I've attached a zip file with a cut down version of the code (feel free to use it to make yer own pirate arm waving game, arrrr! The attached code omits the heaving bench and sliding objects. Thanks, Marcel armpicker-phaser.zip
  23. jonoco
    Hey, I'm pretty new to the Phaser scene, and I was having trouble grokking the Phaser's signal system. I noticed there weren't any code examples in the Examples section, so once I got a handle on it, I made this little signals example: http://phaser.io/sandbox/NUpUhphz Hope this might help anyone else getting to know signals better!
  24. Joe Kopena
    This weekend I've been playing with fullscreening, specifically SHOW_ALL, and had some challenges getting the stock examples and project template to work correctly on both my laptop and phone. After mostly nailing those down, I have a blog post up that may be useful to others: http://www.rocketshipgames.com/blogs/tjkopena/2014/10/fullscreen-scaling-in-phaser/ I've also posted that demo code and the start of a revised boilerplate project template to GitHub: https://github.com/RocketshipGames/phaser-fullscreen I'd be appreciative of any comments, suggestions, and pointers to best practices. In particular, next I'd like to figure out why it gets scaled disproportionately in Firefox. I'm also not sure the orientation prompt (in the larger project) is being handled optimally, it shows flashes of rotated screen in the transition though there may be nothing much to be done about that. The standard project template doesn't show the orientation prompt at all in fullscreen mode because of the div not being contained in the fullscreen element. Thx
  25. BdR
    I'm trying to get familiar with the Phaser framework, and organise my project properly to expand it into a game. So far it's looking good, Phaser has a lot of useful stuff For now, I've created a test project where several enemies should be moving around and the player has to catch them, simply by running into them. It's not really a game, just test project. It has the usual Phaser functions preload/create/update, a createSomeAnimals functino and a separate "Animal" class. I want the Animal class to contain all the logic for moving around. Unfortunately there is an error in the Animal constructor class, and I don't know how to fix it. QuoteUncaught TypeError: Cannot set property 'frame' of undefinedIt happens when trying to access the phaser.sprite of the Animal constructor class. // animal constructorvar Animal = function(game, x, y, animaltype) { //this.sprite = game.add.sprite((CANVAS_WIDTH / 2), (CANVAS_HEIGHT / 2), 'zookeeper'); Phaser.Sprite.call(this, game, x, y, 'zookeeper'); .. // **ERROR OCCURS ON NEXT LINE** //this.sprite.frame = animaltype; // animal frame 0..3 ..}Animal.prototype = Object.create(Phaser.Sprite.prototype);Animal.prototype.constructor = Animal;I'm also not 100% familiar with how JavaScript classes and prototypes work, so I suspect I've made some errors in that area. See this example github here:https://github.com/BdR76/phaseranimals Or the full source code below:// -------------------------------------// START THE GAME// -------------------------------------var CANVAS_WIDTH = 800;var CANVAS_HEIGHT = 600;var ANIMAL_COUNT = 20;var ANIMAL_SPEED = 2;var game = new Phaser.Game(CANVAS_WIDTH, CANVAS_HEIGHT, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });var player;var animalsGroup;// -------------------------------------// PHASER GAME FUNCTIONS// -------------------------------------function preload() { game.load.spritesheet('zookeeper', 'zookeeper.png', 80, 80);}function create() { // arcade physics game.physics.startSystem(Phaser.Physics.ARCADE); // blue background game.stage.backgroundColor = 0xbada55; // The hero! player = game.add.sprite((CANVAS_WIDTH / 2), (CANVAS_HEIGHT / 2), 'zookeeper'); player.frame = 4; // frame with zookeeper player.anchor.setTo(0.5, 0.5); game.physics.enable(player, Phaser.Physics.ARCADE); // The animals! animalsGroup = game.add.group(); animalsGroup.enableBody = true; animalsGroup.physicsBodyType = Phaser.Physics.ARCADE; createSomeAnimals(); }function update() { // Run collision game.physics.arcade.overlap(animalsGroup, player, playerHitsAnimal, null, this);}function render() { // for (var i = 0; i < animalsGroup.length; i++) // { // game.debug.body(animalsGroup.children[i]); // }}// -------------------------------------// GAME LOGIC// -------------------------------------function createSomeAnimals () { for (var i = 0; i < ANIMAL_COUNT; i++) { // which type of animal 0..3 var antype = (i % 4); // i modulo 4, will cycle through values 0..3 // random position var x = game.rnd.integerInRange(0, CANVAS_WIDTH-80); var y = game.rnd.integerInRange(0, CANVAS_HEIGHT-80); // get inactive animal from animals object pool var animal = this.animalsGroup.getFirstDead(); // if there aren't any available, create a new one if (animal === null) { animal = new Animal(this.game, x, y, antype); this.animalsGroup.add(animal); }; // else revive the animal (set it's alive property to true) animal.revive(); animal.x = x; animal.y = y; animal.AnimalType = antype; };}function playerHitsAnimal (animal, player) { // player hits an animal, remove the animal animal.kill();}// -------------------------------------// ANIMAL OBJECT// -------------------------------------// animal constructorvar Animal = function(game, x, y, animaltype) { //this.sprite = game.add.sprite((CANVAS_WIDTH / 2), (CANVAS_HEIGHT / 2), 'zookeeper'); Phaser.Sprite.call(this, game, x, y, 'zookeeper'); // set animal fields this.xspeed = 1; this.yspeed = 1; this.AnimalType = animaltype; // **ERROR ON NEXT LINE** -> Uncaught TypeError: Cannot set property 'frame' of undefined //this.sprite.frame = animaltype; // animal frame 0..3 // enable physics for animal //game.physics.enable(this, Phaser.Physics.ARCADE);}// Specific JavaScript object/construcor stuff going on here(?)// Animals are a type of Phaser.SpriteAnimal.prototype = Object.create(Phaser.Sprite.prototype);Animal.prototype.constructor = Animal;// animal update move aroundAnimal.prototype.update = function() { // If this animal is disabled then don't do anything if (this.active) { //aads switch (this.AnimalType) { case 0: // not moving break; case 1: // move away from player if (this.x > this.game.input.activePointer.x) {this.x = this.x + ANIMAL_SPEED;}; if (this.x < this.game.input.activePointer.x) {this.x = this.x - ANIMAL_SPEED;}; if (this.y > this.game.input.activePointer.y) {this.y = this.y + ANIMAL_SPEED;}; if (this.y < this.game.input.activePointer.y) {this.y = this.y - ANIMAL_SPEED;}; // don't move outside screen bounds if (this.x < 0) {this.x = 0}; if (this.x > CANVAS_WIDTH) {this.x = CANVAS_WIDTH}; if (this.y < 0) {this.y = 0}; if (this.y > CANVAS_HEIGHT) {this.y = CANVAS_HEIGHT}; break; case 2: // move left-right this.x = this.x + this.xspeed; // move in opposite direction when on screen bounds if ( (this.x < 0) || (this.x > CANVAS_WIDTH) ) {this.xspeed = -1 * this.xspeed;}; break; case 3: // move all over screen this.x = this.x + this.xspeed; this.y = this.y + this.yspeed; // move in opposite direction when on screen bounds if ( (this.x < 0) || (this.x > CANVAS_WIDTH) ) {this.xspeed = -1 * this.xspeed;}; if ( (this.y < 0) || (this.y > CANVAS_HEIGHT) ) {this.yspeed = -1 * this.yspeed;}; break; }; };}
×
×
  • Create New...