`
ch_kexin
  • 浏览: 897582 次
  • 性别: 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 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),...

    egret_基于TextFlow属性实现图文混排.rar

    2. **图像对象的创建与布局**:找到`&lt;img&gt;`标签后,需要创建Egret的`Bitmap`对象,加载图片资源,并将其添加到文本流中。同时,我们需要处理图像的尺寸、位置以及与其他文本元素的相对关系。 3. **更新渲染**:在...

Global site tag (gtag.js) - Google Analytics