Phaser游戏框架与HTML Dom元素之间的通信交互
本想按照PHASER的HTML Dom元素官方实例:http://labs.phaser.io/index.html?dir=game objects/dom element/&q= Canvas来创建HTML DOM元素,但this.add.dom 一直提示错误,无奈直接用HTML5的语法来创建DOM元素,然后在Phaser内获取该DOM元素,也不用再使用第三方的Phaser Html Input插件Plugin,还是挺方便快捷的。 按照这个思路,还可以创建listView,ScrollView等一系列HTML Dom元素...【详细】
html5 Phaser3 网页游戏教程
2018年12月29日 赞:0 评论:0 阅读:341
Phaser Matter Collision Plugin 碰撞插件 -- iFiero技术分享
Phaser 自带的Arcade虽然易用,但复杂的物理碰撞明显就不够用了,于是Matter等物理引擎还是不得不学的,以下是Matter物理体碰撞的一个插件,它省去了我们判别两个物理体相撞后哪个是gameObjectA和gameObjectB,实在是好用又省心,特推荐如下: 引入插件: const config = { // ... physics: { default: "matter" }, // Install the scene plugin plugins: { scene: [ { plugin: P...【详细】
html5 Phaser3 网页游戏教程
2018年12月13日 赞:0 评论:0 阅读:210
Phaser3跟随自定义路径移动的赛车 -- iFIERO游戏教程
在线预览:http://www.ifiero.com/uploads/phaser/pathrotate/ 代码: var config = { type: Phaser.AUTO, width: 720, height: 520, backgroundColor: '#2d2d2d', parent: 'phaser-example', scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload() { this.load.image('racecar', 'assets/racecar.png'); } function create() { // 1.每个节点 var points = [ 50, 300, 179, 449, 394, 498, 593, 455, 701, 338, 6...【详细】
html5 Phaser3 网页游戏教程
2018年12月07日 赞:0 评论:0 阅读:281
用EC5/EC6自定义class的区别及用法 -- Phaser3网页游戏框架
EC6 自定义class class Brain extends Phaser.GameObjects.Sprite { constructor (scene, x, y) { super(scene, x, y); this.setTexture('brain'); this.setPosition(x, y); } preUpdate (time, delta) { super.preUpdate(time, delta); this.rotation += 0.01; } } EC5 自定义class var Bunny = new Phaser.Class({ Extends:Phaser.GameObjects.Sprite, initialize:function Bunny(scene,x,y,speed){ Phaser.GameObjects.Sprite.call(this,scene); this.setTexture('bunny'...【详细】
html5 Phaser3 网页游戏教程
2018年12月04日 赞:0 评论:0 阅读:235
Phaser3让超级玛丽实现轻跳、高跳及加上对应的跳跃声音
在线测试地址:http://www.ifiero.com/uploads/phaserjs3/jumper/ 空格键:轻按:跳低 ,长按:跳高 键盘:--> 向右 , <-- 向左 请确保已打开电脑的音乐开关 var config = { type: Phaser.AUTO, width: 650, height: 450, parent: "ifierocom", physics: { default: 'arcade', arcade: { gravity: { y: 350 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var stars; var bo...【详细】
html5 Phaser3 网页游戏教程
2018年12月03日 赞:0 评论:0 阅读:267
Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼
资源图: 代码 var config = { type: Phaser.AUTO, parent: 'iFiero', // game id; html中为 <div id="iFiero"></div> width: 500, height: 380, scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); // 初始化代码 function init() { } function preload() { this.load.image('bg', 'assets/undersea-bg.png'); //this.load.image('arrow', 'assets/sprites/arrow.png'); this.load.spritesheet('fish', 'assets/fish-1...【详细】
html5 Phaser3 网页游戏教程
2018年11月15日 赞:0 评论:0 阅读:224
Phaser3 屏幕适配iPhoneX、iPhoneXs时的坑 -- JavaScript Html5 游戏开发
坑: 在config内不要把 width 设为 window.innnerWidth 在config内不要把 width 设为 window.innnerWidth 在config内不要把 width 设为 window.innnerWidth 重要的事情得说三遍... var game; // once the window loads... [removed] = function () { // 接收 websocket; // config of the game; var config = { type: Phaser.AUTO, parent: 'bitgame', width: 640, // don't window.innerWidth height: 512, physics: { default: 'arcade', arc...【详细】
html5 PhaserJS3
2018年11月15日 赞:0 评论:0 阅读:317
Phaser3 对象池随机产生炸弹并销毁
scene.js /// <reference path="../../libs/phaser/phaser.min.js"> 'use strict'; var BootScene = new Phaser.Class({ Extends: Phaser.Scene, initialize: function BootScene() { Phaser.Scene.call(this, { key: 'Boot', active: true // listening resize event; }); }, init: function () { console.log('init bootscene'); this.particles = {}; }, preload: function () { this.load.image('sky', 'assets/space.jpg'); this.load.spritesheet('explode','assets/e...【详细】
html5 PhaserJS3 PhaserJS
2018年11月15日 赞:0 评论:0 阅读:307
Phaser3 场景Scene之间的传值 -- HTML网页游戏开发
一、首先当然得有至少有二个场景sceneA.js,sceneB.js 二、从场景A传值到场景B二种方法 1)通过事件this.events.emit('event key',{objKey:objValue}); 从sceneA通过 ths.events.emit时传值到sceneB时有个需要特别注的事项就是,得把sceneB的 active设为 ture,否则因为 sceneB还未激活,是监听不到 events.on事件的!!! 2)通过场景启动this.scene.start('gameB key',{objKey:objValue}); 具体详...【详细】
html5 PhaserJS3 PhaserJS
2018年11月08日 赞:0 评论:0 阅读:266
GameplayKit的GKStateMachine用法与实例
玩家进入GameScene场景中 -> 通过GKStateMachine进入到指定的游戏状态GKState 在GameScene场景中 -> 根据不同的逻辑调用GKStateMachine -> 在各个不同的游戏状态GKState之间进行切换 源码如下: 一、GameScene.swft import SpriteKit import GameplayKit class GameScene: SKScene,SKPhysicsContactDelegate { //MARK: - StateMachine 场景中各个舞台State lazy var stateMachine:GKStateMachine = GKSta...【详细】
GamePlayKit GKStateMachine GKState
2018年10月11日 赞:0 评论:0 阅读:236
适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs、iPhoneXs Max及iPhoneXr !!! 回顾:为何要把场景中的所有图片, 都按照屏幕大小为 2048 1536 来绘制。 也就是说, 我们的背景图的大小是 2048 1536, 其他图片也是依照这个比例来绘制。 为什么这样做呢? 我们知道 2048 1536 是iPad ...【详细】
游戏开发 IPhoneX适配 游戏教程 Swift手机游戏教程
2018年09月26日 赞:0 评论:0 阅读:386
使用AVAudioPlayer来调节游戏的背景音乐大小
音乐文件的声音大小有时在做为游戏背景音乐时会过大,而如果我们只是简单应用SKAudioNode来加载音乐的话,是无法进行声音大小的调节的,因此我们必须使用更强大的AVAudioPlayer来进行声音大小的调节。 具体实现代码如下: import AVFoundation class GameScene: SKScene,SKPhysicsContactDelegate { private var avPlayer:AVAudioPlayer! override func didMove(to view: SKView) { //...【详细】
游戏开发 游戏教程 三角学 Swift手机游戏教程
2018年09月17日 赞:0 评论:0 阅读:265
学好三角学(函数) — SWIFT和JAVASCRIPT游戏开发的必备技能 iFIERO.com
不论是使用哪种平台进行开发,三角学在游戏当中都被广泛的使用,因此,小编iFERO认为,三角学是必须得掌握的技能之一。 先以Javascript为例 一、角度与弧度 最直观地说,一个 60度 的角,可以用 60°来表示,也可以用 π / 3 (圆周率除以3)来表示; 同理,一个 90度 的角,可以用 90°来表示,也可以用 π / 2 (圆周率除以2)来表示; 还有...【详细】
游戏开发 游戏教程 三角学 Swift手机游戏教程
2018年09月06日 赞:0 评论:0 阅读:324
应用UserDefaults存取游戏中的当前得分和最高得分
应用UserDefaults存取游戏分数和最高分 我们在GameScene.swift里 private var currentScore:SKLabelNode! // 当前分数节点 private var cScore:Int = 0 /// Int 存当前分数 private var highScore:SKLabelNode! // 最高分数 private var hScore:Int = 0 /// Int 存最高分数 在子弹击中外星人时记录分数 func bulletHitAlien(nodeA:SKSpriteNode,nodeB:SKSpriteNode){} func bulletHitAlien(nodeA:SKSpriteNode,nodeB:SKSpriteNod...【详细】
游戏开发 游戏教程 手机游戏教程 SkScene节点 GamePlayKit
2018年08月24日 赞:0 评论:0 阅读:351
一步一步图文介绍SpriteKit使用TexturePacker导出的纹理集Altas
1、为什么要使用纹理集? 游戏是一种很耗费资源的应用,特别是在移动设备中的游戏,性能优化是非常重要的 纹理集是将多张小图合成一张大图,使用纹理集有以下优点: 1、减少内存占用,减少磁盘占用; 2、减少磁盘读取次数,一次性读取一张大图比多次读取多张小图速度更快 一张大图:打开-读取小图-读取小图-读取小图-关闭; 多张...【详细】
游戏开发 游戏教程 手机游戏教程 SkScene节点 GamePlayKit
2018年08月21日 赞:0 评论:0 阅读:310
SpriteKit在复制节点时留了一个巨坑给开发者,需要开发者手动把复制节点的isPaused设置为false
根据When an overlay node with actions is copied there is currently a SpriteKit bug where the node’s isPaused property might be set to true提示,SpriteKit有一个Bug需要开发者自己来填。 SpriteNode节点在被copy()复制后,会自动被设置为暂停,也就是节点的所有Action全部不可用,如果需要使用node.run(SKAction.run{//code}) 需要把复制后的节点isPaused设置为false 需要把复制后的节点...【详细】
游戏开发 游戏教程 手机游戏教程 SkScene节点 GamePlayKit
2018年08月04日 赞:0 评论:0 阅读:451
GamePlayKit的GKEntity及GKComponent 的iOS游戏开发实例
GameplayKit是一个面向对象的框架,为构建游戏提供基础工具和技术。 GameplayKit包含用于设计具有功能性,可重用架构的游戏的工具,以及用于构建和增强诸如角色移动和对手行为的游戏玩法特征的技术。 我们这里主要讲GKEntity和GKComponent这二个类; GKEntity类(实体): 可以容纳很多组件的容器,根据自己的需求来加入相应的Component组件。 GKComp...【详细】
游戏开发 游戏教程 手机游戏教程 SkScene节点 GamePlayKit
2018年07月28日 赞:0 评论:0 阅读:390
SpriteKit手机游戏摇杆JoyStick的使用 -- by iFIERO游戏开发教程
工欲善其事,必先利其器 有时候学习如何应用第三方库是非常重要的,因为我们不用再自己重复造轮子,在这里,我们就把原先利用重力感应来操控飞机改为用游戏摇杆joystick来操控,具体的操作如下: // 声明游戏摇杆; private var joystick:AnalogJoystick! // 游戏摇杆; 创建函数,新建游戏摇杆节点,并添加到GameScene中 //MARK:-// 加入游戏手柄 func c...【详细】
游戏开发 游戏教程 手机游戏教程 SkScene节点 游戏摇杆
2018年07月27日 赞:0 评论:0 阅读:320
SPIRTEKIT深度复制SKSPRITENODE节点及CONVERT转换其它SCENE上的节点到当前场景坐标
Playground输出的代码 ,注意右侧打印出的SpriteNode输出值,HAPPY_NODE的输出信息一致. //MARK:- 扩展SkSpriteNode属性 extension SKSpriteNode { func copyWithPhysicsBody()-&gt;SKSpriteNode{ let spriteNode = self.copy() as! SKSpriteNode spriteNode.physicsBody = self.physicsBody return spriteNode } } 那么我们为何要进行节点的复制呢?WHY? WHY? WHY? 因为我们须用节点spritenode.copy()把其它Scene(Circle...【详细】
游戏开发 游戏教程 手机游戏教程 SkScene节点
2018年07月22日 赞:0 评论:0 阅读:393
iFIERO - (三)宇宙大战 Space Battle -- 场景SCENE切换、UserDefaults统计分数、Particle粒子效果
此《宇宙大战 Space Battle》SpirteKit手机游戏教程共分为三系列: (一)宇宙大战 Space Battle -- 新建场景Scene、精灵节点、Particle粒子及背景音乐 (二)宇宙大战 Space Battle -- 无限循环背景Endless、SpriteKit物理碰撞、CoreMotion加速计 (三)宇宙大战 Space Battle — 场景SCENE切换、UserDefaults统计分数、Particle粒子效果(你正在此处进行学习) 一、如何进行各个场景...【详细】
游戏开发 游戏教程 手机游戏教程
2018年07月07日 赞:0 评论:0 阅读:375
共25个 共2页 12
sina weixin mail 回到顶部