Giter Site home page Giter Site logo

guide's Introduction

sz.Guide

cocos2d-js游戏简单引导框架

##在线演示 www.ixuexie.com/Guide/index.html

博客教程

一、原理和框架 二、定位器细节 三、框架分析 四、使用方法

快速使用

创建引导层

//在Layer的onEnter时创建引导层对象(sz.GuideLayer)
onEnter: function() {
    this._super();
    //guideConfig 为引导配置对象
    new sz.GuideLayer(this, guideConfig);
}

引导配置

导引配置主要是编写引导任务, 引导任务可能由1个或多个引导步骤组成。当任务中的步骤全部完成sz.Guide会自动保存进度。

tasks = {
	'任务1':[
	//任务数组中,每一个对象为一个step
	{
		log: '用于调试日志字符串',
		//引导指令:手型提示
		command: sz.GuideCommand.GC_FINGER_HINT,
		//定位器
		locator:'定位器字符串,一般为节点的Name'
	}
	],
	'任务2':[...]
	'任务3':[...]
}

###定位器语法

/ :名字(name)定位符,例如: ‘a/b/c’ 、’dialogLayer/_closeButton’
#”:tag(id)定位符,例如:’a#123
.”:变量名(var)定位符,例如:’a._okButton’
>”:子节点(child)定位符,例如:’a>c’

###创建引导 之前使用new sz.Guide(this, config);会自动将引导层添加到第一个参数(target)上。 新的用法需要自己将创建出的引导层添加到一个节点上:

var guide =new sz.Guide(this, config);
cc.director.getRunningScene().addChild(guide);

###自动引导 新增自动引导功能通过isAutoGuide开启,主要用于开发测试,需要注意自动引导期间不能随便移动鼠标

guideConfig = {
    tasks:{...},                 //引导任务
    fingerImage:'res/finger.png',//手型图片
    isShowMask: false,           //是否开启遮罩
    isAutoGuide: true            //是否自动引导
}

参请见代码guideConfig.js文件

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.