Sprite

最新推荐文章于 2025-06-03 23:04:32 发布

原创最新推荐文章于 2025-06-03 23:04:32 发布 · 647 阅读

0 ·

CC 4.0 BY-SA版权

layabox 专栏收录该内容

28 篇文章

订阅专栏

本文介绍使用Laya框架进行游戏开发的基本操作，包括画布初始化、图片显示、对象旋转缩放及路径绘制等核心功能，并演示了如何创建精灵、设置旋转动画及绘制五角星路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//初始化画布

(function()

{
// 初始化画布大小，不支持WebGL时自动切换至Canvas
Laya.init(Browser.clientWidth, Browser.clientHeight, Laya.WebGL);

Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//画布垂直居中对齐
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//画布水平居中对齐

Laya.stage.scaleMode = "showall";//最小比例缩放
Laya.stage.bgColor = "#232628";//画布背景颜色,默认为黑色

f();//初始化画布后执行的函数
})();

（一）显示图片

// 方法1：使用loadImage

var ape = new Sprite();

ape.loadImage("../../res/apes/monkey3.png");

Laya.stage.addChild(ape);

创建精灵--loadImage API 取得精灵图片--将精灵添加到舞台上

// 方法2：使用drawTexture

（二）Sprite能够作为其他显示对象的容器

//povot()设置轴心点

apesCtn = new Laya.Sprite();//创建Sprite容器
Laya.stage.addChild(apesCtn);//将容器添加到舞台上
// 添加4张猩猩图片
for (var i = 0; i < 4; i++)
{
var ape = new Sprite();
ape.loadImage("../../res/apes/monkey" + i + ".png");
ape.pivot(55, 72);
// 以圆周排列猩猩
ape.pos(
Math.cos(radianUnit * i) * layoutRadius,
Math.sin(radianUnit * i) * layoutRadius);
apesCtn.addChild(ape);//将显示对象添加到容器中

}

apesCtn.pos(Laya.stage.width / 2, Laya.stage.height / 2);
Laya.timer.frameLoop(1, this, animate);每个一帧执行一次animate函数

function animate(e)
    {
        apesCtn.rotation +=  1;//图片旋转角度，未初始化时，默认值为0
    }

（三）旋转缩放

//初始化

var ape;
var scaleDelta = 0;

    function animate(e)
    {
        ape.rotation += 2;

        //心跳缩放
        scaleDelta += 0.02;
        var scaleValue = Math.sin(scaleDelta);//利用三角函数实现循环缩放
        ape.scale(scaleValue, scaleValue);//水平和垂直缩放比例，取值为[0,1]
    }

(三)根据数据绘制路径

function drawPentagram()
{
var canvas = new Laya.Sprite();
Laya.stage.addChild(canvas);
var path = [];
path.push(0, -130);
path.push(33, -33);
path.push(137, -30);
path.push(55, 32);
path.push(85, 130);
path.push(0, 73);
path.push(-85, 130);
path.push(-55, 32);
path.push(-137, -30);
path.push(-33, -33);
canvas.graphics.drawPoly(Laya.stage.width / 2, Laya.stage.height / 2, path, "#FF7F50");//绘制多边形，轴心点初始x,y坐标，各端点坐标，填充颜色，边框颜色（可选），边框宽度（可选）

}

（四）遮罩，放大镜