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引擎是HTML5游戏开发的一个强大工具,它提供了一整套完整的解决方案,包括2D渲染引擎、项目管理、资源管理、动画系统、物理引擎接口以及调试工具等。 一、Egret引擎详解 Egret引擎是基于TypeScript开发的,...
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加密和解密的实例,设置...
【EgerAir:Egret的移动端解决方案】 EgerAir 在压缩包文件名中提及,它是Egret针对移动设备推出的一个重要组件。EgerAir集成了Egret Engine,并且添加了对原生功能的封装,如推送通知、本地存储、硬件加速等,使得...
Egret Conversion是一个Egret项目转换工具,可以将Flash项目转换到Egret HTML5项目中,支持Flash项目到Egret项目的一键高效转换,功能强大可扩展,支持AS3各种复杂语法特性,涵盖绝大部分的Flash API,并且支持swf...
而在这个项目中,我们关注的是使用Egret框架开发的2048游戏源码。Egret,作为一款强大的HTML5游戏开发引擎,为开发者提供了丰富的功能和高效的性能,使得在Web平台上构建2D游戏变得轻而易举。接下来,我们将深入探讨...
Egret 白鹭,预加载与播放Facebook插屏广告代码,播放与预加载Facebook激励视频广告代码
最后,Egret社区活跃,拥有大量的教程、示例和插件,开发者可以通过参与社区交流,获取最新资讯和解决方案,加速自己的学习进程。 总的来说,Egret引擎是HTML5游戏开发的一个强大选择,通过深入学习“Egret HTML5...
Egret Engine是一款广泛应用于开发2D游戏和交互式应用的开源JavaScript框架。v5.4.1是这个引擎的一个特定版本,包含了针对性能优化、稳定性改进和新功能的更新。这个压缩包文件包含了框架的核心组件和相关文档,是...
图像应用**:这可能涉及到图片的加载、缩放、裁剪等操作,Egret提供了BitmapData类来处理图像数据,理解这些操作对于游戏中的图像处理至关重要。 这个实例库提供了从基础到进阶的全面示例,无论是想要学习Egret的...
白鹭引擎(Egret Engine)是一款开源的2D游戏开发框架,主要使用TypeScript语言,但同时也支持JavaScript。在游戏开发过程中,为了优化性能和减少加载时间,开发者通常会将大量的图片资源整合成一个图集(Atlas),...
2. **图像对象的创建与布局**:找到`<img>`标签后,需要创建Egret的`Bitmap`对象,加载图片资源,并将其添加到文本流中。同时,我们需要处理图像的尺寸、位置以及与其他文本元素的相对关系。 3. **更新渲染**:在...