摘要：
1新建方块rect，新建颜色，点击事件pointerup，颜色设置明亮度更加10%添加，重新在设置方块明亮度varconfig={type:Phaser.AUTO,parent:'phaser-example',800,height:600,scene:{create:create}};vargame=newPhaser.Game(config);functioncreate(){varcolor
1 新建 方块 rect，新建颜色，
点击事件 pointerup，颜色设置明亮度 更加10%添加，重新在设置
方块明亮度
var config ={ type: Phaser.AUTO, parent: 'phaser-example', 800, height: 600, scene: { create: create } }; var game = newPhaser.Game(config); function create () { var color1 = new Phaser.Display.Color(150, 0, 0); var color2 = new Phaser.Display.Color(150, 0, 0); var rect1 = this.add.rectangle(200, 300, 200, 400, color1.color); var rect2 = this.add.rectangle(420, 300, 200, 400, color2.color); this.input.on('pointerup', function () { //brighten the color by 10% color2.brighten(10); rect2.setFillStyle(color2.color); }); }
2222222222222222
解释一下代码， 先写配置，载入图片和声音，鼠标有样式，over，out，下去，起来，样式变化，只有在down的时候 才播放剩余，这这么回事， 资源里一共9个声音，同时有按钮绑定对应声音的功能 var config ={ type: Phaser.AUTO, parent: 'phaser-example', 800, height: 600, scene: { preload: preload, create: create }, pixelArt: true, audio: { disableWebAudio: true} }; var game = newPhaser.Game(config); function preload () { this.load.image('title', 'assets/pics/catastrophi.png'); this.load.spritesheet('button', 'assets/ui/flixel-button.png', { frameWidth: 80, frameHeight: 20}); this.load.bitmapFont('nokia', 'assets/fonts/bitmap/nokia16black.png', 'assets/fonts/bitmap/nokia16black.xml'); this.load.audioSprite('sfx', 'assets/audio/SoundEffects/fx_mixdown.json', [ 'assets/audio/SoundEffects/fx_mixdown.ogg', 'assets/audio/SoundEffects/fx_mixdown.mp3']); } function create () { this.add.image(400, 300, 'title'); var spritemap = this.cache.json.get('sfx').spritemap; var i = 0; for (var spriteName inspritemap) { if (!spritemap.hasOwnProperty(spriteName)) { continue; } makeButton.call(this, spriteName, 680, 115 + i*40); i++; } this.input.on('gameobjectover', function (pointer, button) { setButtonFrame(button, 0); }); this.input.on('gameobjectout', function (pointer, button) { setButtonFrame(button, 1); }); this.input.on('gameobjectdown', function (pointer, button) { this.sound.playAudioSprite('sfx', button.name); setButtonFrame(button, 2); }, this); this.input.on('gameobjectup', function (pointer, button) { setButtonFrame(button, 0); }); } function makeButton(name, x, y) { var button = this.add.image(x, y, 'button', 1).setInteractive(); button.name =name; button.setScale(2, 1.5); var text = this.add.bitmapText(x - 40, y - 8, 'nokia', name, 16); text.x += (button.width - text.width) / 2; } function setButtonFrame(button, frame) { button.frame = button.scene.textures.getFrame('button', frame); }
3 解释一下代码， 通过 data存储数据，通过 text来设置数据，填充和 字体，设置数组数据的text会自动换行很简单同时也高速了 text的存放位置
var config ={ type: Phaser.AUTO, parent: 'phaser-example', 800, height: 600, scene: { create: create } }; var game = newPhaser.Game(config); function create () { //Using the Scene Data Plugin we can store data on a Scene level this.data.set('lives', 3); this.data.set('level', 5); this.data.set('score', 2000); var text = this.add.text(100, 100, '', { font: '64px Courier', fill: '#00ff00'}); text.setText([ 'Level: ' + this.data.get('level'), 'Lives: ' + this.data.get('lives'), 'Score: ' + this.data.get('score') ]); }
4一个脊柱，可以自己在晃动的，场景加了一个， 载入了 位置和 spine，面板上添加了 var config ={ type: Phaser.WEBGL, parent: 'phaser-example', 800, height: 600, backgroundColor: '#2d2d2d', scene: { preload: preload, create: create, pack: { files: [ { type: 'scenePlugin', key: 'SpinePlugin', url: 'plugins/SpinePlugin.js', sceneKey: 'spine'} ] } } }; var game = newPhaser.Game(config); function preload () { this.load.setPath('assets/spine/demos/'); this.load.spine('set1', 'demos.json', [ 'atlas1.atlas']); } function create () { this.add.spine(400, 600, 'set1.spineboy', 'idle', true); } 5 给图片添加 位置的方法，经纬度为0，0，设置orgine为0 this.load.image('logo', 'assets/sprites/phaser.png'); this.add.image(0, 0, 'logo').setOrigin(0);
6 这个太牛了， 一个人物精灵，设置了缩小，和倾斜的角度，然后有三种状态， 跑步，发射，站着时的晃动，都是动态的，不需要update方法也能执行
var config ={ type: Phaser.CANVAS, parent: 'phaser-example', 800, height: 600, backgroundColor: '#2d2d66', scene: { preload: preload, create: create, //update: update, pack: { files: [ { type: 'scenePlugin', key: 'SpineCanvasPlugin', url: 'plugins/SpineCanvasPlugin.js', sceneKey: 'spine'} ] } } }; varcontrols; var game = newPhaser.Game(config); function preload () { this.load.image('logo', 'assets/sprites/phaser.png'); this.load.setPath('assets/animations/spine/'); this.load.spine('boy', 'spineboy.json', 'spineboy.atlas'); } function create () { this.add.image(0, 0, 'logo').setOrigin(0); //this.spine.skeletonRenderer.debugRendering = true; //this.spine.skeletonRenderer.triangleRendering = true; var spineBoy = this.add.spine(600, 550, 'boy', 'run', true); var spineBoy3 = this.add.spine(400, 300, 'boy', 'idle', true); spineBoy3.setScale(0.3); spineBoy.setScale(0.3); spineBoy.setAngle(-45); var spineBoy2 = this.add.spine(200, 400, 'boy', 'shoot', true); spineBoy2.setScale(0.3); var cursors = this.input.keyboard.createCursorKeys(); //var controlConfig = { //camera: this.cameras.main, //left: cursors.left, //right: cursors.right, //up: cursors.up, //down: cursors.down, //acceleration: 0.06, //drag: 0.0005, //maxSpeed: 0.5 //}; //controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig); } //function update (time, delta) //{ //controls.update(delta); //}
7 屏幕中心点照相机跟随效果，实现背景地图移动的功能，设置世界的 大小，添加精灵的位置，当前地图的中心点，添加update事件，键盘
事件后进行绑定修改player位置，世界会跟着变化
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background','assets/tests/debug-grid-1920x1920.png'); game.load.image('player','assets/sprites/phaser-dude.png'); } varplayer; varcursors; function create() { game.add.tileSprite(0, 0, 1920, 1920, 'background'); game.world.setBounds(0, 0, 1920, 1920); game.physics.startSystem(Phaser.Physics.P2JS); player = game.add.sprite(game.world.centerX, game.world.centerY, 'player'); game.physics.p2.enable(player); cursors =game.input.keyboard.createCursorKeys(); game.camera.follow(player); } function update() { player.body.setZeroVelocity(); if(cursors.up.isDown) { player.body.moveUp(300) } else if(cursors.down.isDown) { player.body.moveDown(300); } if(cursors.left.isDown) { player.body.velocity.x = -300; } else if(cursors.right.isDown) { player.body.moveRight(300); } } function render() { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); }