Egret实现滚动排行榜

首先用EUI布局做好两个皮肤,主要就是列表的使用,主要代码:

class Rank extends eui.Component {

    private listGoods: eui.List;
   
    constructor() {
        super();
        this.addChild(new PlayMusic());
        this.addEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
        this.skinName = "src/GameRank/rankUI.exml";
        this.once(egret.Event.ADDED_TO_STAGE, this.init, this);
    }


    //皮肤加载完成
    private uiCompHandler() {
        this.listGoods.itemRenderer = GoodsListIRSkin;

        this.listGoods.dataProvider = new eui.ArrayCollection(data)
    }

class GoodsListIRSkin extends eui.ItemRenderer {
    
    constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
        this.skinName = "rankListUI";


    }
    private uiCompHandler() {
       
    }  
}

eui代码:

1.rankUI.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="rankUI" width="480" height="854" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
    <e:Image source="beijing_jpg" x="0" y="0" />
    <e:Image source="paihangbang_png" x="19" y="-8" scaleX="1" scaleY="1" />
    <e:Scroller id="RankList" width="310" height="258" x="90" y="367">
        <e:viewport>
            <e:List id="listGoods" width="300">
                <e:layout>
                    <e:VerticalLayout/>
                </e:layout>
            </e:List>
        </e:viewport>
        <e:Skin>
<e:VScrollBar id="verticalScrollBar" width="8" minHeight="100%" height="100%" right="0">
<e:Skin>
<e:Image id="thumb" width="8" source="xiala_png"  scale9Grid="1,1,4,4"/>
</e:Skin>
</e:VScrollBar>
</e:Skin>
    </e:Scroller>
    <e:Button id="btn_share" label="" x="26" y="678">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="95%" height="95%" width.down="100%" height.down="100%" source="fenxiangchoujiang_png" source.down="fenxiangchoujiang_png" />
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
            </e:Skin>
        </e:skinName>
    </e:Button>
    <e:Button id="btn_again" label="" x="260" y="678">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="95%" height="95%" width.down="100%" height.down="100%" source="zaiwanyici_png" source.down="zaiwanyici_png" />
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
            </e:Skin>
        </e:skinName>
    </e:Button>
<e:BitmapLabel id="rankLabel" x="106" y="278" width="64" height="47" text="16" font="btsz2_fnt" textAlign="center"/>
<e:BitmapLabel id="getScore" x="222" y="305" width="132" height="51" textAlign="center" text="1000" font="btsz2_fnt" scaleX="0.5" scaleY="0.4"/>
<e:Label id="nameLabel" text="忧郁小馒头" x="196" y="270" size="18" verticalAlign="middle" textAlign="center" height="25" width="103"/>
<e:Group id="touXiang" width="59" height="59" x="317" y="270">
<e:Image source="touxiang_png" x="0" y="0" width="59" height="59" scaleX="1" scaleY="1"/>
</e:Group>
</e:Skin>

2.rankListUI.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="rankListUI" width="300" height="82" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
<w:Config id="157db8bad37"/>
<e:Image source="dikuang_png" x="0" y="0" width="100%" height="100%"/>
    <e:BitmapLabel id="rankLabel" x="18" y="17" width="64" height="47" font="btsz2_fnt" textAlign="center" text="{data.order}"/>
<e:BitmapLabel id="getScore" x="132" y="46" width="132" height="51" textAlign="center" text="{data.score}" font="btsz2_fnt" scaleX="0.5" scaleY="0.4"/>
<e:Label id="nameLabel" x="106" y="13" width="103" height="25" size="23" verticalAlign="middle" textAlign="center" text="{data.nickname}"/>
<e:Image id="touXiang" x="226" y="10" width="59" height="59" scaleX="1" scaleY="1" source="{data.headimgurl}"/>
</e:Skin>



在 Egret 中,可以使用 RenderTexture 和 BlendMode 来实现渲染批次。 渲染批次是指将多个绘制操作合并为一个批次,从而减少绘制次数,提高游戏性能。 具体实现步骤如下: 1. 创建一个 RenderTexture 对象,将要渲染的显示对象添加到 RenderTexture 中。 2. 使用 BlendMode 设置渲染模式,将多个 RenderTexture 合并为一个批次。 示例代码如下: ``` // 创建一个 RenderTexture 对象 var renderTexture: egret.RenderTexture = new egret.RenderTexture(); renderTexture.drawToTexture(displayObject); // 设置 BlendMode renderTexture.blendMode = egret.BlendMode.ADD; ``` 在使用 RenderTexture 进行渲染时,可以将多个 RenderTexture 合并为一个批次,从而减少绘制次数,提高游戏性能。例如,可以将多个 RenderTexture 合并到一个 Bitmap 中进行渲染,代码如下: ``` // 创建一个 Bitmap 对象 var bitmap: egret.Bitmap = new egret.Bitmap(); bitmap.width = 800; bitmap.height = 600; // 创建多个 RenderTexture 对象 var renderTexture1: egret.RenderTexture = new egret.RenderTexture(); var renderTexture2: egret.RenderTexture = new egret.RenderTexture(); renderTexture1.drawToTexture(displayObject1); renderTexture2.drawToTexture(displayObject2); // 合并 RenderTexture bitmap.texture = new egret.RenderTexture(); bitmap.texture.drawToTexture(renderTexture1); bitmap.texture.drawToTexture(renderTexture2); // 设置 BlendMode bitmap.blendMode = egret.BlendMode.ADD; ``` 注意,使用渲染批次时需要注意渲染顺序和深度问题,以避免出现渲染错误的情况。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值