Egret 位图纹理
视频太卡？试试切换线路
本课时讲解 Egret 中位图的创建，通过使用 Bitmap 类，为当前容器添加上图片，让学员掌握位图的创建使用。
本课时讲解 Egret 中对资源的加载，包含图片资源、音频资源等，让学员掌握在 Egret 中对资源的处理。
本课时讲解九宫格的使用，图片在不同的分辨率下会出现图片的压缩或拉伸。导致图片无法正常使用，这里通过九宫格可以完美解决这个问题。
本课时讲解在容器中，纹理的填充的几种不同的方式，第一种是拉伸图像以填充区域，第二种是重复图像以填充区域。
本课时主要讲解纹理集的使用，事实上纹理集就是对纹理的整体操作，让学员掌握纹理集的使用。
只有成为VIP会员才能提问&回复，快吧！如果你还没有账号你可以一个账号。
添加新技术问题
课程 [创建位图]
中已存在问题
添加新技术问题
问题描述越详细，被解答的速度越快
有新回答时请邮件提醒我
着急，拜托快点
不急，慢慢解决
关联课程 [创建位图]
正在读取中...
正在读取中...by Egret TS team
首先新建一个 eui 项目，使用： egret create HelloEUI --type eui
下面的教程里使用的该项目的是默认的皮肤。 这是Group的默认布局模式。在基本布局模式下，容器内的子项的定位方式，取决于每个子项的坐标设置。首先，创建一个 Group 容器，并设置其布局属性为基本布局：
this.myGroup = new eui.Group();
this.addChild( this.myGroup );
this.myGroup.width = 400;
this.myGroup.height = 300;
this.myGroup.layout = new eui.BasicLayout();
其中预先定义了: private
myGroup:eui.G
为了看清楚容器的边缘，我们在容器内先绘制一个与容器宽高一致的空心矩形：
/// 绘制矩形用于显示 myGroup 的轮廓
var outline:egret.Shape = new egret.S
outline.graphics.lineStyle(3,0x00ff00);
outline.graphics.beginFill(0x);
outline.graphics.drawRect(0,0,400,300);
outline.graphics.endFill();
this.myGroup.addChild( outline );
以上代码是基础代码，后边讲解中列出的代码段都在此基础上添加。
绝对定位基本布局的主要特征就是绝对定位，设置子项的 x 与 y 坐标即可设置其相对于容器的坐标位置。首先我们用坐标递增的方式放置4个按钮：
for(var i:number=0;i&4;i++) {
var btn:eui.Button = new eui.Button();
btn.x = 25 +i*35;
btn.y = 40+i*65;
btn.label = &button &+i;
this.myGroup.addChild(btn);
效果如图：
居中设定上面设置的是子项的位置，至于尺寸，则是设置每个子项的width和height就可以了。上面所述的情况比较简单，即每个子项的位置和尺寸是确定的，是定值。但我们的实际需求，比这个要复杂一点。比如我有一个按钮，我希望它能根据容器的尺寸，自动处于居中位置，不需要我自己去写代码来设置x和y坐标。这个时候就有两个属性可用：
horizontalCenter
verticalCenter
您可以认为这两个值就是定义对象的中心点与容器的中心点之间的差值。如果两项都设置为0，代表中心点完全重合，也就实现了我们所需要的自动居中功能。
var btn:eui.Button = new eui.Button();
btn.label = &我是一只小小的 egret 按钮&;
btn.horizontalCenter = 0;
btn.verticalCenter = 0;
this.myGroup.addChild( btn );
效果如图：
边距设定假如需求更复杂一些，我们需要按钮不仅仅是居中，还始终和容器边界保持20像素的差值，那您可以设置的属性是：
topbottomleftright top的值，就是定义对象的上边界和容器的上边界之间的距离，其他3个值以此类推。回到上面那个问题，应该在按钮上这样设置：
var btn:eui.Button = new eui.Button();
btn.label = &我是一只小小的 egret 按钮&;
btn.top = 20;
btn.bottom = 20;
btn.left = 20;
btn.right = 20;
this.myGroup.addChild( btn );
效果如图：
百分比设定在尺寸的定义上，您还可以使用百分比。比如要让按钮容器的尺寸一致，可以设置：
var btn:eui.Button = new eui.Button();
btn.label = &我是一只小小的 egret 按钮&;
btn.percentWidth = 60;
btn.percentHeight = 80;
this.myGroup.addChild( btn );
您可以根据自己的需要，决定使用percentWidth,percentHeight还是top,bottom,left,right。percentWidth,percentHeight只能约束宽高，而top,bottom,left,right则同时约束了尺寸和位置(x,y)。
这样只设置百分比，将会对其左上角。为了使其在容器处于中心位置，可以在上一段代码基础上加入居中设定：
btn.horizontalCenter = 0;
btn.verticalCenter = 0;
效果如图：
如图中效果所示，这些属性可以混合利用(相矛盾的设置除外)。
完整的类定义如下： class bascLayout extends egret.Sprite {
myGroup:eui.G
constructor () {
this.myGroup = new eui.Group();
this.myGroup.width = 400;
this.myGroup.height = 300;
this.addChild( this.myGroup );
this.myGroup.layout = new eui.BasicLayout();
var outline:egret.Shape = new egret.S
outline.graphics.lineStyle(3,0x00ff00);
outline.graphics.beginFill(0x);
outline.graphics.drawRect(0,0,400,300);
outline.graphics.endFill();
this.myGroup.addChild( outline );
for(var i:number=0;i&4;i++) {
var btn:eui.Button = new eui.Button();
btn.x = 25 +i*35;
btn.y = 40+i*65;
btn.label = &button &+i;
//这里先注释掉，需要的时候再添加到显示对象里面
//this.myGroup.addChild(btn);
var btn:eui.Button = new eui.Button();
btn.label = &我是一只小小的 egret 按钮&;
btn.horizontalCenter = 0;
btn.verticalCenter = 0;
//这里先注释掉，需要的时候再添加到显示对象里面
//this.myGroup.addChild( btn );
var btn:eui.Button = new eui.Button();
btn.label = &我是一只小小的 egret 按钮&;
btn.top = 20;
btn.bottom = 20;
btn.left = 20;
btn.right = 20;
//这里先注释掉，需要的时候再添加到显示对象里面
//this.myGroup.addChild( btn );
var btn:eui.Button = new eui.Button();
btn.label = &我是一只小小的 egret 按钮&;
btn.percentWidth = 60;
btn.percentHeight = 80;
this.myGroup.addChild( btn );
btn.horizontalCenter = 0;
btn.verticalCenter = 0;
文档类里面的完整定义如下: class Main extends eui.UILayer {
protected createChildren(): void {
super.createChildren();
var theme = new eui.Theme(&resource/default.thm.json&, this.stage);
var button = new eui.Button();
button.label = &Click!&;
button.horizontalCenter = 0;
button.verticalCenter = 0;
this.addChild(button);
button.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onButtonClick,this);
// 这里是添加的代码
var base =
new bascLayout();
base.x = 50;
base.y = 50;
this.addChild(base);
private onButtonClick(e:egret.TouchEvent) {
var panel = new eui.Panel();
panel.title = &Title&;
panel.horizontalCenter = 0;
panel.verticalCenter = 0;
this.addChild(panel);
&&&&&&&&&&&
阅读(3243)
我可能需要关注的开源项目? >
我可以选择哪些技术支持? >
我可以选择哪些培训方式？>
过去的内容？>
(已满) (已满) (已满) (已满) (未满)
Copyright (C) . 京ICP备号 京公网安备02下次自动登录
未来要靠我们自己去创造～～
现在的位置:
Egret初体验–躲避类小游戏
最近微信朋友圈里突然蹦出了一大堆的小游戏（以黑白块和神经猫为首），公司也打算做一个这种小游戏推广一下微信公众号，义不容辞，先接下来再说，谁叫咱好学呢～～
先折腾了一遍Cocos2d-JS，HTML5，Flash，最后看神经猫源码发现了这个新引擎，1.0正式版刚刚发布，文档比较简单，但是上手也比较简单，在论坛里能找到一些例子去学习。
配置环境和创建项目就不写了，网站文档里写的很全：
下面简单介绍一下我这个游戏：
基本上就3个画面（准备再添加一个胜利的界面）
开始画面，一个按钮，点击进入游戏
游戏画面，滚动的背景，触摸移动的老鹰，从天而降的翔，以及右上角的时间条
结束画面，显示结果，关注按钮和重玩一次按钮
游戏主文件：GameContainer.ts（游戏逻辑）
4个类文件：GameUtil.ts（功能集合），BgMap.ts（背景滚动），Shit.ts（翔的创建和回收），ScorePanel.ts（结果展示）
所有代码已经放到Github上了：
/**GameUtil.ts*/
/**基于圆心的碰撞检测*/
public static hitTestP(obj1:egret.DisplayObject,obj2:egret.DisplayObject):boolean
var rect2x:number;
var rect2y:number;
rect2x = obj2.x + obj2.width/2;
rect2y = obj2.y + obj2.height/2;
return obj1.hitTestPoint(rect2x, rect2y);
/**根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。*/
export function createBitmapByName(name:string):egret.Bitmap {
var result:egret.Bitmap = new egret.Bitmap();
var texture:egret.Texture = RES.getRes(name);
result.texture = texture;
return result;
/**BgMap.ts*/
/**可滚动的背景*/
export class BgMap extends egret.DisplayObjectContainer
/**图片引用*/
private bmpArr:egret.Bitmap[];
/**图片数量*/
private rowCount:number;
/**stage宽*/
private stageW:number;
/**stage高*/
private stageH:number;
/**纹理本身的高度*/
private textureHeight:number;
/**控制滚动速度*/
private speed:number = 4;
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
/**初始化*/
private onAddToStage(event:egret.Event){
this.removeEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
this.stageW = this.stage.stageWidth;
this.stageH = this.stage.stageHeight;
var texture:egret.Texture = RES.getRes(&bgImage&);
this.textureHeight = texture.textureHeight;//保留原始纹理的高度，用于后续的计算
this.rowCount = Math.ceil(this.stageH/this.textureHeight)+1;//计算在当前屏幕中，需要的图片数量
this.bmpArr = [];
//创建这些图片，并设置y坐标，让它们连接起来
for(var i:number=0;i&this.rowCount;i++)
var bgBmp:egret.Bitmap = AvoidShit.createBitmapByName(&bgImage&);
bgBmp.y = this.textureHeight*i-(this.textureHeight*this.rowCount-this.stageH);
this.bmpArr.push(bgBmp);
this.addChild(bgBmp);
/**开始滚动*/
public start():void {
this.removeEventListener(egret.Event.ENTER_FRAME,this.enterFrameHandler,this);
this.addEventListener(egret.Event.ENTER_FRAME,this.enterFrameHandler,this);
/**逐帧运动*/
private enterFrameHandler(event:egret.Event):void {
for(var i:number=0;i&this.rowCount;i++)
var bgBmp:egret.Bitmap = this.bmpArr[i];
bgBmp.y+=this.speed;
//判断超出屏幕后，回到队首，这样来实现循环反复
if(bgBmp.y & this.stageH) {
bgBmp.y = this.bmpArr[0].y-this.textureHeight;
this.bmpArr.pop();
this.bmpArr.unshift(bgBmp);
/**暂停滚动*/
public pause():void {
this.removeEventListener(egret.Event.ENTER_FRAME,this.enterFrameHandler,this);
/**Shit.ts*/
/**大便，利用对象池*/
export class Shit extends egret.Bitmap
private static cacheDict:Object = {};
public static produce(textureName:string):AvoidShit.Shit
if(AvoidShit.Shit.cacheDict[textureName]==null)
AvoidShit.Shit.cacheDict[textureName] = [];
var dict:AvoidShit.Shit[] = AvoidShit.Shit.cacheDict[textureName];
var shit:AvoidShit.Shit;
if(dict.length&0) {
shit = dict.pop();
} else {
shit = new AvoidShit.Shit(RES.getRes(textureName));
shit.textureName = textureName;
return shit;
public static reclaim(shit:AvoidShit.Shit,textureName:string):void
if(AvoidShit.Shit.cacheDict[textureName]==null)
AvoidShit.Shit.cacheDict[textureName] = [];
var dict:AvoidShit.Shit[] = AvoidShit.Shit.cacheDict[textureName];
if(dict.indexOf(shit)==-1)
dict.push(shit);
public textureName:string;
public constructor(texture:egret.Texture) {
super(texture);
/**ScorePanel.ts*/
/**成绩显示*/
export class ScorePanel extends egret.Sprite
private txt:egret.TextField;
public constructor() {
super();
var g:egret.Graphics = this.graphics;
g.drawRect(0,0,100,100);
g.endFill();
this.txt = new egret.TextField();
this.txt.width = 100;
this.txt.height = 100;
this.txt.textAlign = &center&;
this.txt.textColor = 0x00dddd;
this.txt.size = 24;
this.txt.y = 60;
this.addChild(this.txt);
this.touchChildren = false;
this.touchEnabled = false;
public showScore(value:number):void {
var msg:string = value+&&;
this.txt.text = msg;
上面4个源码基本是基于官方的Demo而来，下面是游戏逻辑的代码：（这个代码太长就只贴主要部分）
游戏初始画面就是把标题，按钮都堆积在上面，比较简单，给按钮增加一个点击事件的监听就行了
this.icon.addEventListener(egret.TouchEvent.TOUCH_TAP, this.gameStart, this);
游戏进行界面，主要有三点：时间轴，翔，碰撞检测（GameUtil做了，直接用就行）
时间轴有三部分：背景框，中间的轴，遮罩层。
/**背景框*/
this.timelinebg = AvoidShit.createBitmapByName(&tlbgImage&);
this.timelinebg.x = this.stageW - this.timelinebg.width - 10;
this.timelinebg.y = 10;
this.addChild(this.timelinebg);
/**中间的轴*/
this.timeline = AvoidShit.createBitmapByName(&tlImage&);
this.timeline.x = this.stageW - this.timeline.width - 13;
this.timeline.y = 14;
this.addChild(this.timeline);
/**遮罩层*/
this.timelinemask = new egret.Rectangle(0, 0, this.timeline.width, this.timeline.height);
this.timeline.mask = this.timelinemask;
/*计时器增加遮罩层刷新的方法*/
this.gameTimer = new egret.Timer(this.timeDelay,this.timeCount);
this.gameTimer.addEventListener(egret.TimerEvent.TIMER, this.timelineDown, this);
/**遮罩层移动*/
private timelineDown(evt:egret.TimerEvent):void {
this.timelinemask.y += this.timeline.height/20;
翔的产生和销毁都是调用Shit.ts中的方法
/**创建大便*/
private createShit(evt:egret.TimerEvent):void{
var shit:AvoidShit.Shit = AvoidShit.Shit.produce(&shitImage&);
shit.x = Math.random()*(this.stageW-shit.width);
shit.y = -shit.height-Math.random()*300;
this.addChildAt(shit,this.numChildren-1);
this.shits.push(shit);
//大便运动
var theShit:AvoidShit.Shit;
var enemyFighterCount:number = this.shits.length;
for(i=0;i&enemyFighterCount;i++) {
theShit = this.shits[i];
theShit.y += this.downTimes * speedOffset;
if(theShit.y&this.stageH)
delArr.push(theShit);
for(i=0;i&delArr.length;i++) {
theShit = delArr[i];
this.removeChild(theShit);
AvoidShit.Shit.reclaim(theShit,&shitImage&);
this.shits.splice(this.shits.indexOf(theShit),1);
游戏结束有两个条件，一是时间到了，二是碰到翔
结束画面就是展示成绩和提供两个按钮
最主要的应该是微信分享功能:
需要用到两个文件libs/WeixinAPI.d.ts和launcher/WeixinAPI.js
并在html页面中增加调用
private doShare(n:number,m:number) {
WeixinApi.ready(function(api:WeixinApi) {
var info:WeixinShareInfo = new WeixinShareInfo();
info.title = &我本卖萌鸟，何处惹尘埃？&;
if (m == 0) {
info.desc = &我本卖萌鸟，何处惹尘埃？&;
} else {
info.desc = &我本卖萌鸟，何处惹尘埃？屎开，屎开～～我躲过了& + n + &坨大便，你行吗？&;
info.link = &/fly/launcher/release.html&;
info.imgUrl = &/fly/resource/assets/icon.png&;
api.shareToFriend(info);
api.shareToTimeline(info);
})
【上篇】【下篇】
您可能还会对这些文章感兴趣！
换了新工作，PHP，数据库，运维，都在干，要学的东西很多，加油~~
日志：108篇
评论：13条
分类：21个
标签：93个
链接：10个
运行：1348天
最后更新：日获取Texture1、在egret中，有2种Texture，一种是纯图片的Texture，还有一种是将DisplayObject转成的Texture（即 RenderTexture）。
纯位图的Texture。大家可以通过 RES.getRes(“run_down_png”);（如果有使用Res模块）直接获取，也可以通过URLLoader加载后获取，或者是从已经创建出来的Bitmap中直接取 texture属性。 RenderTexture。
var renderTexture:egret.RenderTexture = new egret.RenderTexture();
renderTexture.drawToTexture(displayObject);
这样就可以把自己想要的截图的容器放到一个renderTexture上。 2、转换成base64数据：toDataURL。
直接调用 texture.toDataURL(&image/png&, new egret.Rectangle(20, 20, 100, 100));即可。 其中，”image/png” 为所需要转成的格式，目前只支持 “image/png” 和 “image/jpeg”。 第二个参数就是你所希望截取的区域了，默认为texture整个大小。
注意：因为是对texture本身进行的截取转换，所以即便Bitmap本身有缩放等变形操作，都是不会影响texture截取的区域大小的。base64的数据是以 “data:image/base64,” 开头的数据。
3、保存截屏视图：saveToFile。 直接调用 texture.saveToFile(&image/png&, &a/down.png&, new egret.Rectangle(20, 20, 100, 100));。 第一、三2个参数同上面是一样的， 第二个参数是希望保存的文件名称（路径）了.
注意：浏览器只支持保存名称，所以像 “a/down.png” 这种写法，浏览器会自动将其改成”a-down.png”。图片会保存在浏览器下载的位置。Native下是可以保存路径的。图片会保存在游戏的私有空间，路径中不能有 “../“。这里为了兼容所有的平台，建议大家不要使用路径。
保存截屏测试 下面给下使用saveToFile后生成的视图。 var texture:egret.Texture = RES.getRes(&run_png&);
texture.saveToFile(&image/png&, &a/down.png&, new egret.Rectangle(20, 20, 100, 100));
&&&&&&&&&&&
阅读(4107)
我可能需要关注的开源项目? >
我可以选择哪些技术支持? >
我可以选择哪些培训方式？>
过去的内容？>
(已满) (已满) (已满) (已满) (未满)
Copyright (C) . 京ICP备号 京公网安备02