Commit a926be3b authored by Đặng Minh Chiến's avatar Đặng Minh Chiến

UILevel

parent 1653940d
......@@ -31,10 +31,17 @@
}
],
"_active": true,
"_components": [],
"_prefab": {
"_components": [
{
"__id__": 21
},
{
"__id__": 22
}
],
"_prefab": {
"__id__": 24
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
......@@ -291,7 +298,7 @@
"_N$verticalAlign": 1,
"_N$fontFamily": "Arial",
"_N$overflow": 2,
"_N$cacheMode": 0,
"_N$cacheMode": 1,
"_id": ""
},
{
......@@ -749,6 +756,107 @@
"fileId": "b35j0fHHVEjoTY1SD9xA/L",
"sync": false
},
{
"__type__": "99b13syiJ1CX7SWj0e8Wwra",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"txtLevel": {
"__id__": 6
},
"iconChecked": {
"__id__": 10
},
"iconLocked": {
"__id__": 13
},
"_id": ""
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [
{
"__id__": 23
}
],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_N$hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": null,
"_id": ""
},
{
"__type__": "cc.ClickEvent",
"target": {
"__id__": 1
},
"component": "",
"_componentId": "99b13syiJ1CX7SWj0e8Wwra",
"handler": "onClickLevel",
"customEventData": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
......
[
{
"__type__": "cc.Prefab",
"_name": "",
"_objFlags": 0,
"_native": "",
"data": {
"__id__": 1
},
"optimizationPolicy": 0,
"asyncLoadAssets": false,
"readonly": false
},
{
"__type__": "cc.Node",
"_name": "NodeActive",
"_objFlags": 0,
"_parent": null,
"_children": [],
"_active": true,
"_components": [
{
"__id__": 2
},
{
"__id__": 3
}
],
"_prefab": {
"__id__": 4
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 30,
"height": 30
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "0a82aa52-6dd8-457f-b854-e80b301837c9"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "1e6302syedJ7YAKG25Dltpw",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"imageNode": {
"__id__": 2
},
"sprirteActive": {
"__uuid__": "253acc46-ff97-41e0-98a0-cb37d1bcb46c"
},
"sprirteDeActive": {
"__uuid__": "0a82aa52-6dd8-457f-b854-e80b301837c9"
},
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
},
"fileId": "",
"sync": false
}
]
\ No newline at end of file
{
"ver": "1.3.2",
"uuid": "50bd33a2-2578-4d6d-84c3-0fe0139b8fb1",
"importer": "prefab",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
......@@ -21,10 +21,13 @@
"_components": [
{
"__id__": 2
},
{
"__id__": 3
}
],
"_prefab": {
"__id__": 3
"__id__": 4
},
"_opacity": 255,
"_color": {
......@@ -96,7 +99,7 @@
"_N$startAxis": 0,
"_N$paddingLeft": 0,
"_N$paddingRight": 0,
"_N$paddingTop": 0,
"_N$paddingTop": 20,
"_N$paddingBottom": 0,
"_N$spacingX": 32,
"_N$spacingY": 20,
......@@ -105,6 +108,22 @@
"_N$affectedByScale": false,
"_id": ""
},
{
"__type__": "9918fR1F4ZJPbMkmxxSoPta",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"itemLevelPrefab": {
"__uuid__": "8a16bc9b-2da6-4d35-90b3-f1bb8ef9c39c"
},
"containerLevels": {
"__id__": 1
},
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
......
......@@ -19,36 +19,38 @@ export default class GameManager extends cc.Component {
dataLevels: DataLevel[] = [];
protected onLoad(): void {
this.initialize();
async onLoad() {
await this.initialize();
}
protected start(): void {
this.backHone()
}
initialize() {
async initialize() {
this.dataLevels = await this.loadLevel() as DataLevel[];
this.uiManager.initialize(this);
this.loadLevel();
}
backHone() {
this.uiManager.activeScreen(ScreenName.MAINMENU);
}
loadLevel() {
cc.loader.loadRes("Data/LevelConfigs", function (err, objects) {
async loadLevel() {
return new Promise(function (resolve, reject){
cc.loader.loadRes("Data/LevelConfigs", (err, objects) => {
if (err) {
cc.log('Error when loading JSON:', err);
return;
reject([]);
}
this.dataLevels = objects.json.map((object: any) => {
let dataLevels = objects.json.map((object: any) => {
let dataLevel = new DataLevel();
Object.assign(dataLevel, object);
return dataLevel;
});
cc.log('Loaded GameObjects:', this.dataLevels);
resolve(dataLevels);
});
})
}
}
\ No newline at end of file
......@@ -5,24 +5,57 @@
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
import LocalStorage from "../../../Data/LocalStorage";
const { ccclass, property } = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
export default class ItemLevel extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
txtLevel: cc.Label = null;
@property(cc.Node)
iconChecked: cc.Node = null;
@property(cc.Node)
iconLocked: cc.Node = null;
level: number = 0;
isLock = true;
initialize(level) {
this.isLock = false;
this.level = level - 1;
this.txtLevel.string = level + "";
this.setup(LocalStorage.getLevel());
this.node.on(cc.Node.EventType.TOUCH_END, this.onClickLevel, this);
}
start () {
setup(curentLevel){
if (this.level < curentLevel) {
this.iconChecked.active = true;
this.iconLocked.active = false;
this.txtLevel.node.color.fromHEX("#FFFFFF");
} else if (this.level == curentLevel) {
this.iconChecked.active = false;
this.iconLocked.active = false;
this.txtLevel.node.color.fromHEX("#FFFFFF");
} else {
this.iconChecked.active = false;
this.iconLocked.active = true;
this.txtLevel.node.color.fromHEX("#A86244");
this.isLock = true;
}
}
retload(){
this.setup(LocalStorage.getLevel());
}
onClickLevel() {
if (this.isLock) {
return;
}
console.log(this.level);
}
// update (dt) {}
}
// Learn TypeScript:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NodePage extends cc.Component {
@property(cc.Sprite)
imageNode: cc.Sprite = null;
@property(cc.SpriteFrame)
sprirteActive: cc.SpriteFrame = null;
@property(cc.SpriteFrame)
sprirteDeActive: cc.SpriteFrame = null;
activeNode(){
this.imageNode.spriteFrame = this.sprirteActive;
}
deActiveNode(){
this.imageNode.spriteFrame = this.sprirteDeActive;
}
}
{
"ver": "1.1.0",
"uuid": "1e630dac-c9e7-49ed-800a-1b6e4396da70",
"importer": "typescript",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
......@@ -5,10 +5,40 @@
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
import ItemLevel from "./ItemLevel";
const {ccclass, property} = cc._decorator;
@ccclass
export default class Page extends cc.Component {
@property(cc.Prefab)
itemLevelPrefab : cc.Prefab = null;
@property(cc.Node)
containerLevels: cc.Node = null;
listItem: ItemLevel[] = [];
levelPerPage: number = 0;
initialize(start, end, levelPerPage){
let levelIndex = start;
for (let i = 0; i < levelPerPage; i++) {
let itemLevel: cc.Node = cc.instantiate(this.itemLevelPrefab);
this.containerLevels.addChild(itemLevel);
let l = itemLevel.getComponent(ItemLevel)
l.initialize(levelIndex);
this.listItem.push(l);
if (levelIndex < end) {
levelIndex++;
}
}
}
reload(){
for (let i = 0; i < this.listItem.length; i++) {
this.listItem[i].retload();
}
}
}
// Learn TypeScript:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
import LocalStorage from "../../Data/LocalStorage";
import UIManager from "../UIManager";
import NodePage from "./Level/NodePage";
import Page from "./Level/Page";
import ScreenUI, { ScreenName } from "./ScreenUI";
const { ccclass, property } = cc._decorator;
......@@ -13,18 +9,138 @@ const { ccclass, property } = cc._decorator;
@ccclass
export default class LevelScreen extends ScreenUI {
@property(cc.Prefab)
pagePrefab: cc.Prefab = null;
@property(cc.Prefab)
nodePage: cc.Prefab = null;
@property(cc.Node)
containerPage: cc.Node = null;
@property(cc.Node)
containerNodePage: cc.Node = null;
@property(cc.Node)
levelPage: cc.Node = null;
totalLevels: number = 0;
levelPerPage: number = 12;
curentLevel: number = 0;
totalPages: number = 0;
currentPage: number = 0;
targetPos: cc.Vec3 = new cc.Vec3(0, 0, 0);
@property(cc.Vec3)
pageStep: cc.Vec3 = new cc.Vec3(850, 0, 0);
tweenTime: number = 0.5;
pointStart: cc.Vec3 = null;
pointEnd: cc.Vec3 = null;
isMove: boolean = true;
listNodePage: NodePage[] = []
listPage: Page[] = []
isActive: boolean = false;
override initialize(uiManager: UIManager): void {
super.initialize(uiManager);
this.screenName = ScreenName.LEVEL;
this.targetPos = this.containerPage.position;
this.curentLevel = LocalStorage.getLevel();
this.showListLevel();
}
showListLevel() {
this.node.active = false;
this.totalLevels = this.uiManager.gameManager.dataLevels.length;
let totalPages = Math.ceil(this.totalLevels / this.levelPerPage);
this.totalPages = Math.ceil(this.totalLevels / this.levelPerPage);
for (let index = 0; index < this.totalPages; index++) {
let nodePage: cc.Node = cc.instantiate(this.nodePage);
let page: cc.Node = cc.instantiate(this.pagePrefab);
this.containerPage.addChild(page);
this.containerNodePage.addChild(nodePage);
let currentPage = index;
let start = currentPage * this.levelPerPage + 1;
let end = start + this.levelPerPage;
let p = page.getComponent(Page)
p.initialize(start, end, this.levelPerPage);
this.listPage.push(p)
let np = nodePage.getComponent(NodePage)
if (index == 0) {
np.activeNode();
}
this.listNodePage.push(np);
}
}
nextPage() {
if (this.isMove) {
this.isMove = false;
if (this.currentPage < this.totalPages) {
this.currentPage++;
this.targetPos = cc.v3(this.targetPos.x + this.pageStep.x, this.targetPos.y + this.pageStep.y);
this.movePage();
this.updateNodePage(true);
}
}
}
prePage() {
if (this.isMove) {
this.isMove = false;
if (this.currentPage > 0) {
this.currentPage--;
this.targetPos = cc.v3(this.targetPos.x - this.pageStep.x, this.targetPos.y - this.pageStep.y);
this.movePage();
this.updateNodePage(false);
}
}
}
movePage() {
cc.tween(this.containerPage)
.to(this.tweenTime, { position: this.targetPos }, { easing: "quintOut" })
.call(() => {
this.isMove = true;
})
.start();
}
updateNodePage(isNext) {
this.listNodePage[this.currentPage].activeNode();
if (isNext) {
this.listNodePage[this.currentPage - 1].deActiveNode();
} else {
this.listNodePage[this.currentPage + 1].deActiveNode();
}
}
reloadNodePage() {
this.currentPage = 0;
for (let index = 0; index < this.listPage.length; index++) {
this.listPage[index].reload();
}
for (let i = 0; i < this.listNodePage.length; i++) {
this.listNodePage[i].deActiveNode();
}
this.listNodePage[0].activeNode();
}
override active(): void {
super.active();
if (!this.isActive) {
this.isActive = true;
}else{
this.reloadNodePage();
}
}
override deactive(): void {
super.deactive();
}
}
......@@ -31,6 +31,7 @@ export default class MainScreen extends ScreenUI {
super.initialize(uiManager);
this.screenName = ScreenName.MAINMENU;
this.initializeListWorm();
}
initializeListWorm() {
......@@ -95,10 +96,15 @@ export default class MainScreen extends ScreenUI {
}
override deactive(): void {
super.deactive();
this.logo.position = cc.v3(0, 1132);
}
onClickRemoveAds() {
this.uiManager.showMessage("Is Comming");
}
onClickLevel(){
this.uiManager.activeScreen(ScreenName.LEVEL);
}
}
{
"start-scene": "7602b4d5-03ba-4bb0-b72f-840c3c878b7e"
"start-scene": "2b1f57e0-e640-4283-a5ac-1bac931a4d9f"
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment