Egret2D跑酷之金币编辑器


在《天天酷跑》游戏中,我们可以吃各种不同的金币,其中金币的样式非常的多样化,有箭头、爱心、动物等等多种形式,这些金币的摆放,需要我们使用一个编辑器来完成,一般的方式就是我们设计一个(n*m)二维矩阵进行,天天酷跑中金币样式如下:

二维矩阵如下所示

其中a(m*n)表示第n行、第m列的元素,此处我们设定一些元素类型,以后也可以根据这个进行扩展。
N表示空元素
C表示普通金币
于是下面这个矩阵
C N N N C
N C N C N
N N C N N
N C N C N
C N N N C
金币构图如下

除了每个元素的行列坐标,还有就是行间距和列间距也影响显示结果,于是一般的我们认为每个金币显示的内容包括一个行间距、一个列间距、一个二维矩阵以及n(行数)和m(列数)。
为了使用数据更佳通用,这边将使用json数据类型,json样例表示如下:


{
    "name": "coin1",
    "width": 5,
    "height": 5,
    "content": [
        [
            "C",
            "N",
            "N",
            "N",
            "C"
        ],
        [
            "N",
            "C",
            "N",
            "C",
            "N"
        ],
        [
            "N",
            "N",
            "C",
            "N",
            "N"
        ],
        [
            "N",
            "C",
            "N",
            "C",
            "N"
        ],
        [
            "C",
            "N",
            "N",
            "N",
            "C"
        ]
    ],
    "width_distance": 5,
    "height_distance": 5
}

coins.json点击下载

  • Egret读取数据生成

        // 测试金币 
        var coins = RES.getRes("coins_json");
        var maxW = coins['width'];
        var maxH = coins['height'];
        var disW = coins['width_distance'];
        var disH = coins['height_distance'];
        
        // 得到Coin
        var coin_texture = RES.getRes("cc01_png");
        var coin:egret.Bitmap = new egret.Bitmap(coin_texture);
        var coin_width = coin.width;
        var coin_height = coin.height;
        coin = null;

        // 开始位置
        var start_x = 300;
        var start_y = 300;
        for (var i = 0; i < maxW; i++) {
            for (var j = 0; j < maxH; j++) {
                if (coins.content[i][j] == "C") {
                    var coin_texture = RES.getRes("cc01_png");
                    var coin:egret.Bitmap = new egret.Bitmap(coin_texture);
                    this.app.root.addChildAt(coin, 5);
                    coin.x = start_x;
                    coin.y = start_y;
                    coin.scaleX = 0.33;
                    coin.scaleY = 0.33;
                }
                start_y = start_y + coin_height * 0.33 + disH;
            }
            start_y = 300;
            start_x = start_x + coin_width * 0.33 + disW;
        }

运行结果如下图所示:

我们通过参数可以改变样式,比如修改列间距为-10,显示结果如下图所示

当然也可以修改行间距为-10如下图所示

  • 金币编辑器

下面我们就制作一下这个金币编辑器,我们直接使用js配合服务器进行完成。
行数:
列数:
元素行宽:
元素列宽:


选中效果如下:

程序运行结果如图

欢迎留言

avatar
  Subscribe  
Notify of