笔记十三Egret拖拽对象与吸附对象

共1083个文件

js：227个

ts：222个

map：202个

需积分: 50 151 浏览量 2018-11-08 20:36:09 上传评论收藏 52.48MB ZIP 举报

在Egret游戏引擎中，拖拽对象与吸附对象是两个关键的概念，它们在创建交互式游戏或应用时起着至关重要的作用。Egret是一个基于TypeScript开发的2D游戏框架，它提供了丰富的功能来支持游戏开发，包括对象的动态操作。拖拽对象是指用户可以通过触摸屏幕或鼠标点击并移动，使游戏场景中的某个对象跟随手指或鼠标移动。实现这个功能，我们需要对目标对象绑定事件监听器，特别是`touchBegin`、`touchMove`和`touchEnd`这三个触摸事件。当`touchBegin`触发时，记录初始位置；`touchMove`事件中，计算出移动的偏移量，并将这个偏移量加到对象的当前位置；`touchEnd`事件用于取消监听，完成拖拽操作。吸附对象则是指当拖拽对象接近其他特定对象时，会自动与之对齐或吸附。这在设计中常用于实现网格布局或者让物体排列整齐。实现吸附功能通常需要计算拖拽对象与目标对象之间的距离，如果小于预设的阈值，则调整拖拽对象的位置使其与目标对象对齐。常用的吸附方式有水平对齐、垂直对齐以及四角对齐等。下面是一个简单的拖拽对象实现步骤： 1. 为需要拖动的对象添加`touchEnabled`属性，设置为`true`，使其可以响应触摸事件。 2. 在对象上绑定`touchBegin`事件监听器，记录触摸开始时对象的位置。 3. 绑定`touchMove`事件，根据移动的差值更新对象的位置。 4. `touchEnd`事件处理函数中，移除监听器，结束拖拽。吸附功能的实现： 1. 定义一个吸附阈值，比如5像素，表示当距离小于这个值时进行吸附。 2. 在`touchMove`事件处理函数中，检测拖拽对象与目标对象的距离。 3. 如果距离小于阈值，根据吸附规则（如水平、垂直对齐）计算出新的位置，并更新拖拽对象的位置。 4. 确保在吸附后，依然保持拖拽的平滑性，避免突然跳动。在提供的`EgretGameEngine-1.4`压缩包中，可能包含了示例代码，通过分析这些代码，我们可以深入理解Egret如何实现拖拽和吸附效果。通过实践和调试，开发者可以更好地掌握这两个特性，并将其应用于自己的项目中，提升用户体验和游戏的趣味性。记得在实际操作中，优化性能也很重要，避免过多的计算导致帧率下降。

资源推荐

资源详情

资源评论

收起资源包目录

笔记十三 Egret拖拽对象与吸附对象（1083个子文件）

.DS_Store 6KB

DemoSkin.exml 3KB

TurnShowSkin.exml 3KB

GuiScreenSkin.exml 3KB

DraftSkin.exml 3KB

ItemListDemoSkin.exml 2KB

ZhuanpanSkin.exml 2KB

FrameLoadViewSkin.exml 2KB

PanelSkin.exml 1KB

FoldBigItemSkin.exml 1KB

TaskItemRendererSkin.exml 971B

RadioButtonSkin.exml 863B

CheckBoxSkin.exml 851B

LoadingUISkin.exml 840B

TarBarDemoSkin.exml 804B

SaleItemSkin.exml 768B

TextInputSkin.exml 746B

ItemDemoSkin.exml 733B

TabBarButtonSkin.exml 663B

PanelSkin.exml 645B

ButtonSkin.exml 620B

FoldItemSkin.exml 603B

MenuSkin.exml 598B

ToggleSwitchSkin.exml 595B

ItemRendererSkin.exml 568B

ProgressBarSkin.exml 499B

MenuButtonSkin.exml 440B

TabBarSkin.exml 439B

HSliderSkin.exml 335B

VSliderSkin.exml 325B

ScrollerSkin.exml 283B

VScrollBarSkin.exml 263B

HScrollBarSkin.exml 261B

font.fnt 14KB

.gitignore 60B

index.html 3KB

favicon.ico 4KB

mini.jpg 84KB

bg.jpg 73KB

map.jpg 53KB

4_0.jpg 26KB

6_0.jpg 25KB

2_2.jpg 25KB

3_3.jpg 25KB

4_9.jpg 24KB

2_6.jpg 24KB

4_8.jpg 24KB

7_7.jpg 24KB

2_4.jpg 24KB

8_5.jpg 24KB

7_8.jpg 23KB

7_0.jpg 23KB

0_8.jpg 23KB

8_0.jpg 23KB

5_8.jpg 23KB

2_5.jpg 23KB

5_7.jpg 23KB

5_5.jpg 23KB

4_10.jpg 23KB

3_2.jpg 22KB

0_7.jpg 22KB

3_0.jpg 22KB

5_6.jpg 22KB

1_5.jpg 22KB

7_11.jpg 22KB

3_7.jpg 22KB

7_5.jpg 22KB

4_1.jpg 22KB

0_9.jpg 22KB

0_0.jpg 22KB

0_10.jpg 21KB

0_2.jpg 21KB

7_4.jpg 21KB

4_3.jpg 21KB

1_0.jpg 21KB

1_10.jpg 21KB

2_7.jpg 21KB

4_7.jpg 21KB

8_10.jpg 21KB

6_1.jpg 21KB

0_6.jpg 21KB

3_10.jpg 21KB

3_1.jpg 21KB

1_2.jpg 21KB

0_11.jpg 21KB

7_1.jpg 21KB

0_1.jpg 21KB

3_11.jpg 20KB

8_7.jpg 20KB

0_5.jpg 20KB

6_3.jpg 20KB

2_8.jpg 20KB

8_4.jpg 20KB

8_1.jpg 20KB

6_9.jpg 20KB

共 1083 条

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Egret</title> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="full-screen" content="true" /> <meta name="screen-orientation" content="portrait" /> <meta name="x5-fullscreen" content="true" /> <meta name="360-fullscreen" content="true" /> <style> html, body { -ms-touch-action: none; background: #888888; padding: 0; border: 0; margin: 0; height: 100%; } </style> </head> <body> <div style="margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main" data-orientation="auto" data-scale-mode="fixedWidth" data-frame-rate="30" data-content-width="640" data-content-height="1000" data-show-paint-rect="false" data-multi-fingered="2" data-show-fps="false" data-show-log="false" data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"> </div> <script> var loadScript = function (list, callback) { var loaded = 0; var loadNext = function () { loadSingleScript(list[loaded], function () { loaded++; if (loaded >= list.length) { callback(); } else { loadNext(); } }) }; loadNext(); }; var loadSingleScript = function (src, callback) { var s = document.createElement('script'); s.async = false; s.src = src; s.addEventListener('load', function () { s.parentNode.removeChild(s); s.removeEventListener('load', arguments.callee, false); callback(); }, false); document.body.appendChild(s); }; var xhr = new XMLHttpRequest(); xhr.open('GET', './manifest.json?v=' + Math.random(), true); xhr.addEventListener("load", function () { var manifest = JSON.parse(xhr.response); var list = manifest.initial.concat(manifest.game); loadScript(list, function () { /** * { * "renderMode":, //Engine rendering mode, "canvas" or "webgl" * "audioType": 0 //Use the audio type, 0: default, 2: web audio, 3: audio * "antialias": //Whether the anti-aliasing is enabled in WebGL mode, true: on, false: off, defaults to false * "calculateCanvasScaleFactor": //a function return canvas scale factor * } **/ egret.runEgret({ renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor:function(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }}); }); }); xhr.send(null); </script> </body> </html>

评论收藏

内容反馈