Phaser.js入门基础

2018-05-20

Phaser快速、免费、易于维护。一方面，开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面，也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。

<!DOCTYPE html>  
<head>  
   <meta charset="utf-8">  
   <title>Test Phaser</title>  
   <script src="js/phaser.js"></script>  
   <style>  
      #container{ height:600px; width: 600px; margin: 10px auto; outline: 3px solid #f00; overflow: hidden;}  
   </style>  
</head>  
<body>  
   <!-- 如果不指定phaser的容器,会默认挂在body下 -->  
   <div id="container"></div>  
   <script>  
      //------------------创建游戏---------------  
      // 画布wh  
      // renderer:渲染方式, Phaser.CANVAS,Phaser.WEBGL,Phaser.AUTO  
      // parent:存放画布元素的容器  
      // state:游戏场景;transparent:画布元素是否透明,默认不透明;  
      // antialias:是否开启抗锯齿模式;phCon:物理引擎配置  
      // new Phaser.Game(width, height, renderer, parent, state, transparent, antialias,physicsConfig);  
      var game = new Phaser.Game(300, 400, Phaser.AUTO, 'container', state);  
      // true表示暂停  
      // game.paused = false;  
      // game.add; //对游戏工厂的引用  
      // game.camera  
      // game.input 游戏中的用户交互事件的引用  
      // game.load 游戏资源加载模块的引用  
      // game.scale 游戏缩放模块的引用  
      // game.sound  
      // game.stage  
      // game.world  
      // game.particles 游戏粒子系统的引用  
      // game.physics  
      // game.state 游戏场景管理对象的引用  
  
      //------------------创建场景-------------------  
      // 场景管理对象Phaser.StateManager  
      // init()  
      // preload() 加载游戏资源  
      // create 创建游戏显示对象或注册资源  
      // update()  
      // render()  
      // 五个函数的执行顺序,从上到下  
      function state( ) {  
         this.init = function () {};  
         this.preload = function () {};  
         this.create = function () {};  
         this.update = function () {};  
         this.render = function () {};  
      }  
      //------------------管理场景-----------------  
      // 添加场景  
      game.state.add('state', state);  
      // 启动场景  
      game.state.start('state');  
  
      //------------------资源加载-----------------  
      // 资源加载对象Phaser.Loader  
      // 资源加载必须写在preload方法中  
      // image(key, url)  
      // spritesheet(key, url, frameWidht, frameHeight) //加载的图片由多张大小相同的图片合成  
      // atlas(key, url, atlasURL, atlasData, format) //atlasURL,atlasData来描述小图片的信息,与spritesheet不同的地方,小图尺寸可以不同  
  
      // audio(key, url, autoDecode)  
      // autdiosprite(key, url, jsonURL, jsonData, autoDecode)  
  
      // text()  
      // xml()  
      // binary()  
  
      // 当某个资源加载完成时触发  
      // game.load.onFileComplete.add(function(){})  
      // game.load.process 表示所有资源的加载进度,百分制  
      // 当所有资源加载完成时触发  
      // game.load.onLoadComplete.add(function(){})  
  
      //---------------------舞台---------------------  
      // 舞台对象Phaser.Stage  
      // game.stage.setBackgroundColor(backgroundColor); //改变舞台背景颜色  
      function state(game) {  
         this.create = function () {  
            game.stage.setBackgroundColor(0xff0000);  
         }  
      }  
      //----------------------世界--------------------  
      // 世界对象Phaser.World  
      // game.world.setBounds(x, y, width, height) //设置世界的边界大小  
      //---------------------摄像机------------------  
      // Phaser.Camera //原点在左上角  
      // game.camera.x = 100;  
      // game.camera.y = 100  
      // game.camera.focusOn(disObj);  
      // game.camera.focusOnXY(x, y)  
      // game.camera.follow(target) //跟随  
      function state(game) {  
  
         var jiqimao;  
         this.preload = function () {  
            game.load.image('bg', 'assets/bg.jpg');  
            game.load.image('jiqimao', 'assets/jiqimao.png');  
         }  
         this.create = function () {  
            game.world.setBounds(0, 0, 2000, 600);  
            game.add.image(0, 0, 'bg');  
            jiqimao = game.add.image(200, 300, 'jiqimao');//创建一个机器猫  
            jiqimao.anchor.set(0.5, 0.5);  
  
            game.input.onDown.add(function(){  
               game.camera.focusOn(jiqimao);  
            });  
  
            game.camera.follow(jiqimao);  
         }  
         this.update = function () {  
            var keys = game.input.keyboard.createCursorKeys();  
            if(keys.right.isDown) game.camera.x += 1;  
            else if (keys.left.isDown) game.camera.x -= 1;  
            else if (keys.up.isDown) game.camera.y -= 1;  
            else if (keys.down.isDown) game.camera.y += 1;  
  
            jiqimao.x += 1;  
         }  
      }  
      // -------------------缩放控制--------------------  
      // Phaser.ScaleManager  
      // 三种模式: EXACT_FIT 缩放到父元素的大小,SHOW_ALL, USER_SCALE自定义缩放  
      // game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;  
      function state(game) {  
         this.init = function () {  
            game.scale.pageAlignHorizontally = true ; //水平居中  
            game.scale.pageAlignVertically = true;  
  
            //game.scale.scaleMode =  Phaser.ScaleManager.EXACT_FIT;  
            //game.scale.scaleMode =  Phaser.ScaleManager.SHOW_ALL;  
            game.scale.scaleMode =  Phaser.ScaleManager.USER_SCALE;  
            game.scale.setUserScale(0.5, 0.5);  
         }  
         this.preload = function () {  
            game.load.image('jiqimao', 'assets/jiqimao.png');  
         }  
         this.create = function () {  
            game.add.image(game.width/2, game.height/2, 'jiqimao').anchor.set(0.5, 0.5);  
         }  
      }  
   </script>  
</body>  
</html>

实例（进度加载）

<!--index.html-->  
<!DOCTYPE html>  
<head>  
    <meta content="width=device-width, user-scalable=no" name="viewport">  
    <meta charset="utf-8">  
    <title>Flappy Bird</title>  
    <style>  
        #container canvas {  
            margin: 0 auto;  
        }  
    </style>  
    <script src="js/phaser.js"></script>  
    <script src="js/boot.js"></script>  
    <script src="js/loader.js"></script>  
</head>  
<body>  
    <div id="container"></div>  
    <script>  
        var game = new Phaser.Game(320, 505, Phaser.AUTO, 'container');  
        game.state.add('boot', bootState);  
        game.state.add('loader', loaderState);  
        game.state.start('boot');  
    </script>  
</body>  
</html>  
  
<!--boot.js-->  
var bootState = function (game) {  
    this.preload = function () {  
       game.load.image('loading', 'assets/loading.gif');  
    }  
    this.create = function () {  
       game.state.start('loader');  
    }  
}  
  
<!--loader.js-->  
var loaderState = function (game) {  
    this.init = function () {  
        // 添加图片  
        var sprite = game.add.image(game.world.centerX, game.world.centerY, 'loading');  
        // 设置图片锚点  
        sprite.anchor = { x:0.5, y:0.5 };  
        progressText = game.add.text(game.world.centerX, game.world.centerY + 30,'0%', { fill:'#fff', fontSize:'16px' });  
        progressText.anchor = { x:0.5, y:0.5 };  
    }  
    this.preload = function () {  
        game.load.image('loading', 'assets/loading1.gif');  
        game.load.onFileComplete.add(function(progress){  
            progressText.text = progress + '%';  
        });  
    }  
}