`
ch_kexin
  • 浏览: 898803 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

egret加载项目外部图片,调用外包JS,我的解决方案

 
阅读更多

 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项目应用的例子

    加载zip压缩的javascript代码以及在Egret H5实际应用 的代码例子 blog地址:http://blog.csdn.net/sujun10/article/details/76427703

    Egret官网声音项目

    Egret是一个基于HTML5的开源游戏开发框架,它提供了一整套完整的2D和3D游戏开发解决方案,包括图形渲染、动画系统、事件处理以及音频管理等。在这个项目中,"120-media-audio"可能是一个示例或教程,专门讲解如何在...

    基于Egret30搭建的HTML5游戏极速开发解决方案

    4. 资源管理:Egret的资源管理系统支持图片、音频、字体等资源的加载和管理,确保游戏资源的高效使用。 5. 实时预览:在开发过程中,Egret Wing的实时预览功能允许开发者快速查看游戏效果,进行即时调试。 6. 测试与...

    笔记十Egret动画式加载场景

    Egret的 RES 库提供了一种方便的方式来批量加载资源,如图片、音频、XML等。我们可以使用 `RES.addEventListener` 注册加载完成的回调,然后调用 `RES.loadConfig` 和 `RES.loadGroup` 开始加载。 3. **构建视图**...

    笔记十二Egret分帧加载图形对象

    在本文中,我们将深入探讨Egret游戏引擎的分帧加载图形对象技术,这是一个关键的优化策略,尤其在处理大型游戏资源时显得尤为重要。Egret白鹭引擎是一款广泛使用的HTML5游戏开发工具,它提供了丰富的功能和高效的...

    fengzii-p1-master egret项目源码

    `fengzii-p1-master` 是一个基于Egret的项目源码库,适合开发者学习和参考,尤其是对于想要创建小游戏的初学者或者希望提升Egret开发技能的程序员。这个项目包含了小游戏的demo代码,可以通过分析和研究这些源码来...

    22_游戏egret_

    Egret 提供了完整的解决方案,包括编辑器、引擎、构建工具以及社区支持,帮助开发者高效地创建高质量的跨平台游戏。 在这款名为 "22_游戏egret" 的项目中,我们可以看到几个关键文件: 1. **index.html**:这是...

    基于 Egret 引擎开发的 HTML5 游戏.zip

    Egret引擎是HTML5游戏开发的一个强大工具,它提供了一整套完整的解决方案,包括2D渲染引擎、项目管理、资源管理、动画系统、物理引擎接口以及调试工具等。 一、Egret引擎详解 Egret引擎是基于TypeScript开发的,...

    egret小游戏示例

    3. **资源管理**:Egret提供了强大的资源管理功能,包括图片、音频、字体等,可以进行高效的加载和缓存,确保游戏性能。 4. **事件驱动**:Egret采用事件驱动模型,通过监听和处理事件来实现游戏逻辑,简化了代码...

    egret 下拉框的制作

    最后,为了将这个下拉框整合到你的Egret项目中,你需要确保正确地配置了Egret的项目结构。`index.html`是你的HTML入口文件,`egretProperties.json`用于配置项目属性,`src`目录包含源代码,`template`和`resource`...

    crypto-js.zip,AES加密解密egret库有.d.ts文件

    1. **引入库**:首先,将解压后的crypto-js文件夹放入Egret项目的lib目录下,然后在项目的配置文件(project.json)中声明依赖。 2. **编写代码**:利用.d.ts文件提供的类型定义,创建AES加密和解密的实例,设置...

    egret图集拆分工具.zip

    4. **保存拆分结果**:最后,将拆分出的图片按照原始的命名规则或自定义的命名规则保存到指定的目录下,以便于在Egret项目中重新引用。 使用这个工具,开发者可以有效地恢复或更新图集资源,而无需原始的源图像文件...

    基于 Egret 3.0 搭建的 HTML5 游戏极速开发解决方案.zip

    【EgerAir:Egret的移动端解决方案】 EgerAir 在压缩包文件名中提及,它是Egret针对移动设备推出的一个重要组件。EgerAir集成了Egret Engine,并且添加了对原生功能的封装,如推送通知、本地存储、硬件加速等,使得...

    EgretConversion(Flash转Egret项目转换工具)2.5.3官方中文安装版

    Egret Conversion是一个Egret项目转换工具,可以将Flash项目转换到Egret HTML5项目中,支持Flash项目到Egret项目的一键高效转换,功能强大可扩展,支持AS3各种复杂语法特性,涵盖绝大部分的Flash API,并且支持swf...

    使用egret开发的2048源码

    而在这个项目中,我们关注的是使用Egret框架开发的2048游戏源码。Egret,作为一款强大的HTML5游戏开发引擎,为开发者提供了丰富的功能和高效的性能,使得在Web平台上构建2D游戏变得轻而易举。接下来,我们将深入探讨...

    Egret预加载插屏激励视频广告.txt

    Egret 白鹭,预加载与播放Facebook插屏广告代码,播放与预加载Facebook激励视频广告代码

    Egret 引擎学习资料

    最后,Egret社区活跃,拥有大量的教程、示例和插件,开发者可以通过参与社区交流,获取最新资讯和解决方案,加速自己的学习进程。 总的来说,Egret引擎是HTML5游戏开发的一个强大选择,通过深入学习“Egret HTML5...

    Egret Engine游戏框架 v5.4.1.zip

    Egret Engine是一款广泛应用于开发2D游戏和交互式应用的开源JavaScript框架。v5.4.1是这个引擎的一个特定版本,包含了针对性能优化、稳定性改进和新功能的更新。这个压缩包文件包含了框架的核心组件和相关文档,是...

    完整的egret实例库

    图像应用**:这可能涉及到图片的加载、缩放、裁剪等操作,Egret提供了BitmapData类来处理图像数据,理解这些操作对于游戏中的图像处理至关重要。 这个实例库提供了从基础到进阶的全面示例,无论是想要学习Egret的...

    白鹭egret图集分割工具

    白鹭引擎(Egret Engine)是一款开源的2D游戏开发框架,主要使用TypeScript语言,但同时也支持JavaScript。在游戏开发过程中,为了优化性能和减少加载时间,开发者通常会将大量的图片资源整合成一个图集(Atlas),...

Global site tag (gtag.js) - Google Analytics