精华内容
下载资源
问答
  • LAYABOX 引擎小游戏 SDK 使用指南本文将会为您介绍如何使用 LAYABOX 引擎 SDK 接入您的项目。建议在接入开始前,先阅读数据规则一章,在了解TA数据规则后再进行接入。您可以在访问 GitHub 获取 LAYABOX 引擎小游戏 ...

    LAYABOX 引擎小游戏 SDK 使用指南

    本文将会为您介绍如何使用 LAYABOX 引擎 SDK 接入您的项目。建议在接入开始前,先阅读数据规则一章,在了解TA数据规则后再进行接入。您可以在访问 GitHub 获取 LAYABOX 引擎小游戏 SDK 的源代码。

    最新版本为: 1.7.0

    更新时间为: 2020-08-24

    1 集成 SDK

    1.1 集成方法

    2.引入 SDK 库

    import ThinkingDataAPI from "./thinkingdata.mg.laya.min";

    3.初始化 SDK

    var config = {

    appid: 'YOUR_APPID',

    server_url: 'YOUR_SERVER_URL',

    autoTrack: {

    appShow: true,

    appHide: true,

    }

    };

    var ta = new ThinkingDataAPI(config);

    ta.init();

    appid是您的项目的 APP_ID,需要进行配置,在您申请项目时会给出,请在此处填入

    server_url为上传数据的 URL,需要进行配置

    autoTrack表示是否开启自动采集功能,每一个元素分别代表如下的自动采集事件,默认全部关闭:

    appShow自动采集小游戏启动,或从后台进入前台

    appHide自动采集小游戏从前台进入后台,并记录本次访问(启动至调入后台)的时间

    关于自动采集事件的详细信息,可以查看自动采集事件一节

    在上报数据之前,请先在微信公众平台或其他平台的开发设置中,将数据传输 URL 加入到服务器域名的 request 列表中

    如果您使用的是云服务,请使用以下传输 URL:

    如果您使用的是私有化部署的版本,由于微信等平台的服务器域名中不能出现端口号,因此需要您自行配制域名,绑定 TA 私有化服务器的接收端。

    在 config 中其他可选参数有:

    var config = {

    //...

    enableLog: true, // 是否打开日志打印

    sendTimeout: 3000, // 网络请求超时时间,单位毫秒,默认值 3000 ms

    maxRetries: 3, // 网络请求失败时的重试次数,1 表示不重试。默认值是 3

    enablePersistence: true, // 是否使用本地缓存(用户ID、设备ID、公共属性记录在本地缓存),主实例默认为 true,子实例默认为 false

    //...

    };

    1.2 使用 SDK 实例

    在其他页面中,可以调用以下代码获取 SDK 实例:

    // 调用 SDK 方法

    ta.track('test');

    1.3 初始化 SDK 实例

    在 SDK 集成完毕之后,即可调用 SDK 方法,但只有调用了 init 之后,数据才会被上报,在调用 init 之前触发的数据(包括自动采集数据),将会被暂存,直到 init 被调用时才会上报,这些数据的上报时间为埋点触发时间,而非 init 被调用的时间

    init 被调用时,会将 init 调用前设置的用户 ID 以及公共属性同步到被暂存的数据中,动态公共属性会在 init 时获取上传值加入到事件中,也就是说在 init 调用前设置的用户 ID 以及公共属性会对所有数据生效,因此如果您需要设置用户 ID 或公共属性,请在调用对应接口之后再进行初始化。

    为了以避免重复用户的情况发生,如果您调用 authorizeOpenID 设置访客 ID,务必保证在初始化前先进行设置,即设置完用户 ID 后再初始化。

    ta.authorizeOpenID('authorizeOpenID');

    ta.login("ABC_123456");

    ta.setSuperProperties({"channel": "渠道"});

    // 先设置 ID 以及公共属性再初始化

    ta.init();

    2. 设置用户 ID

    在集成 SDK 之后,SDK 会使用 UUID 作为每个用户的默认访客 ID,该 ID 将会作为用户在未登录状态下身份识别 ID。需要注意的是,UUID 在用户更换设备及清理缓存时将会变更。

    2.1 设置访客 ID

    如果您希望使用其他ID来作为用户的访客ID,您可以调用 identify 或者 authorizeOpenID 来设置访客 ID(两个方法是等价的,根据使用习惯保留两个接口名):

    // 传入值为 openid

    ta.authorizeOpenID('OpenID');

    // identify 等价于 authorizeOpenID

    ta.identify('OpenID');

    需要注意以下几点:

    设置后的 OpenID 将会被设置为访客 ID #distinct_id,如果使用 login 传入账号 ID,则根据用户识别规则,会优先以账号 ID 为准

    如果需要进行设置,必须在 init 之前调用本接口

    2.2 设置账号 ID

    在用户产生登录行为时,可调用 login 来设置用户的账号 ID。TA 平台优先以账号 ID 作为身份标识,设置后的账号 ID 将会被保存,多次调用 login 将会覆盖先前的账号 ID:

    // 用户的登录唯一标识,此数据对应上报数据里的 "#account_id",此时 "#account_id" 的值为 "ABC_123456"

    ta.login("ABC_123456");

    // 再次调用 login 调整账号 ID,此时"#account_id" 的值为 "XYZ_987654"

    ta.login("XYZ_987654");

    请注意,该方法不会上传用户登录的事件

    2.3 清除账号 ID

    在用户产生登出行为之后,可调用 logout 来清除账号 ID,在下次调用 login 之前,将会以访客 ID 作为身份识别 ID:

    // 去除上报数据里的 "#account_id",之后的数据将不带有 "#account_id"

    ta.logout();

    请注意,该方法不会上传用户登出的事件

    3. 发送事件

    您可以直接调用 track 上传自定义事件,建议您根据先前梳理的文档来设置事件的属性以及发送信息的条件,此处以购买商品为范例:

    ta.track(

    'Purchase', // 追踪事件的名称

    {

    Item:'商品A',

    ItemNum:1,

    Cost:100,

    Elements: ['apple','ball','cat'],

    } // 需要上传的事件属性

    );

    track 接口共有两个参数,第一个参数为事件的名称,第二个参数为事件的属性

    事件的名称是字符串,只能以字母开头,可包含数字,字母和下划线“_”,长度最大为 50 个字符,对字母大小写不敏感。

    事件的属性是 JS 对象,每个元素代表一个属性。

    元素的 name 对应属性的名称,规定只能以字母开头,包含数字,字母和下划线“_”,长度最大为 50 个字符,对字母大小写不敏感。

    元素的 value 为该属性的值,支持 String、Number、Boolean、Date 和 Array.

    注意: Array 类型属性需要配合 TA 平台 2.5 及之后的版本.

    3.1 设置事件上报时间

    事件触发的时间默认取本机时间,但在一些情况下,可能需要手动设置事件的时间,可以使用以下方法进行调用:

    // 第三个参数,可以输入 Date 类型的参数,替换事件触发时间

    ta.track('event', {parakey: 'paravalue'}, new Date());

    // 如果没有 properties 需要上传,请传入一个空对象

    ta.track('event', {}, new Date());

    第三个参数为事件触发时间,必须是Date类型,将会替换事件触发的时间,如果不传该参数,则事件触发时间默认选取用户的本机时间

    3.2 记录事件时长

    您可以调用 timeEvent 来开始计时,配置您想要计时的事件名称,当您上传该事件时,将会自动在您的事件属性中加入 #duration 这一属性来表示记录的时长,单位为秒。

    // 用户进入商品页面,开始计时,记录的事件为 "Enter_Shop"

    ta.timeEvent("Enter_Shop");

    //...

    // 上传事件,计时结束,"Enter_Shop" 这一事件中将会带有表示事件时长的属性 "#duration"

    ta.track("Enter_Shop",{product_id: "A1354"});

    3.3 设置公共属性

    对于一些重要的属性,譬如用户的设备 ID、来源渠道、用户状态等,这些属性需要设置在每个事件中,此时您可以将这些属性设置为公共属性,即每个事件中都带有的属性。我们推荐您在发送事件前,先设置公共属性。

    公共属性包含两种,事件公共属性和动态公共属性。在事件上报时,公共属性将会被插入到数据的 properties 中。如果此时公共属性与事件中设置的自定义属性有相同 key 值,则属性会根据下述优先级判断该取什么值:

    用户自定义事件属性 > 动态公共属性 > 事件公共属性

    3.3.1 设置事件公共属性

    事件公共属性指的是静态的公共属性,在设置时只能传入常量,适合设置稳定不变的属性,您可以调用 setSuperProperties 来设置公共事件属性,公共事件属性的格式要求与事件属性一致。

    根据属性优先级,自定义属性优先级高于事件公共属性,因此事件公共属性也可以作为某个属性的缺省值,在需要修改的事件中设置同名 Key 覆盖缺省值。

    // 设置公共事件属性

    ta.setSuperProperties({ channel: '渠道'});

    // 使用track上传事件,此时事件中会带有公共事件属性

    ta.track(

    'Purchase', // 追踪事件的名称

    {

    Item:'商品A',

    ItemNum:1,

    Cost:100

    } // 需要上传的事件属性

    );

    /* 等价于在事件中加入这些公共属性

    ta.track(

    'Purchase', // 追踪事件的名称

    {

    Item:'商品A',

    ItemNum:1,

    Cost:100,

    channel:'渠道' // 相当于在事件中加入这个属性

    }

    );

    */

    如果多次调用 setSuperProperties 设置公共事件属性,则同名字段后面的调用会覆盖之前的,不同名字段。

    如果您需要清除公共事件属性,可以调用 clearSuperProperties 将所有公共属性清除。

    ta.clearSuperProperties();

    3.3.2 设置动态公共属性

    动态公共属性会在事件上报时,执行一个 function ,并把返回值作为该动态公共属性的值,加入到事件中。您可以调用 setDynamicSuperProperties 接口设置动态公共属性。该接口接受一个 function 作为参数。

    // 通过动态公共属性设置 UTC 时间作为事件属性上报

    ta.setDynamicSuperProperties(() => {

    var localDate = new Date();

    return {

    utcTime: new Date(localDate.getTime() + (localDate.getTimezoneOffset() * 60000)),

    };

    });

    function 必须返回一个 JS 对象,其中每个元素代表一个属性。 属性格式要求与事件属性一致。

    4. 用户属性

    4.1 设置用户属性(userSet)

    对于一般的用户属性,您可以调用 userSet 来进行设置,使用该接口上传的属性将会覆盖原有的属性值,如果之前不存在该用户属性,则会新建该用户属性

    // 设置用户属性,会员等级

    ta.userSet({vip_level:'钻石会员'});

    与上传事件时的事件属性一致,此处传入的用户属性也是对象类型,name 对应属性的名称,规定只能以字母开头,包含数字,字母和下划线“_”,长度最大为 50 个字符,对字母大小写不敏感,value 为该属性的值,支持 String、Number、Boolean、Date 和 Array。

    注意:Array 类型需要配合 TA 平台 2.5 及之后版本使用.

    4.2 初始化用户属性(userSetOnce)

    如果您要上传的用户属性只要设置一次,则可以调用 userSetOnce 来进行设置,当该属性之前已经有值的时候,将会忽略这条信息。

    // 以设置用户名为例,如果用户名已设置,则忽略本次设置,如果不存在,则设置为传入值

    ta.userSetOnce({user_name:'TA'});

    userSetOnce 的参数要求与 userSet 一致。

    4.3 累加用户属性(userAdd)

    当您要上传数值型的属性时,您可以调用 userAdd 来对该属性进行累加操作,如果该属性还未被设置,则会赋值 0 后再进行计算

    // 以付费为例,用户每次付费时调用此接口,则 'total_revenue' 字段每次会做累加付费金额的处理

    ta.userAdd({total_revenue:50});

    与上传事件时的事件属性一致,此处传入的用户属性也是对象类型,name 对应属性的名称,规定只能以字母开头,包含数字,字母和下划线“_”,长度最大为 50 个字符,对字母大小写不敏感,value 为该属性需要累加的值,只支持 Number 类型,传入负数相当于做减法。

    4.4 重置用户属性(userUnset)

    当您要清空用户的某个用户属性值时,您可以调用 userUnset 来对指定属性进行清空操作,如果该属性还未在集群中被创建,则 userUnset 不会创建该属性

    // 清空属性名为 userPropertykey 的用户属性值该用户,即设置成 NULL

    ta.userUnset('userPropertykey');

    4.5 删除用户(userDel)

    如果您要删除某个用户,可以调用 userDel 将这名用户删除,您将无法再查询该名用户的用户属性,但该用户产生的事件仍然可以被查询到

    ta.userDel();

    4.6 为 Array 类型的用户属性追加元素 (userAppend)

    您可以调用 userAppend 对 Array (List) 类型的用户数据追加元素。

    ta.userAppend({'Elements':['a':1,'b':2]});

    注意:该特性需要配合 TA 平台 2.5 及之后版本使用

    5. 自动采集事件

    在创建实例的 config 中开启您需要自动采集的事件,SDK 将会自动采集小游戏的一些行为,现在主要有以下几种事件支持自动采集:

    现在支持的自动化收集数据有:

    小游戏回到前台的事件

    小游戏调入后台,并记录本次访问(启动至调入后台)的时间

    接下来将会详细介绍每种数据的采集方法

    5.1 开启自动采集事件

    在 config 中,参数 autoTrack 中的元素表示每个自动采集事件的开关,设置为 true 为开启自动采集:

    var config = {

    appid: 'YOUR_APPID',

    server_url: 'YOUR_SERVER_URL',

    autoTrack: {

    appShow: true, // 自动采集 ta_mp_show

    appHide: true, // 自动采集 ta_mp_hide

    }

    };

    appShow:自动采集小游戏启动,或从后台进入前台

    appHide:自动采集小游戏从前台进入后台

    5.2 自动采集事件详解

    5.2.1 小游戏启动

    小游戏启动将会在小游戏被启动、或小游戏被从后台调回前台时触发,详细的事件介绍如下:

    事件名:ta_mp_show

    自动采集属性:

    #scene,场景值,取自微信提供的场景值

    小游戏启动由于会受到调出前后台的影响(条数较多),因此不太适合直接进行分析,但是可以在行为路径中标识用户的一次使用,可以作为用户行为路径的初始行为

    5.2.2 小游戏隐藏

    小游戏隐藏将会在小游戏被调入后台时触发,并记录本次使用的时长,详细的事件介绍如下:

    事件名:ta_mp_hide

    自动采集属性: #scene,场景值,取自微信提供的场景值

    #duration,数值型,表示本次启动(ta_mp_show)到隐藏的持续时长

    小游戏隐藏事件会记录使用时长(单位为秒),因此可以直接计算用户使用总时长以及人均时长,也可以除以初始化次数计算单次使用时长。

    6. 其他功能

    6.1 多实例

    本 SDK 支持多实例。我们称通过上文描述的方法完成初始化的实例 ta 为主实例,通过本节描述的方法创建的实例为子实例。

    多个实例之间共享设备相关的预置属性(包括设备ID),其他的属性均不共享,包括:

    #distinct_id 访客 ID

    #account_id 账号 ID

    公共事件属性、动态公共属性

    timeEvent 监控的事件

    您可以通过创建子实例,向另一个项目中上报数据,或者以另一套用户 ID 上报数据。

    // 创建子实例 tt, 子实例默认配置与主实例相同

    ta.initInstance('tt');

    // 为子实例设置访客 ID

    ta.tt.identify('another_distinct_id');

    // 通过子实例上传事件

    ta.tt.track('event_from_tt_instance');

    // 创建不同配置的子实例

    var config = {

    appid: 'ANOTHER-APP-ID',

    enablePersistence: true, // 为子实例开启本地缓存

    };

    ta.initInstance('tt_1', config);

    ta.tt_1.track('event_from_tt_instance');

    6.2 获取设备 ID

    您可以调用 getDeviceId() 获取设备 ID,由于运行环境的原因,设备 ID 会保存在本地缓存,一旦用户删除缓存,则设备 ID 将会变更,因此设备 ID 不能保证稳定不变

    var deviceId = ta.getDeviceId();

    6.3 onCompelete 回调函数

    对于 track, userSet, userSetOnce, userAdd, userDel 等接口,支持传入 onComplete 回调.

    可以直接在原参数列表后传入 onComplete, 也可以使用参数对象的方式. 如果使用参数对象,参数对象中必须包含 onComplete, 否则会出现参数错误.

    以上传事件为例:

    // 以参数列表的形式传入回调

    ta.track('test', {testkey:123}, new Date(), (res) => {

    console.log(res);

    });

    // 以参数对象的形式传入回调

    ta.track({

    eventName: 'test', // 必填

    properties: {testkey: 123}, // 可选

    time: new Date(), // 可选

    onComplete: (res) => { console.log(res); }, // 必填

    });

    onComplete 的参数 res 为 object 类型,有两个属性 code 和 msg.

    res.code 为 int 类型,定义如下:

    0: 成功

    -1: 数据格式不正确

    -2: APP ID 无效

    -3: 网络或服务端异常

    Debug 模式定义如下:

    0: 成功

    -1: 参数或者权限校验的问题

    1: 表示字段基本的错误, 会给出详细的错误字段和原由

    2: 表示整条错误

    -3: 网络或服务端异常

    res.msg 是对 res.code 的文字说明。

    6.4 开启 Debug 模式

    从 v1.6.0 版本开始,客户端 SDK 支持 Debug 模式,需要配合 TA 平台 2.5 之后的版本使用。

    Debug 模式可能会影响数据采集质量和 App 的稳定性,只用于集成阶段数据验证,不要在线上环境使用。

    当前 SDK 实例支持三种运行模式:

    "none": 不开启Debug

    "debug": 开启Debug模式,并入库

    "debugOnly": 开启Debug模式,不入库

    SDK 初始化:

    var config = {

    appid: 'YOUR_APPID',

    server_url: 'YOUR_SERVER_URL',

    debugMode: 'debug'

    }

    var ta = new TA(config);

    为了避免 Debug 模式在生产环境上线,规定只有指定的设备才能开启 Debug 模式。只有在客户端开启了 Debug 模式,并且设备 ID 在 TA 后台的"埋点管理"页的"Debug数据"板块中配置了的设备才能开启 Debug 模式。

    3fd322137eb1705a5c9ecc8e46cc7b33.png

    设备 ID 可以通过以下三种方式获取:

    TA 平台中事件数据中的 #device_id 属性

    通过实例接口调用:获取设备 ID

    7. 相关预置属性

    7.1 所有事件带有的预置属性

    以下预置属性,是小游戏 SDK 中所有事件(包括自动采集事件)都会带有的预置属性

    属性名

    中文名

    说明

    #ip

    IP地址

    用户的IP地址,TA将以此获取用户的地理位置信息

    #country

    国家

    用户所在国家,根据IP地址生成

    #country_code

    国家代码

    用户所在国家的国家代码(ISO 3166-1 alpha-2,即两位大写英文字母),根据IP地址生成

    #province

    省份

    用户所在省份,根据IP地址生成

    #city

    城市

    用户所在城市,根据IP地址生成

    #device_model

    设备型号

    用户设备的型号,如iPhone 8等

    #device_id

    设备ID

    用户的设备ID,取初始化时生成的UUID

    #screen_height

    屏幕高度

    用户设备的屏幕高度,如1920等

    #screen_width

    屏幕宽度

    用户设备的屏幕高度,如1080等

    #manufacturer

    设备制造商

    用户设备的制造商,如Apple,vivo等

    #os_version

    操作系统版本

    iOS 11.2.2、Android 8.0.0等

    #os

    操作系统

    如Android、iOS等

    #network_type

    网络状态

    上传事件时的网络状态,如WIFI、3G、4G等

    #lib

    SDK类型

    您接入SDK的类型,如MG(小游戏)

    #lib_version

    SDK版本

    您接入SDK的版本

    #scene

    场景值

    微信小游戏启动时传入的场景值

    #mp_platform

    小游戏平台

    标识应用所在的平台

    #zone_offset

    时区偏移

    数据时间相对UTC时间的偏移小时数

    7.2 自动采集事件的预置属性

    以下预置属性,是各个自动采集事件中所特有的预置属性

    小游戏隐藏(ta_mp_hide)的预置属性

    属性名

    中文名

    说明

    #duration

    事件时长

    表示本次启动 ta_mp_show 到隐藏 ta_mp_hide 的持续时长,单位是秒

    8. 进阶功能

    从 v1.7.0 开始,SDK 支持上报三种特殊类型事件: 首次事件、可更新事件、可重写事件。这三种事件需要配合 TA 系统 2.8 及之后的版本使用。由于特殊事件只在某些特定场景下适用,所以请在数数科技的客户成功和分析师的帮助下使用特殊事件上报数据。

    8.1 首次事件

    首次事件是指针对某个设备或者其他维度的 ID,只会记录一次的事件。例如在一些场景下,您可能希望记录在某个设备上第一次发生的事件,则可以用首次事件来上报数据。

    // 示例:上报设备首次事件, 假设事件名为 DEVICE_FIRST

    ta.trackFirstEvent({

    eventName: 'DEVICE_FIRST',

    properties: { 'INT_PROPERTY': 0 }

    });

    如果您希望以设备以外的其他维度来判断是否首次,则可以为首次事件设置 FIRST_CHECK_ID. 例如您需要记录某个账号的首次事件,可以将账号 ID 设置为首次事件的 FIRST_CHECK_ID:

    // 示例:上报用户账号的首次事件, 假设事件名为 USER_FIRST

    // 将用户 ID 设置为首次事件的 FIRST_CHECK_ID

    ta.trackFirstEvent({

    eventName: 'USER_FIRST',

    firstCheckId: 'YOUR_ACCOUNT_ID',

    properties: { 'INT_PROPERTY': 0 }

    });

    注意:由于在服务端完成对是否首次的校验,首次事件默认会延时 1 小时入库。

    8.2 可更新事件

    您可以通过可更新事件实现特定场景下需要修改事件数据的需求。可更新事件需要指定标识该事件的 ID,并在创建可更新事件对象时传入。TA 后台将根据事件名和事件 ID 来确定需要更新的数据。

    // 示例: 上报可被更新的事件,假设事件名为 UPDATABLE_EVENT

    ta.trackUpdate({

    eventName: 'UPDATABLE_EVENT',

    properties: { 'status': 3 ,

    'price': 100},

    eventId: 'test_event_id',

    });

    // 上报后事件属性 status 为 3, price 为 100

    ta.trackUpdate({

    eventName: 'UPDATABLE_EVENT',

    properties: { 'status': 5 },

    eventId: 'test_event_id',

    });

    // 上报后事件属性 status 被更新为 5, price 不变

    8.3 可重写事件

    可重写事件与可更新事件类似,区别在于可重写事件会用最新的数据完全覆盖历史数据,从效果上看相当于删除前一条数据,并入库最新的数据。TA 后台将根据事件名和事件 ID 来确定需要更新的数据。

    // 示例: 上报可被重写的事件,假设事件名为 OVERWRITE_EVENT

    ta.trackOverwrite({

    eventName: 'OVERWRITE_EVENT',

    properties: { 'status': 3 ,

    'price': 100},

    eventId: 'test_event_id',

    });

    // 上报后事件属性 status 为 3, price 为 100

    ta.trackOverwrite({

    eventName: 'OVERWRITE_EVENT',

    properties: { 'status': 5 },

    eventId: 'test_event_id',

    });

    // 上报后事件属性 status 被更新为 5, price 属性被删除

    Release Note

    v1.7.0 2020/08/24

    支持首次事件,可更新事件,可重写事件

    v1.6.0 2020/06/10

    支持 debug 模式

    v1.5.1 2020/03/21

    支持白鹭引擎小游戏平台:微信小游戏、百度小游戏、QQ小游戏、VIVO小游戏、OPPO小游戏

    支持 LAYABOX 引擎小游戏平台:微信小游戏、百度小游戏、QQ小游戏、VIVO小游戏、OPPO小游戏

    支持 CocosCreator 引擎小游戏平台:微信小游戏、百度小游戏、VIVO小游戏、OPPO小游戏

    展开全文
  • Layabox 2 使用其它编辑器开发layabox2d

    千次阅读 2019-08-14 23:11:27
    由于我习惯了使用webstorm进行代码的编写,所以尝试使用webstorm进行环境搭建一下layabox。 此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载,但是下载下来以后没有查到相应的使用...

    由于我习惯了使用webstorm进行代码的编写,所以尝试使用webstorm进行环境搭建一下layabox。
    此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载,但是下载下来以后没有查到相应的使用教程,无法进行配置。接着,我就通过创建一个新项目,将新项目文件夹内的bin文件夹转移过来,来实现的效果。
    这种实现方式有可能不是很好,但是绝对可用,而且还有代码提示,webstorm作为专业js开发工具,如果你是使用js学习layabox,可以尝试使用我的写的工具尝试。

    接下来先做准备工作:
    首先这个环境是我在我之前通过webpack配置的es6开发环境的基础上修改出来的。js-cli地址:
    https://github.com/johnson2heng/js-cli
    这个webpack的环境优势在于开发环境阶段只要代码保存,页面会自动刷新。支持css引用小文件打包,支持代码压缩等一些小功能。

    然后,你需要创建一个空的layabox2d项目,然后将libs(代码提示文件夹)复制到个人项目的根目录,这样环境将会获得代码提示功能。
    接着,我们将bin文件夹内有用的文件复制出来,分别是一个bin/libs文件夹和index.html,index.js。layabox生成的bin里面的index.html里面自动引入了index.js文件,而index.js文件内,又引入了四个文件,分别是三个layabox引擎的源码和一个js/bundle.js文件,这个bundle.js文件将作为我们的个人业务的混淆的代码文件(通过个人的源码生成这个文件)。

    大体思路是这样的,如果需要测试,可以直接去github上拉代码:
    https://github.com/johnson2heng/layabox-cli

    展开全文
  • 本人使用的是layabox ide 2.1版本。 首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。 .laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。 比如文件夹内的compile.js中33行就是...

    本人使用的是layabox ide 2.1版本。
    首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。
    在这里插入图片描述

    .laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。

    比如文件夹内的compile.js中33行就是设置项目文件的主入口。

    bin文件夹内是项目输出的文件,在编辑器上运行时,其实就是运行的bin文件夹下的html文件。

    laya文件夹存放的是项目的资源文件
    laya文件夹下的assets文件夹内是项目自带的一套ui图片
    在创建场景后,laya文件夹下会生成的pages文件夹,用于存放使用编辑器创建的场景和页面。

    libs文件夹内存放的是编辑器代码提示文件。

    src内存放项目逻辑文件,内部创建一个空项目会默认生成两个文件:Main.js和GameConfig.js
    Main.js是入口文件,用于初始化一些场景内容
    GameConfig.js是配置文件,里面的配置用于初始化场景,用于Main.js

    jsconfig.json为整个项目的编译配置,用于ts编译,源码貌似是用ts开发。、

    test1.laya文件为项目的入口,可以通过此文件识别是否为一个laya项目,test1为项目的名称。

    src文件

    我们可以先看一下Main.js文件的内容,其实官方已经注释的很明白了,我这里又详细了一下贴了出来

    import GameConfig from "./GameConfig";
    class Main {
    	constructor() {
    		//根据IDE设置初始化引擎	当前如果支持webgl则通过webgl来创建项目	
    		if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
    		else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
    		Laya["Physics"] && Laya["Physics"].enable(); //是否开启物理
    		Laya["DebugPanel"] && Laya["DebugPanel"].enable(); //是否开启调试框
    		Laya.stage.scaleMode = GameConfig.scaleMode; //场景适配模式
    		Laya.stage.screenMode = GameConfig.screenMode; //场景横竖屏
    		Laya.stage.alignV = GameConfig.alignV; //垂直对齐方式
    		Laya.stage.alignH = GameConfig.alignH; //水平对齐方式
    		//兼容微信不支持加载scene后缀场景
    		Laya.URL.exportSceneToJson = GameConfig.exportSceneToJson;
    
    		//打开调试面板(通过IDE设置调试模式,或者url地址增加debug=true参数,均可打开调试面板)
    		if (GameConfig.debug || Laya.Utils.getQueryString("debug") == "true") Laya.enableDebugPanel();
    		if (GameConfig.physicsDebug && Laya["PhysicsDebugDraw"]) Laya["PhysicsDebugDraw"].enable();
    		if (GameConfig.stat) Laya.Stat.show();
    		Laya.alertGlobalError = true;
    
    		//激活资源版本控制,version.json由IDE发布功能自动生成,如果没有也不影响后续流程
    		Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.onVersionLoaded), Laya.ResourceVersion.FILENAME_VERSION);
    	}
    
    	onVersionLoaded() {
    		//激活大小图映射,加载小图的时候,如果发现小图在大图合集里面,则优先加载大图合集,而不是小图
    		Laya.AtlasInfoManager.enable("fileconfig.json", Laya.Handler.create(this, this.onConfigLoaded));
    	}
    
    	onConfigLoaded() {
    		//加载IDE指定的场景
    		GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
    	}
    }
    //激活启动类
    new Main();
    
    

    可以看出,这个Main.js文件首先引入了GameConfig.js文件,然后通过引入的GameConfig.js文件内的配置进行初始化场景来添加数据。
    GameConfig.js文件我们无法直接修改,需要在编辑器内进行修改,我们可以通过进入‘编辑模式’后,点击F9来打开编辑框进行编辑。
    在这里插入图片描述
    打开项目设置,我们会发现当前的一些设置都是在设置场景的相关内容,比如初始场景,对应到Main.js里面的GameConfig.startScene && Laya.Scene.open(GameConfig.startScene); 即如果这里设置了,编辑的GameConfig.js的时候,将会在startScene 属性上生成目标场景名称。
    接下来,列一下主要配置设置

    设计宽高度,为当前场景设计时的宽度和高度。

    场景适配模式

    取值范围:
    “noscale” :不缩放;
    “exactfit” :全屏不等比缩放;
    “showall” :最小比例缩放;
    “noborder” :最大比例缩放;
    “full” :不缩放,stage的宽高等于屏幕宽高;
    “fixedwidth” :宽度不变,高度根据屏幕比缩放;
    “fixedheight” :高度不变,宽度根据屏幕比缩放;
    “fixedauto” :根据宽高比,自动选择使用fixedwidth或fixedheight;

    场景横竖屏

    取值范围:
    “none” :不更改屏幕
    “horizontal” :自动横屏
    “vertical” :自动竖屏

    垂直对齐方式

    取值范围:
    “top” :居顶部对齐;
    “middle” :居中对齐;
    “bottom” :居底部对齐;

    水平对齐方式

    取值范围:
    “left” :居左对齐;
    “center” :居中对齐;
    “right” :居右对齐;

    展开全文
  • LayaBox笔记原创(1)】LayaBox引入自定义第三方包 前言 首先说明一点博主写的原创文章,都是基于自己项目中使用到的,觉得实用的知识点进行分享 并不会解释过程中的原理,知识点解答之类的,博主希望每个...

    【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

     

    前言

     首先说明一点博主写的原创文章,都是基于自己项目中使用到的,觉得实用的知识点进行分享

    并不会解释过程中的原理,知识点解答之类的,博主希望每个看到文章的人,自己按照步骤实现一遍

    慢慢掌握这些知识点,加上自己的理解,才能真正成为自己的知识,而不是作为一个参考文档,来学习理论知识。

    博主博客很丑,排版也不好,毕竟也有自己的工作,分享重于传达知识,不是做得很花里花哨宣传自己。

    以上,不爽的憋着,你也可以帮博主设计,万分感谢!

     

    代码

    1、创建Laya项目,选择ts语言

    2、编写Laya类,例如我们创建一个com.company.Person

     1 /**
     2 * 创建一个Person例子
     3 * @author wls
     4 * @date 2015-01-10
     5 */
     6 module com.company {
     7     export class Person {
     8         public name: string;        //公有属性
     9         private id: number;        //私有属性
    10         private _age: number;        //私有属性,用于getset访问器
    11         private static _sex: string;    //静态属性, 用于get访问器
    12 
    13         //带参数构造函数
    14         constructor(id: number) {
    15             this.id = id;
    16         }
    17 
    18         public get age(): number {
    19             return this._age;
    20         }
    21         public set age(value: number) {
    22             this._age = value;
    23         }
    24 
    25         public static get sex(): string {
    26             return this._sex;
    27         }
    28 
    29         public static set sex(value: string) {
    30             this._sex = value;
    31         }
    32 
    33         public get Id(): number {
    34             return this.id;
    35         }
    36     }
    37 }
    Person.ts

    3、保存、并编译,在bin目录下生成com.company.Person.jscom.company.Person.js.map

     1 /**
     2 * 创建一个Person例子
     3 * @author wls
     4 * @date 2015-01-10
     5 */
     6 var com;
     7 (function (com) {
     8     var company;
     9     (function (company) {
    10         var Person = /** @class */ (function () {
    11             //带参数构造函数
    12             function Person(id) {
    13                 this.id = id;
    14             }
    15             Object.defineProperty(Person.prototype, "age", {
    16                 get: function () {
    17                     return this._age;
    18                 },
    19                 set: function (value) {
    20                     this._age = value;
    21                 },
    22                 enumerable: true,
    23                 configurable: true
    24             });
    25             Object.defineProperty(Person, "sex", {
    26                 get: function () {
    27                     return this._sex;
    28                 },
    29                 set: function (value) {
    30                     this._sex = value;
    31                 },
    32                 enumerable: true,
    33                 configurable: true
    34             });
    35             Object.defineProperty(Person.prototype, "Id", {
    36                 get: function () {
    37                     return this.id;
    38                 },
    39                 enumerable: true,
    40                 configurable: true
    41             });
    42             return Person;
    43         }());
    44         company.Person = Person;
    45     })(company = com.company || (com.company = {}));
    46 })(com || (com = {}));
    47 //# sourceMappingURL=Person.js.map
    Person.js

    4、复制 Person.jsbin\libs\ 目录下,并删除bin\com.company.Person.js 及其目录

    5、删除Person.ts文件及其目录

    6、编写Person.d.ts提示类

     1 /**
     2 * 创建一个Person例子
     3 * @author wls
     4 * @date 2015-01-10
     5 */
     6 declare module com.company {
     7     export class Person {
     8         public name: string;        //公有属性
     9 
    10         //带参数构造函数
    11         constructor(id: number);
    12 
    13         public age: number;
    14 
    15         public static sex:string;
    16         //只有get方法的定义
    17         public readonly Id:number;
    18 
    19     }
    20 }
    Person.d.ts

    7、bin\index.html中,引入Person.js,就可以完成整个自定义第三方库的实现

    1     <!--jsfile--Custom-->
    2     <script src="libs/Person.js"></script>
    3     <!--jsfile--Custom-->
    index.html

    8、最后我们用个例子来测试一下

    1 //调用我们定义的第三方类库
    2         var person:com.company.Person = new com.company.Person(123);    //实例化一个Person,并传入ID
    3         person.name = "wls";    //设置名称,直接属性赋值
    4         person.age = 18            //设置年龄,get/set构造器赋值
    5         com.company.Person.sex = "安静的美男子";    //设置性别,静态get/set构造器赋值
    6         //输出结果
    7         console.log(">>>我是一个",com.company.Person.sex,"大名:",person.name,"年年都",person.age);
    View Code

     

    源码和对应操作图片下载: 

    链接:https://pan.baidu.com/s/1DpqkTUH1iU9uHdFmDNptjA
    提取码:39nr 

     

    转载于:https://www.cnblogs.com/wls-blogs/p/Laya.html

    展开全文
  • SVGA.layabox undefined

    2020-12-25 23:18:31
    <div><p>layabox版本 v1.7.12 试错步骤 1、 https://github.com/yyued/SVGAPlayer-Web/tree/master/patch/layabox/laya.webgl.js Replace to {LayaProjectDir}/bin/libs/laya.webgl.js 2、add after layabox libs 3...
  • layabox 塔防-附件资源

    2021-03-05 15:25:19
    layabox 塔防-附件资源
  • 教程以LayaBox引擎为环境 ,重点放在GLSL语言的学习,经典光照的计算,各种纹理贴图的原理与使用,PBR、NPR、SSS等渲染类型的实现。 手把手在Layabox环境下进行逐行代码的教学,期望帮助大家进入WebGL Shader...
  • layabox飞机大战源码

    2018-02-05 14:47:33
    基于layabox官方教程的飞机大战源码, 包含游戏素材
  • layaBox配置vscode开发环境

    千次阅读 2020-07-20 17:42:51
    比较了一下creator3D和layabox,还是选择了layabox。习惯了vscode调试,肯定要先配置一下环境了。 layabox有个不合理的地方就是,代码里边加了组件,回到ide不会自动刷新,还要重新编译打开一下,好烦啊。所以...
  • layabox
  • 利用Layabox1.0 开发的3D微信小游戏案例,从Unity导出场景到在Layabox里应用,再到开发,本课程适合想入门微信3d小游戏的开发者。 注:只提供美术资源,不提供源代码,源代码需另购买。 源代码地址:...
  • Layabox 打地鼠完整代码,打开就能使用,会报错,把报错的部分注释了就行,他说是资源文件,注释就能使用
  • layabox 节点查找

    千次阅读 2019-07-08 23:18:14
    layabox也是一个树形结构。 如果一个组件类绑定到节点上面,可以通过 this.owner来获取绑定的节点。 获取一个节点的父亲节点,则使用 this.owner.parent 获取节点所在的场景 this.owner.scene 根据名称查找孩子节点...
  • layabox 摇杆制作

    2021-03-07 20:30:06
    layabox 摇杆制作## 摇杆开发是手机游戏不可少的一部分,这里记载下我的实现方式. 注意好结构 1.初始化和事件绑定 2.按下,滑动,抬起操作 3.收尾
  • <div><ol><li>Patch laya.webgl.js library ...<a href="https://github.com/yyued/SVGAPlayer-Web/issues/11">issues11: SVGA.layabox undefined</a></p>该提问来源于开源项目:svga/SVGAPlayer-Web</p></div>
  • Layabox创始人兼CEO,谢成鸿 谢成鸿是谁? 1999年,1个人,3个月用DHTML技术赚300万。 2000年,创立全球最大插件式页游平台“可乐吧”,后来卖出几千万。 2004年,创业端游,研发十年,亏损超1亿。卖房支付员工...
  • LayaBox as3写的飞机大战小例子,只写了部分,剩余部分自己扩展。
  • Egret和LayaBox

    2019-02-19 18:32:46
    Egret 一.加载js文件 二,LayaBox加载js 引入&lt;script&gt;&lt;/script&gt;方式
  • LayaBox 游戏文字提示

    2020-06-22 14:00:47
    LayaBox 游戏提示 private static tips: Array<Laya.Label> = []; public static showTip(msg: string,owner: laya.display.Node): void { let label: Laya.Label; if (this.tips.length <= 0) { ...
  • 主要介绍了layabox2.0命令行在vscode中编译打包问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 迷你游戏 介绍 Laya小游戏框架 简化了LayaBox的工作流程,更加方便的使用各个工具开发小游戏。 参与贡献 YaYaLuoYa: :
  • Layabox_as 导出安卓并互相调用domo 使用layaide导出Android_studio后即可在Android_studio中导出apk
  • layabox html5

    2018-03-14 18:29:00
    https://www.layabox.com/product/ 转载于:https://www.cnblogs.com/hshy/p/8569363.html
  • var Loadings=(function(_super){function Loadings(){Loadings.super...var Stage = Laya.Stage;var ProgressBar = Laya.ProgressBar;var Handler = Laya.Handler;var WebGL = Laya.WebGL;var progressBar;Laya...
  • Layabox的2d精灵的性能优化

    千次阅读 2021-02-01 17:05:38
    在使用Layabox的2d精灵时,我们会需要很多渲染图片的需求,那么,如果做到使用最小的代价实现图片的渲染呢。 合并图集 为什么要合并图集呢。如果你一个图片是由多张图片组成的,正常情况,在webgl模式下,渲染一张...
  • Layabox 实现画 刚体线

    2019-07-24 14:07:40
    Layabox 的刚体里面只有一个b2PolygonShape,而为了实现画刚体线,我们需要用到复合Shape,也就是多个Shape组成一个刚体。 此时如果用Layabox自带的Collider就实现不了,所以我们需要继承ColliderBase来实现复合体...
  • Layabox技术讲座分享

    2018-12-20 21:26:10
    今天有幸听了Layabox公司技术负责人做的技术宣讲,关于LayaAir 2.0。收获不少,在此记录一下。 目前Layabox公司主推LayaAir 2.0,不过还是beta版本,演讲者也说了,如果是开发3D游戏,一定要用2.0;如果是开发2D...
  • 资源是来自LayaBox分享论坛。 是一款6边形消除游戏,游戏复杂度比官网的Demo复杂点,因为官网的Demo太简单了。想了解一下其它用法,所以才到网上搜索的。 作者我就不公布了,也是一位在Laya开发者社区分享的。 希望...
  • 然后查看layaUI.max.all.js中是否生成对应UI的JS代码:var FeedBackUI=(function(_super){functionFeedBackUI(){this.btn_close=null;this.FeedBackText=null;this.button_submit=null;this.button_cancel=null;Feed...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 699
精华内容 279
关键字:

layabox