※ 图片资源来源于CreateJs官方Project
地图来源自然资源部地图技术审查中心承办的标准地图服务网站世界地图小8开审图号：GS(2016)1663号
想要了解和下载更多关于标准地图的内容，欢迎访问中国地图出版集团官网和中国地图出版集团官方微博

文章目录

效果演示
代码分释
全部代码

效果演示

代码分释

整体思路

通过SpriteSheet构建一个可操作的动画，利用Ticker进行计时的事件触发，通过鼠标事件控制前进方向和跳跃动画的转换。

主要显示元素

sky 背景地图层
ground 下方地面层
hill & hill2 后方绿山层
grant 动画人物层

次要显示元素

jump & direct & text_jump & text_direct 按钮形状和按钮文字
mark 地图标识

0 加载资源

manifest = [{ src: "spritesheet_grant.png", id: "grant" },{ src: "sky_map.png", id: "sky" },{ src: "ground.png", id: "ground" },{ src: "hill1.png", id: "hill" },{ src: "hill2.png", id: "hill2" },{ src: "map_mark.png", id: "mark" }
]loader = new createjs.LoadQueue(false)
loader.addEventListener("complete", handleComplete)
loader.loadManifest(manifest, true, "../_assets/img/")

利用Preload.js中的LoadQueue方法，一次性加载所有资源

LoadQueue([preferXHR=true], [basePath=""], [crossOrigin=""])

preferXHR 确定预加载实例是否倾向于使用XHR（XML HTTP请求）或HTML标签进行加载。如果为false，则队列将在可能的情况下使用标签加载，并在必要时使用XHR。

basePath 加载之前，队列中所有项目的source参数之前的路径。以诸如http://或相对路径作为协议开头的源…/ 将不会接收基本路径。

crossOrigin 不推荐使用crossOrigin参数。改用LoadItem.crossOrigin

loadManifest(manifest,[loadNow=true],[basePath])

manifest 要加载的文件列表

loadNow 启动立即加载 or 等待加载调用

basePath 在每个文件之前添加基本路径

1 sky元素

sky = new createjs.Shape()
sky.graphics.beginBitmapFill(loader.getResult("sky")).drawRect(-1000, 0, 3000, h)
sky.cache(-1000, 0, 3000, h)

地图图片宽度3000，每1000一个循环

getResult(value,[rawResult=false])

value id或者src

rawResult 返回原始结果而不是格式化结果

2 ground元素

var groundImg = loader.getResult("ground")
ground = new createjs.Shape()
ground.graphics.beginBitmapFill(groundImg).drawRect(-groundImg.width, 0, w + groundImg.width * 2, groundImg.height)
ground.tileW = groundImg.width
ground.y = h - groundImg.height
ground.cache(-groundImg.width, 0, w + groundImg.width * 2, groundImg.height)

地面图像宽度81，设定层宽度为960 + 81 * 2

beginBitmapFill(image,repetition,matrix)

image 用作图案的图像

repetition 重复类型，默认为repeat

matrix 指定位图填充转换矩阵

3 hill&hill2元素

hill = new createjs.Bitmap(loader.getResult("hill"))
hill.setTransform(Math.random() * w, h - hill.image.height * 4 - groundImg.height, 4, 4)
hill.alpha = 0.5hill2 = new createjs.Bitmap(loader.getResult("hill2"))
hill2.setTransform(Math.random() * w, h - hill2.image.height * 3 - groundImg.height, 3, 3)

hill设定4倍图像大小，hill2设定3倍图像大小

setTransform([x=0], [y=0], [scaleX=1], [scaleY=1], [rotation=0], [skewX=0], [skewY=0], [regX=0], [regY=0])

x,y 水平垂直位移

scaleX,scaleY 水平垂直比例

rotation 旋转度数

skewX,skewY 水平垂直偏斜系数

regX,regY 水平垂直配准点

4 grant元素

var spriteSheet = new createjs.SpriteSheet({framerate: 30,"images": [loader.getResult("grant")],"frames": { "regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165 },"animations": {"run": [0, 25, "run", 1.5],"jump": [26, 63, "run"]}
})
grant = new createjs.Sprite(spriteSheet, "run")
grant.y = 35

设置雪碧图显示列表元素，并设置run、jump动画

SpriteSheet(data)

data:{images,frames,animations,framerate}

images 雪碧图资源

frameate 帧率

frames 镜框
width ＆ height 为必填项，并指定框架的尺寸

regX ＆ regY 指示框架的注册点或“原点”

spacing 指示帧之间的间隔

margin 指定图像周围的边距

count 允许您指定子画面中的帧总数；如果省略，将根据源图像和帧的尺寸进行计算。将根据帧在源图像中的位置（从左到右，从上到下）为帧分配索引。

animations 动画定义要作为命名动画播放的帧序列
start 开始针，end 结束帧，next 动画完成后进行的动画，和speed 播放速度。

5 jump、direct、text_direct、text_jump和mark元素

jump = new createjs.Shape(new createjs.Graphics().beginFill('lightblue').drawCircle(w - 50, h - 50, 35)
)
jump.shadow = new createjs.Shadow('rgba(0,0,0,0.2)', 5, 5, 5)
jump.cache(0, 0, w, h)direct = new createjs.Shape(new createjs.Graphics().beginFill('lightgreen').drawCircle(w - 140, h - 50, 35)
)
direct.shadow = new createjs.Shadow('rgba(0,0,0,0.2)', 5, 5, 5)
direct.cache(0, 0, w, h)direct.addEventListener('mousedown', handleTurnDirection)
jump.addEventListener('mousedown', handleJumpStart)text_direct = new createjs.Text("Turn\nRound", "20px Arial", "#fff")
text_direct.set({ x: w - 140, y: h - 70 })
text_direct.textAlign = 'center'text_jump = new createjs.Text("Jump", "20px Arial", "#fff")
text_jump.set({ x: w - 50, y: h - 60 })
text_jump.textAlign = 'center'mark = new createjs.Bitmap(loader.getResult('mark'))
mark.setTransform(200, 50, 0.1, 0.1)

direct 设置鼠标点击事件 handleTurnDirection 转换方向
jump 设置鼠标点击事件 handleJumpStart 切换跳跃动画

6 鼠标点击事件handleTurnDirection&handleJumpStart

function handleJumpStart() {grant.gotoAndPlay("jump")
}function handleTurnDirection(event) {direction *= -1grant.scaleX = direction
}

direction 为 1 或 -1 ，分别代表向右和向左
7 计时tick事件

function tick(event) {var deltaS = event.delta / 1000var position = grant.x + 150 * deltaS * direction// 人物平移var grantW = grant.getBounds().width * grant.scaleX * directiongrant.x = (position >= w + grantW) ? -grantW : ((position < -grantW) ? w + grantW : position)// 地面平移ground.x = (ground.x - deltaS * 150 * direction) % ground.tileW// 山丘平移hill.x = (hill.x - deltaS * 30 * direction)if (hill.x + hill.image.width * hill.scaleX <= 0) {hill.x = w}if (hill.x >= w) {hill.x = - hill.image.width * hill.scaleX}    hill2.x = (hill2.x - deltaS * 45 * direction)if (hill2.x + hill2.image.width * hill2.scaleX <= 0) {hill2.x = w}if (hill2.x >= w) {hill2.x = - hill2.image.width * hill2.scaleX}// 背景平移sky.x = (sky.x - deltaS * 5 * direction)if (sky.x <= -1000) {sky.x = -2}if (sky.x >= 1000) {sky.x = 2}stage.update(event)
}

全部代码

Github - SpriteSheet

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>EaselJS: Sprite Sheet Example</title><link href="../_assets/css/shared.css" rel="stylesheet" type="text/css" /><script src="../_assets/js/shared.js"></script><script src="../lib/easeljs-NEXT.js"></script><!-- We also provide hosted minified versions of all CreateJS libraries.http://code.createjs.com --><script src="../lib/preloadjs-NEXT.min.js"></script><script id="editable">var stage, w, h, loadervar sky, grant, ground, hill, hill2var direct, jumpvar text_direct, text_jumpvar direction = 1function init() {shared.loading()stage = new createjs.Stage("examCanvas")w = stage.canvas.widthh = stage.canvas.heightmanifest = [{ src: "spritesheet_grant.png", id: "grant" },{ src: "sky_map.png", id: "sky" },{ src: "ground.png", id: "ground" },{ src: "hill1.png", id: "hill" },{ src: "hill2.png", id: "hill2" },{ src: "map_mark.png", id: "mark" }]loader = new createjs.LoadQueue(false)loader.addEventListener("complete", handleComplete)loader.loadManifest(manifest, true, "../_assets/img/")}function handleComplete() {shared.loaded()sky = new createjs.Shape()sky.graphics.beginBitmapFill(loader.getResult("sky")).drawRect(-1000, 0, 3000, h)sky.cache(-1000, 0, 3000, h)var groundImg = loader.getResult("ground")ground = new createjs.Shape()ground.graphics.beginBitmapFill(groundImg).drawRect(-groundImg.width, 0, w + groundImg.width * 2, groundImg.height)ground.tileW = groundImg.widthground.y = h - groundImg.heightground.cache(-groundImg.width, 0, w + groundImg.width * 2, groundImg.height)hill = new createjs.Bitmap(loader.getResult("hill"))hill.setTransform(Math.random() * w, h - hill.image.height * 4 - groundImg.height, 4, 4)hill.alpha = 0.5hill2 = new createjs.Bitmap(loader.getResult("hill2"))hill2.setTransform(Math.random() * w, h - hill2.image.height * 3 - groundImg.height, 3, 3)var spriteSheet = new createjs.SpriteSheet({framerate: 30,"images": [loader.getResult("grant")],"frames": { "regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165 },"animations": {"run": [0, 25, "run", 1.5],"jump": [26, 63, "run"]}})grant = new createjs.Sprite(spriteSheet, "run")grant.y = 35stage.addChild(sky, hill, hill2, ground, grant)jump = new createjs.Shape(new createjs.Graphics().beginFill('lightblue').drawCircle(w - 50, h - 50, 35))jump.shadow = new createjs.Shadow('rgba(0,0,0,0.2)', 5, 5, 5)jump.cache(0, 0, w, h)direct = new createjs.Shape(new createjs.Graphics().beginFill('lightgreen').drawCircle(w - 140, h - 50, 35))direct.shadow = new createjs.Shadow('rgba(0,0,0,0.2)', 5, 5, 5)direct.cache(0, 0, w, h)direct.addEventListener('mousedown', handleTurnDirection)jump.addEventListener('mousedown', handleJumpStart)stage.addChild(direct, jump)text_direct = new createjs.Text("Turn\nRound", "20px Arial", "#fff")text_direct.set({ x: w - 140, y: h - 70 })text_direct.textAlign = 'center'text_jump = new createjs.Text("Jump", "20px Arial", "#fff")text_jump.set({ x: w - 50, y: h - 60 })text_jump.textAlign = 'center'mark = new createjs.Bitmap(loader.getResult('mark'))mark.setTransform(200, 50, 0.1, 0.1)stage.addChild(mark, text_direct, text_jump)createjs.Ticker.timingMode = createjs.Ticker.RAFcreatejs.Ticker.addEventListener("tick", tick)}function handleJumpStart() {grant.gotoAndPlay("jump")}function handleTurnDirection(event) {direction *= -1grant.scaleX = direction}function tick(event) {var deltaS = event.delta / 1000var position = grant.x + 150 * deltaS * direction// 得到的是人物的宽度var grantW = grant.getBounds().width * grant.scaleX * directiongrant.x = (position >= w + grantW) ? -grantW : ((position < -grantW) ? w + grantW : position)ground.x = (ground.x - deltaS * 150 * direction) % ground.tileWhill.x = (hill.x - deltaS * 30 * direction)if (hill.x + hill.image.width * hill.scaleX <= 0) {hill.x = w}if (hill.x >= w) {hill.x = - hill.image.width * hill.scaleX}hill2.x = (hill2.x - deltaS * 45 * direction)if (hill2.x + hill2.image.width * hill2.scaleX <= 0) {hill2.x = w}if (hill2.x >= w) {hill2.x = - hill2.image.width * hill2.scaleX}sky.x = (sky.x - deltaS * 5 * direction)if (sky.x <= -1000) {sky.x = -2}if (sky.x >= 1000) {sky.x = 2}stage.update(event)}</script>
</head><body onload="init()"><header class="Nora7aki"><h1>雪碧图列表动画 Sprite Sheets</h1><p>通过<code>SpriteSheet</code>构建一个可操作的动画，通过鼠标控制前进方向和跳跃</p><p><strong>Note:</strong> Some browsers can not load images or access pixeldata when running local files, and may throw a security error or notwork unless the content is running on a server.</p></header><div class="content" style="overflow: hidden;width: 960px;height: 400px"><canvas id="examCanvas" width="960" height="400"></canvas></div></body></html>

欢迎关注微信公众号 "书咖里的曼基康"

说我死宅？看我在标准世界地图上来回摩擦！相关推荐

CVPR2019目标检测论文看点：并域上的广义交
CVPR2019目标检测论文看点:并域上的广义交 Generalized Intersection over Union Generalized Intersection over Union: A ...
我看中国游戏业（上）
我看中国游戏业 by 丑马梁摘要本文通过对现阶段中国网络游戏所处的发展阶段分析,引出笔者观点:中国的网络游戏业差异于对于游戏世界观体系重要性的理解与发挥上.借助对于当前中国网络游戏主要盈利 ...
Linux cat指令（用于连接文件并打印到标准输出设备上）
cat(英文全拼:concatenate)命令用于连接文件并打印到标准输出设备上. 文章目录使用权限语法格式参数说明实例把 textfile1 的文档内容加上行号后输入 textfile2 ...
CAD看图如何在电脑上快速找到并打开指定CAD图纸
我们在CAD制图工作中,常常会需要查看各种CAD图纸,但是有时候电脑上存储的CAD图纸太多而且存储位置不好找,该如何找到并打开指定CAD图纸呢?今天小编就给大家推荐几个非常好用的方法.演示操作 ...
画饼画到世界地图上：按比例呈现多组数据
地图是数据可视化的一部分,做群体遗传学.动物学.植物学.微生物学等的朋友经常用到世界地图,比如绘制不同小麦品种的世界分布.一般情况下,我们根据经纬度将数据标注在地图上,然而有些时候,我们会需要更高级的 ...
[不看后悔啊！]史上最为全面的Autocad施工图视频教程看完就能成为装修设计师 http://www.51zxw.net/study.asp?vip=1573837
[不看后悔啊!]史上最为全面的Autocad施工图视频教程看完就能成为装修设计师 http://www.51zxw.net/study.asp?vip=1573837 沈阳设计:http://hom ...
什么人不在生死簿_人在做，天在看：阎王爷“生死簿”上到底写了什么？
人在做,天在看:阎王爷"生死簿"上到底写了什么? 物有始末,人有生死.在坊间传说中,人的寿命长短归阎罗王所管,所以民间有"阎王让你三更死,谁敢留你到五更"的说法 ...
标准键盘上的所有键，及其相应的键控代码值和 ASCII
在学习ASCII 码键时查到的,在此转载下. 以下表列出了标准键盘上的所有键,及其相应的键控代码值和 ASCII 键控代码值,这些值用于在ActionScript 中标识这些键: 1.字母 A 到 Z ...
如何在公司标准电脑上安装统计联网直报平台证书并正常工作？
如何在公司标准电脑上安装统计联网直报平台证书并正常工作? ©Lander Zhang 专注外企按需IT基础架构运维服务,IT Helpdesk 实战培训践行者 https://blog.51cto.c ...

说我死宅？看我在标准世界地图上来回摩擦！

文章目录

效果演示

代码分释

全部代码

说我死宅？看我在标准世界地图上来回摩擦！相关推荐

最新文章

热门文章