egret 小游戏设置头像 加载项目外部图片(无后端异步加载图片)处理方式
index.html页面中:
CSS样式:
<style> html, body { /*-ms-touch-action: none;*/ background: #888888; padding: 0; border: 0; margin: 0; height: 100%; } #head{ position: absolute; width: 108px; height: 108px; background-image: url("resource/assets/heads/head_bg.png"); } #head img{ position: absolute; top:10.5px; left: 14px; width:81px; height:81px; border-radius:40px ; -webkit-border-radius:40px; -moz-border-radius:40px; } </style>
Html 标签:
<div id="game" style="position:relative; margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main" data-orientation="auto" data-scale-mode="showAll" data-frame-rate="60" data-content-width="720" data-content-height="1120" 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> <div id="head" hidden> <img id="head_icon" src="resource/assets/heads/head_default.png" onerror="loadImageError(this)"> </div>
JS方法:
/** * 初始化信息 */ var head = ""; //玩家头像 var init = function () { //初始化头像 var image = document.getElementById("head_icon"); if (image) { image.src = head; } } /** * 设置头像是否显示 * @param value true:显示 false:不显示 * @param alpha 透明度 默认50 */ function setHead(value = false, alpha = 50) { var headDiv = document.getElementById("head"); if (headDiv) { headDiv.hidden = !value; headDiv.style.filter = 'alpha(opacity=' + alpha + ')'; headDiv.style.opacity = alpha / 100; if (alpha == 50) { setHeadPos(); } } } /** * 设置头像坐标 */ function setHeadPos() { var gameDiv = document.getElementById("game"); var headDiv = document.getElementById("head"); //game showall模式计算宽高 var m_width = 0; var m_height = 0; var marginTop = 6; var marginLeft = 20; var percent = 720 / 1120; var scale = 0.5; if (gameDiv.clientWidth / gameDiv.clientHeight > percent) { //横向 m_width = gameDiv.clientHeight * percent; m_height = gameDiv.clientHeight; scale = m_width/720; marginTop = marginTop*scale; marginLeft = marginLeft*scale; headDiv.style.top = marginTop + "px"; headDiv.style.left = (gameDiv.clientWidth - m_width) / 2 + marginLeft + "px"; } else { //纵向 m_width = gameDiv.clientWidth; m_height = gameDiv.clientWidth / percent; scale = m_height/1120; marginTop = marginTop*scale; marginLeft = marginLeft*scale; headDiv.style.top = (gameDiv.clientHeight - m_height) / 2 + marginTop + "px"; headDiv.style.left = marginLeft + "px"; } //设置缩放后的坐标 headDiv.style.transformOrigin="left top 0"; headDiv.style.webkitTransform = "scale(" + scale + ")"; headDiv.style.transform = "scale(" + scale + ")"; }
ts调用js代码:
//设置头像 declare function setHead(value,alpha);
ts代码:
/* 设置头像 */ public setHead(params?: any) { //调用外包JS,加载项目外部图片 if (!params) { params = [true, 100]; } setHead(params[0], params[1]); }
ts调用:
Global.instance.setHead();
相关推荐
加载zip压缩的javascript代码以及在Egret H5实际应用 的代码例子 blog地址:http://blog.csdn.net/sujun10/article/details/76427703
Egret是一个基于HTML5的开源游戏开发框架,它提供了一整套完整的2D和3D游戏开发解决方案,包括图形渲染、动画系统、事件处理以及音频管理等。在这个项目中,"120-media-audio"可能是一个示例或教程,专门讲解如何在...
4. 资源管理:Egret的资源管理系统支持图片、音频、字体等资源的加载和管理,确保游戏资源的高效使用。 5. 实时预览:在开发过程中,Egret Wing的实时预览功能允许开发者快速查看游戏效果,进行即时调试。 6. 测试与...
Egret的 RES 库提供了一种方便的方式来批量加载资源,如图片、音频、XML等。我们可以使用 `RES.addEventListener` 注册加载完成的回调,然后调用 `RES.loadConfig` 和 `RES.loadGroup` 开始加载。 3. **构建视图**...
在本文中,我们将深入探讨Egret游戏引擎的分帧加载图形对象技术,这是一个关键的优化策略,尤其在处理大型游戏资源时显得尤为重要。Egret白鹭引擎是一款广泛使用的HTML5游戏开发工具,它提供了丰富的功能和高效的...
`fengzii-p1-master` 是一个基于Egret的项目源码库,适合开发者学习和参考,尤其是对于想要创建小游戏的初学者或者希望提升Egret开发技能的程序员。这个项目包含了小游戏的demo代码,可以通过分析和研究这些源码来...
Egret 提供了完整的解决方案,包括编辑器、引擎、构建工具以及社区支持,帮助开发者高效地创建高质量的跨平台游戏。 在这款名为 "22_游戏egret" 的项目中,我们可以看到几个关键文件: 1. **index.html**:这是...
本库旨在为Egret封装常用的手势操作,因本人能力有限,有的实现并不完善,欢迎批评指正。Egret手势识别库egret_gesture目前已实现的手势: 1. Tap(点一下) 2. Double Tap (双击) 3. Pinch(二指往內或往外拨动,平时...
3. **资源管理**:Egret提供了强大的资源管理功能,包括图片、音频、字体等,可以进行高效的加载和缓存,确保游戏性能。 4. **事件驱动**:Egret采用事件驱动模型,通过监听和处理事件来实现游戏逻辑,简化了代码...
最后,为了将这个下拉框整合到你的Egret项目中,你需要确保正确地配置了Egret的项目结构。`index.html`是你的HTML入口文件,`egretProperties.json`用于配置项目属性,`src`目录包含源代码,`template`和`resource`...
1. **引入库**:首先,将解压后的crypto-js文件夹放入Egret项目的lib目录下,然后在项目的配置文件(project.json)中声明依赖。 2. **编写代码**:利用.d.ts文件提供的类型定义,创建AES加密和解密的实例,设置...
4. **保存拆分结果**:最后,将拆分出的图片按照原始的命名规则或自定义的命名规则保存到指定的目录下,以便于在Egret项目中重新引用。 使用这个工具,开发者可以有效地恢复或更新图集资源,而无需原始的源图像文件...
【EgerAir:Egret的移动端解决方案】 EgerAir 在压缩包文件名中提及,它是Egret针对移动设备推出的一个重要组件。EgerAir集成了Egret Engine,并且添加了对原生功能的封装,如推送通知、本地存储、硬件加速等,使得...
Egret Conversion是一个Egret项目转换工具,可以将Flash项目转换到Egret HTML5项目中,支持Flash项目到Egret项目的一键高效转换,功能强大可扩展,支持AS3各种复杂语法特性,涵盖绝大部分的Flash API,并且支持swf...
Egret引擎是HTML5游戏开发的一个强大工具,它提供了一整套完整的解决方案,包括2D渲染引擎、项目管理、资源管理、动画系统、物理引擎接口以及调试工具等。 一、Egret引擎详解 Egret引擎是基于TypeScript开发的,...
而在这个项目中,我们关注的是使用Egret框架开发的2048游戏源码。Egret,作为一款强大的HTML5游戏开发引擎,为开发者提供了丰富的功能和高效的性能,使得在Web平台上构建2D游戏变得轻而易举。接下来,我们将深入探讨...
Egret 白鹭,预加载与播放Facebook插屏广告代码,播放与预加载Facebook激励视频广告代码
最后,Egret社区活跃,拥有大量的教程、示例和插件,开发者可以通过参与社区交流,获取最新资讯和解决方案,加速自己的学习进程。 总的来说,Egret引擎是HTML5游戏开发的一个强大选择,通过深入学习“Egret HTML5...
Egret Engine是一款广泛应用于开发2D游戏和交互式应用的开源JavaScript框架。v5.4.1是这个引擎的一个特定版本,包含了针对性能优化、稳定性改进和新功能的更新。这个压缩包文件包含了框架的核心组件和相关文档,是...
图像应用**:这可能涉及到图片的加载、缩放、裁剪等操作,Egret提供了BitmapData类来处理图像数据,理解这些操作对于游戏中的图像处理至关重要。 这个实例库提供了从基础到进阶的全面示例,无论是想要学习Egret的...