Egret 项目文件夹配置和基本容器、动画

Egret 项目文件夹配置和基本容器、动画:

class Main extends egret.DisplayObjectContainer {
//src是resource codede 缩写,所有项目的源代码都放在该目录;新建项目会包含;两个文件 Main.ts默认入口文件;
    //LoadingUI.ts是加载过程辅助显示组建,用来显示加载进度;
    //项目配置文件:根目录下的egretProperties.json
    //libs 目录包含项目各个模块对应的所有类库
    //bin-debug 目录包含项目
    //项目资源文件目录: resource用来存放项目运行所需要的所有资源。包含图片(图片,声音等资源默认存放目录resource/assets)和配置文件,通常有资源清单文件,默认是resource.json。
    //配置数据文件默认存放目录resource/config
    //项目发布:执行发布命令,会对项目编译文件和运行库文件进行整合压缩,合并为一个文件。命令:项目->发布。
    //发布生成的文件会被存储在项目的release 目录,且根据发布类型存放,通常发布生成位于release/html5目录中,在一个时间戳(如143918484)命名的文件夹内。
    //发布输出目录中,可以看到仅有3个js文件,所有的游戏逻辑和所需的运行库均被打包为一个game-min.js
    //采用的是TypeScript作为开发语言,一种标准的oop(面向对象编程)语言。
    //typescript 官网文档:http://www.typescriptlang.org
    //快速调整代码格式:快捷 Alt + shift +F
    //快捷查询脚本  ctrl+P  选择内容查询ctrl+c ctrl+p
    private _txInfo: egret.TextField;
    private _bgInfo: egret.Shape;
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        //ImageLoader 类可用于加载图像(JPG、PNG 或 GIF)文件。
        //使用 load() 方法来启动加载。被加载的图像对象数据将存储在 ImageLoader.data 属性上 。
        var imgLoader: egret.ImageLoader = new egret.ImageLoader;
        imgLoader.addEventListener(egret.Event.COMPLETE, this.loadCompleteHandler, this);
        imgLoader.load("resource/assets/xd.png");

        //绘制一个圆形 green
        var circle: egret.Shape = new egret.Shape();
        circle.graphics.lineStyle(0, 0xffffff);
        circle.graphics.beginFill(0x00ff00, 0.8);
        circle.graphics.drawCircle(200, 200, 100);//x y r半径
        circle.graphics.endFill();
        this.addChild(circle);//添加到舞台
        //圆形绘制 end
    }
    //显示图像
    private bitmap: egret.Bitmap;
    private loadCompleteHandler(event: egret.Event): void {
        var imageLoader = <egret.ImageLoader>event.currentTarget;
        let texture = new egret.Texture();
        texture._setBitmapData(imageLoader.data);
        //
        this.bitmap = new egret.Bitmap(texture);
        //bitmap的pos设定
        this.bitmap.x = 100;
        this.bitmap.y = 100;
        //设置位图的尺寸
        //this.bitmap.width=this.bitmap.height = 100;
        //缩放
        this.bitmap.scaleX = this.bitmap.scaleY = 0.6;
        this.bitmap.rotation = 45;//旋转
        //this.bitmap.x =this.bitmap.y = 100;
        this.addChild(this.bitmap);
        //为定位设置基准点
        this.bitmap.anchorOffsetX = this.bitmap.width / 2;
        this.bitmap.anchorOffsetY = this.bitmap.height / 2;
        this.bitmap.x = this.stage.stageWidth * .5;
        this.bitmap.y = this.stage.stageHeight * .5;
        //文本
        this._txInfo = new egret.TextField();
        this.addChild(this._txInfo);
        //文本格式大小
        this._txInfo.size = 30;
        //this._txInfo.width = this._txInfo.height = 30;
        //文本位置
        this._txInfo.x = 50;
        this._txInfo.y = 50;
        this._txInfo.textAlign = egret.HorizontalAlign.LEFT;//文字对齐的方式
        //注:若将文本的宽高,文本是无法正确使用对齐方式;若文本v不设置大小,则TextField会根据文字的内容自动计算出需要的宽高度
        //在最初会对文本进行设置宽高,第二次则不会自动设置宽高度,所以可以在第二次手动进行宽高度的设置
        //在第一次文本赋值前,进行设置文本的宽高度
        //即在文本处理时,需要考虑位置和大小
        //egret.HorizontalAlign.RIGHT; 其他对齐方式
        //egret.VerticalAlign.TOP;egret.VerticalAlign.BOTTOM;
        this._txInfo.textColor = 0x00000;//设置文本颜色 16进制的颜色数值
        this._txInfo.textColor = 0xFFFF00;//yellow

        //文字描边
        this._txInfo.strokeColor = 0x0000ff;//颜色
        this._txInfo.stroke = 2;//描边宽度 2个像素的宽度
        //改变文字样式
        this._txInfo.bold = true;//粗体
        this._txInfo.italic = true;//斜体
        //指定文本的字体:建议使用常见的字体,否则当查询不到所用字体的时候,会使用默认的字体s
        this._txInfo.fontFamily = "KaiTi";
        //利用位图,在图片内作为自定义的字体,解决字体显示统一性的问题 [.fnt .png资源内容]房子在assets文件夹下
        //.fnt 图片中各个字符的描述
        //.png 字符或者数字等的图片

        this._txInfo.alpha = 0.8;
        this._txInfo.type = egret.TextFieldType.DYNAMIC;
        this._txInfo.lineSpacing = 6;
        this._txInfo.text = "这是bitMap和TextField的显示";
        //为文字添加背景
        this._bgInfo = new egret.Shape;
        this.addChildAt(this._bgInfo, this.numChildren - 1);

        this._bgInfo.x = this._txInfo.x;
        this._bgInfo.y = this._txInfo.y;
        this._bgInfo.graphics.clear();
        this._bgInfo.graphics.beginFill(0xffffff, .5);//参数:颜色,[透明度=可不写]
        this._bgInfo.graphics.drawRect(0, 0, this._txInfo.width, this._txInfo.height);
        this._bgInfo.graphics.endFill();

        this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (evt: egret.TouchEvent) => {
            this.bitmap.x = evt.localX;
            this.bitmap.y = evt.localY;
        }, this);
        this.bitmapAnimation();
    }
    //动画
    private bitmapAnimation(): void {
        var tw = egret.Tween.get(this.bitmap);
        //to(props: any, duration?: number, ease?: Function): Tween; 返回的类型是Tween
        //tw.to({ x: 280, y: 0 }, 500);
        //tw.to({x:280,y:300},500);
        //也可以写成
        tw.to({ x: 280, y: 0 }, 500).to({ x: 280, y: 300 }, 500).to({ x: 0, y: 300 }, 500).to({ x: 0, y: 0 }, 500);
        tw.call(this.bitmapAnimation, this);//动画完成后的回调函数,实现循环播放动画的效果
    }
    //舞台Stage的位置坐标体系:左上角为坐标原点;x轴正方向向右;y轴正方向向下;

}

原文地址:https://www.cnblogs.com/allyh/p/10534466.html

时间: 2024-10-17 03:16:52

Egret 项目文件夹配置和基本容器、动画的相关文章

Android属性动画Property Animation系列三之LayoutTransition(布局容器动画)

在上一篇中我们学习了属性动画的ObjectAnimator使用,不了解的可以看看 Android属性动画Property Animation系列一之ObjectAnimator.这一篇我们来学点新的东西.做项目的时候应该碰到这种问题:根据不同条件显示或者隐藏一个控件或者布局,我们能想到的第一个方法就是 调用View.setVisibility()方法.虽然实现了显示隐藏效果,但是总感觉这样的显示隐藏过程很僵硬,让人不是很舒服,那么有没有办法能让这种显示隐藏有个过渡的动画效果呢?答案是肯定的,不言

Android程序入口以及项目文件夹的含义和使用总结—入门

1 Android程序的入口 1.1 Activity类 在andriod的应用程序中,用户所感知的都是一个个应用界面,在android程序里面每个应用界面对应一个 Activity类,这类似于.NET Winform项目中的Form窗体.与WinForm中的Form一样,Activity类也是一个基类,每个视图界面都是继承Activity的.下面看一下Activity的扩展类的代码. public class MainActivity extends Activity { @Override 

【VS2012】项目文件夹管理

项目中添加文件夹 " 项目"显示所有文件 在"显示所有文件"的情况下,可以创建文件件 "新建文件夹"需要添加到物理路径中时,可以选择"包括在项目中" [VS2012]项目文件夹管理

Android项目文件夹结构分析

项目结构例如以下图所看到的,使用不同sdk版本号建立的项目项目结构有所不同,整体同样,高版本号添加了一些包结构 1.src 和java项目一样src存放项目源码 2.gen 自己主动生成,当中R.java文件也是自己主动生成,ADT 插件自己主动依据res中文件的变化改动R.java文件,将res中的资源相应一个16进制地址,用于在在代码中引用到这些资源文件. 3.bin 项目编译输出的文件夹,里面有apk文件 4.res 存放资源文件 a. drawable存放图片 (1)drawable-h

本地项目文件夹上传至个人Github

安装Git 之后到Git官网,点击Download下载,打开安装包一路按Next一切默认直至安装结束. 找到任意一个文件夹,点击鼠标右键后若出现下图的 Git Gui Here 和 Git Bash Here,则代表安装成功. 新建Github项目 进入Github首页,找到点击New repository,填写相应信息后点击Create即可 Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限(公开共享,私有或

vue-cli 创建项目不成功 原因为项目文件夹无node_modules文件 vue-cli创建项目提示webpack-dev-server不是内部或外部命令

本来是需要按照提示依次切换到项目文件夹,再npm run dev 即可完成项目创建并启动的,但是又报了如下错误经过排查,发现整个项目文件夹下竟然没有node_modules文件(这个我也不知道什么原因),所以就想着应该是需要手动下载一下依赖吧 运行npm run dev时提示webpack-dev-server不是内部或外部命令.原因是使用vue-cli创建的项目没有node_modules文件:具体操作如何 第一步:npm cache clean --force npm cache clean

[原创]java WEB学习笔记101:Spring学习---Spring Bean配置:IOC容器中bean的声明周期,Bean 后置处理器

本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 -----------------------------------------------------------------------------------------------------------------

ASP.NET MVC 项目文件夹结构

首先,打开Visual Studio, 新建一个demo 项目的solution,选择 Blank Soution. 第二步,创建文件夹,按自己的需求创建.在这个Demo 中,我将创建4个文件夹. Presentation: 主要放MVC web 项目 Tests: 放单元测试项目  Libraries: 放数据处理项目(可以认为这是Model) Plugins: 放一些插件 第三步,创建项目文件,把项目文件创建到相应的文件夹里面. 创建empty MVC project,注意,这里需要手动输入

quick-cocos2d-x教程1:在window上创建第一个项目文件夹,并制作helloworld

说明:此教程是针对cocos2dx 2.0系列的,3.0的版本号,如今还没有公布出来. 1)首先从github.com把这个项目下载到本地.然后装到d盘的根文件夹,并设置文件夹路径为d:\quick-cocos2d-x 站点地址:https://github.com/chukong/quick-cocos2d-x 2)然后通过cmd进入命令模式, cd d:\quick-cocos2d-x cd bin  进入命令文件夹 d: 进入d盘 create_project -h 查看帮助 create