phaser.js入门篇
2016-05-25 16:33
921 查看
基础知识
<!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 + '%'; }); } }
相关文章推荐
- js将本地时间与服务器时间同步
- js prototype介绍
- js every扩展
- [RxJS] Filtering operator: filter
- [JavaScript] 判断键盘同时按某些键时执行操作。
- 各个JSON技术的比较
- 在js里通过id控制表或div的隐藏和显示,以及把id前缀相同的div全部隐藏起来
- Retrofit + GSON处理JSON模板
- 读书笔记1---JavaScript词法结构
- js常见事件及案例-onFocus
- 将XML文件中的内容转换为Json对象
- javascript判断浏览器类型(咋个办呢 zgbn)
- js 将json字符串转换为json对象的方法解析
- 计算js程序段运行时间的类(还包括字符串连接的优化类)(咋个办呢 zgbn)
- director.js教程
- [2.1]Spark DataFrame操作(一)之读取并过滤json文件
- sso跨域写cookie的一段js脚本(推荐)
- 用fasterjson需要注意的地方
- 用fasterjson需要注意的地方
- js 全局变量 局部变量 隐式声明 显式声明,作用域