【简单跑酷--JS版】---Lv.2 类之间的引用以及背景滚动实现

callback

hello~ 俺又来了（如果描述的不清楚的朋友可以到私信我或者到layaair群里咨询~~ ）
第二节教程来了这一节其实和打飞机的背景地图实现方式差不多
此次讲解的主要是类之间的引用和循环横向背景的实现方法~~~

没看第一遍的朋友可以点击查看

关于浏览器调试失败的朋友可以看看这篇文章

//======================= 游戏二维码 =======================

//======================= 美丽的分割线 =======================
新建LayaAir项目
打开LayaAirIDE，新建一个空项目，项目名称为 AirRunGame，本例以 JavaScript 语言为版本，其他语言同理。
如何用LayaAirIDE创建项目及环境配置，大家可以参考官网的说明，这里就不再絮讲。不了解的同学建议先看一下。

上一篇教程有提到我们游戏的包含哪些模块，从简到难，我们先从显示游戏背景开始。

//======================= 美丽的分割线 =======================

测试laya引擎是否成功驱动了
找到项目目录下面的src 里面有一个默认的LayaSample.js 双击打开删除里面的代码
输入laya初始化代码

//laya初始化
Laya.init(852, 480, Laya.WebGL);
//FPS
Laya.Stat.show(0,0);
//设置适配模式
Laya.stage.scaleMode = "exactfit";
//设置剧中对齐
Laya.stage.alignH = "center";
//设置横屏
Laya.stage.screenMode = "horizontal";[/code]
打开浏览器（哦这里要说一下 因为浏览器有本地加载文件策略 具体可以看下laya这方面的说明）看到下图 这样 说明 咱第一步成功啦~~  来啦来 喝杯冰水庆祝一下



//=======================  美丽的分割线 =======================
 
创建好目录结构
找到项目src目录 创建一个文件夹名字为runGame
分别创建RunGame.js 和 Background.js
将我们需要的素材放到项目目录下面bin -> res
RunGame.js是我们游戏的入口类  //后面会提到具体的作用
Background,js 是我们的背景类
 



 
//=======================  美丽的分割线 ========================
 
加载图片并且测试图片是否可用
一个游戏当然会有预加载图片的功能 那这节我们讲的是背景 那我们先把需要加载的图片在游戏开始之前都加载好 这里我们用到了两张图片
继续打开LayaSample.js
在之前的基础上增加加载图片的代码：[code]//加载图片
Laya.loader.load(["res/background.png", "res/m_background.png"], laya.utils.Handler.create(this, onLoaded), laya.utils.Handler.create(this, onLoading, null, false));

//加载进度
function onLoading(progress){
    console.log("onLoading: " + progress);
}
//加载完毕
function onLoaded(){
    console.log("onLoaded");
}

我们刷新页面看看有什么效果
如下图所示我们看到图片加载了而且也有我们打印出来的加载进度日志以及加载完毕日志

我们测试一下图片是否可以用
继续在LayaSample.js里面编写我们的测试代码
找到onLoaded方法（为什么要在这里写因为onLoaded方法是所有预加载资源都加载完毕的时候执行的函数

//从资源来表中获取加载好的background图片纹理
var texture = Laya.loader.getRes('res/background.png');
//创建一个bg显示对象
var bg = new laya.display.Sprite();
//将上面的texture纹理绘制到bg图像里面
bg.graphics.drawTexture(texture, 0, 0);
//将bg添加到舞台
Laya.stage.addChild(bg);

我们再次刷新页面看看有什么效果

嗯看来图片出来了~~~不错现在我们可以开始继续了

//======================= 美丽的分割线 =======================

编写RunGame类
刚才我们有提到RunGame是我们的入口类为什么要这个因为我希望后面在入口类里面管理后面我们会写到的玩家地图等模块
可能这里会问为什么不写在LayaSample里面呢？
我个人是这样么想的 LayaSample里面只干laya引擎初始化和图片加载功能其他不管
言归正传
我们打开RunGame.js 开始编写代码

(function () {
	/**
	 * 游戏入口
	 */
	function RunGame(){
		RunGame.__super.call(this);
		this.init();
	}
	//RunGame 是一个显示对象 继承此 Sprite
	Laya.class(RunGame,"RunGame", laya.display.Sprite);
	
	//定义RunGame的prototype
	var _proto = RunGame.prototype;
	
	//初始化
	_proto.init = function(){
		console.log('RunGame Init');
	}
})();

此处我们要说一下
Laya.class(RunGame,"RunGame", laya.display.Sprite);
这是JS特有的继承写法 TS 和 AS 不需要这么写

RunGame写好了怎么调用呢？
打开LayaSample 找到onLoaded方法修改为

//加载完毕
function onLoaded(){
   console.log("onLoaded");
   //实例化RunGame
   var runGame = new RunGame();
   //添加到舞台
   Laya.stage.addChild(runGame);
}

因为RunGame.js是一个新的JS文件我们的页面没有引用如果这个时候刷新页面会报错所以我们有两种方式引用
第一种当然是用IDE自带的功能如下图点击红框的按钮，这时候会弹出一个DEBUG框我们不用管它关掉就行了因为我们这次使用浏览器来做测试暂时不用ide自带的调试

第二种我们找到index.html
手动引用RunGame.js也可以
如下图

我们继续刷新页面看看有什么效果

咦~~ 看到RunGame里面的日志打印出来了看来我们现在知道如何在模块中互相引用其他模块了~~~
说了这么多还是没有说到背景不要急因为前面说的这些对后面帮助很大例如上面刚才说到的在LayaSample里面怎么引用RunGame 我们在上一节有提到我们有很多模块都牵涉到模块之间如何引用因此这里说得较多希望能后面开发有帮助~~~~

编写Background类
打开Background.js 开始编写代码

(function () {
	
    
    /**
     * 背景类
     * 
     */
	function Background(){
        //图片的宽度
        this.BG_WIDTH = 1600;
        //记录当前移动的值
        this.moveX = 0;
        //定义背景1
        this.bg1 = null;
        //定义背景2
        this.bg2 = null;
        //草堆
        this.grass = null;
        
		Background.__super.call(this);
		this.init();
	}
	//Background 是一个显示对象 继承此 Sprite
	Laya.class(Background, "Background", laya.display.Sprite);
	
	var _proto = Background.prototype;
	
	_proto.init = function(){
        var texture1 = Laya.loader.getRes('res/background.png');
        var texture2 = Laya.loader.getRes('res/m_background.png');
        //创建背景1
        this.bg1 = new laya.display.Sprite();
        //绘制背景图1
        this.bg1.graphics.drawTexture(texture1, 0, 0);
        //把背景1添加到当前容器对象里。
        this.addChild(this.bg1);

        //创建背景2
        this.bg2 = new laya.display.Sprite();
        //绘制背景图2
        this.bg2.graphics.drawTexture(texture1, 0, 0);
        //设置背景2 的坐标。
        this.addChild(this.bg2);
        //把第二个背景放到第一个背景屁股后面紧跟着
        this.bg2.pos(this.BG_WIDTH, 0);
        
        //前景图片草垛
        this.grass = new laya.display.Sprite();
        //绘制草垛
        this.grass.graphics.drawTexture(texture2, 0, 0);
        //把草垛居底部显示
        // this.grass.y = Browser.clientHeight - this.grass.height;
        this.addChild(this.grass);
        
        //创建一个帧循环处理函数，用于背景位置的更新，实现背景滚动效果。
        Laya.timer.frameLoop(1, this, this.onLoop)
	}
    
    _proto.onLoop = function(){

        //移动
        this.x -= 5;
        this.moveX = Math.abs(this.x);
        
        //当背景1向左移动出游戏的显示区域 1600，则将背景1的x轴坐标,向右移动 1600*2.
        if (this.moveX - this.bg1.x >= this.BG_WIDTH) {
            this.bg1.x += this.BG_WIDTH * 2;
        }
        //当背景2向左移动出游戏的显示区域 1600，则将背景2的x轴坐标,向右移动 1600*2.
        if (this.moveX - this.bg2.x >= this.BG_WIDTH) {
            this.bg2.x += this.BG_WIDTH * 2;
        }
        //草移动
        this.grass.x -= 5 * 0.5;
        if(this.grass.x + 960 < 0){
            this.grass.x = this.moveX + 852;
        }
    }
})();

 RunGame类[code](function () {
	/**
	 * 游戏入口
	 */
	function RunGame(){
		RunGame.__super.call(this);
		this.init();
	}

//RunGame 是一个显示对象继承此 Sprite

	Laya.class(RunGame,"RunGame", laya.display.Sprite);
	
	//定义RunGame的prototype
	var _proto = RunGame.prototype;
	
	//初始化
	_proto.init = function(){
		console.log('RunGame Init');
        //初始化背景
		var bg = new Background();
		this.addChild(bg);
	}

})();[/code]记住哦这里右有一个新的Background增加了所以别忘记在index.html里面引入

然后刷新界面动起来了有木有~~~

引用打飞机里面的一句话：适当的代码封装，把相同逻辑隔离，保持类的功能单一清晰，怎么封装，如何封装每个人都有自己的方式，这就是面向对象编程的魔力。

谢谢~~~ 下节将会开始讲解 Floor 和 MapFloor
也就是地板的制作方式

PS：附件是这一节的源码

附件：
LayaAir_简单跑酷JS版_-_01-添加场景背景.zip

LayaAir_简单跑酷JS版_-_01-添加场景背景.zip

cuixueying

顶！d=====(￣▽￣*)b，感谢分享！

yung

赞，感谢分享！

songr2yang

太棒了支持支持

jj940620231

求解，为什么在laya自带的调试器下面是好的，在谷歌下报错运行不了

报的是这个错
Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.

cuixueying

jj940620231 这个是图片加载跨域导致的

cuixueying

jj940620231 http://ask.layabox.com/question/13

xiaobear250

写得很好，谢谢楼主分享。两个问题请问一下。
1、loader.load的使用问题

Laya.loader.load(["res/background.png", "res/m_background.png"], laya.utils.Handler.create(this, onLoaded), laya.utils.Handler.create(this, onLoading, null, false));

预加载时用的load函数第2、3个参数为回调函数，但我查了下API，好像不太一样，API里面并没有这样的用法，是API错误还是这样的用法已经过时了？API中的说明如下。

public function load(url:String, type:String = null, cache:Boolean = true, group:String = null, ignoreCache:Boolean = false):void

2、关于图片加载问题。
官方的飞机大战案例中，加载地图用的是bg.loadImage，而这边先预加载后再用如下方式加载。这里的方式肯定是较优，但如果我预加载后，再用loadImage方法加载同一张图片，系统是会重新加载还是直接调用本地缓存的？如果是按照浏览器的缓存机制，应该是直接调用本地的。那如果是直接调用本地的话，这样的写法和楼主的写法性能上有何不同？如果不存在性能差异，那这样写貌似更简单些。
[code] var texture1 = Laya.loader.getRes('res/m_background.png');

        //创建背景1
        this.bg1 = new laya.display.Sprite();
        //绘制背景图1
        this.bg1.graphics.drawTexture(texture1, 0, 0);[/code]

callback

xiaobear250 第一个问题你估计是看错了吧？我特意翻了一下API

load(url:*, complete:Handler = null, progress:Handler = null, type:String = null, priority:int = 1, cache:Boolean = true, group:String = null, ignoreCache:Boolean = false)

callback

xiaobear250 第二个问题我特意看了一下laya的源码用loadImage和Laya.loader.getRes 唯一区别上就是loadimage包含了Laya.loader.getRes 所以如果你某个图片是不在预加载里面的可以用loadImage 这样程序会自动去查找预加载的图片如果没有就会选择自动加载

xiaobear250

xiaobear250 @callback:我看的是这里的http://layaair.ldc.layabox.com/api/laya/net/Loader.html

xiaobear250

xiaobear250 @callback:第二个问题的话loadImage应该不单纯加载，还包括绘制(this.bg1.graphics.drawTexture(texture1, 0, 0);)吧？如果是这样的话，那直接用loadImage貌似比较简洁。

阿强爱学习

Background.__super.call(this);

新手小白求问 __super 是什么是js的语法吗没看见定义

xiaobear250

xiaobear250 @callback:还有个问题再请教下您。像这种跑酷类游戏一般都是固定关卡设计的，这种关卡设计有什么通用的编辑器吗？还是要自己写个编辑器？tiledmap感觉像是做地图用的，这里貌似用不了。

Laya_XS

赞一个！感谢分享！

firstkang

不错

Isco

这么大方我只好叫楼主一声爹了多谢