Commit 677880c1 authored by Chen Jiping's avatar Chen Jiping

完成模板开发

parent 27abc5ba
......@@ -4,6 +4,7 @@ import {
MySprite, tweenChange, ShapeRect,
} from './Unit';
import { Content } from '@angular/compiler/src/render3/r3_ast';
class Item {
/**图片集合 */
......@@ -71,6 +72,15 @@ export class Stage extends Item {
bg.alpha = 0;
this.bg = bg;
const titleRope = new MySprite();
titleRope.init(this.images.get(theme + "title_rope"));
titleRope.scaleX = this.scaleX;
titleRope.scaleY = this.scaleY;
titleRope.x = this.width + titleRope.getBoundingBox().width / 2 - 82 * this.scaleX;
titleRope.y = this.height / 2 + titleRope.getBoundingBox().height / 2 - 30 * this.scaleY;
bg.addChild(titleRope);
const stageBg = new MySprite();
stageBg.init(this.images.get(theme + "bg2"));
stageBg.scaleX = this.scaleX;
......@@ -86,13 +96,13 @@ export class Stage extends Item {
picBg.x = this.width / 2;
picBg.y = this.height / 2;
bg.addChild(picBg);
const picBg2 = new ShapeRect();
picBg2.setSize(picBg.width * this.scaleX, picBg.height * this.scaleY);
picBg2.alpha = 0;
picBg2.x = (this.width - picBg2.width) /2;
picBg2.y = (this.height - picBg2.height) /2;
picBg2.x = (this.width - picBg2.width) / 2;
picBg2.y = (this.height - picBg2.height) / 2;
bg.addChild(picBg2);
this.picBg = picBg2;
......@@ -112,6 +122,16 @@ export class Stage extends Item {
titleBg.alpha = 0;
this.titleBg = titleBg;
bg.addChild(titleBg);
const boxPic = new MySprite();
boxPic.init(this.images.get(theme + "box"));
boxPic.scaleX = this.scaleX;
boxPic.scaleY = this.scaleY;
boxPic.x = this.width / 2;
boxPic.y = this.height / 2 - 30 * this.scaleY;
bg.addChild(boxPic);
}
setStageContent(stageItemArr) {
......@@ -125,7 +145,7 @@ export class Stage extends Item {
let sx = pW / width;
let sy = pH / height;
let scale = Math.min(sx, sy);
if (scale < 1) {
child.setScaleXY(scale);
......@@ -137,7 +157,7 @@ export class Stage extends Item {
pic.init(this.images.get(imgUrl));
pic.x = this.picBg.width / 2;
pic.y = this.picBg.height / 2 - 9 * this.scaleY;
setScale(719 * this.scaleX, 383 * this.scaleY, pic);
return pic;
......@@ -220,13 +240,13 @@ export class Stage extends Item {
title.width = this.titleBg.width - 40 * this._scaleX;
title.disH = 0;
title.text = val;
title.textAlign = 'middle';
title.textAlign = 'left';
title.fontSize = 40;
title.fontName = "BRLNSDB";
title.fontColor = "#a0e9ff";
title.refreshSize();
title.x = (this.titleBg.width - title.width) / 2;
title.y = (this.titleBg.height - title.height) / 2;
title.y = this.titleBg.height / 2;
this.titleBg.addChild(title);
this.curTitleLabel = title;
......@@ -234,11 +254,13 @@ export class Stage extends Item {
private setPic(content, callback = null) {
if (this.curContent) {
if (this.curContent && this.curContent.pic) {
this.picBg.removeChild(this.curContent.pic);
}
this.picBg.addChild(content.pic);
if (content.pic) {
this.picBg.addChild(content.pic);
}
if (callback) {
callback();
......@@ -268,24 +290,23 @@ export class Mission extends Item {
bg.alpha = 0;
this.bg = bg;
const missionPic = new MySprite();
missionPic.init(this.images.get(theme + "e-mission"));
missionPic.scaleX = this.scaleX;
missionPic.scaleY = this.scaleY;
missionPic.x = missionPic.getBoundingBox().width / 2;
missionPic.y = this.height / 2;
bg.addChild(missionPic);
const stageBgPic = new MySprite();
stageBgPic.init(this.images.get(theme + "stage_bg"));
stageBgPic.scaleX = this.scaleX;
stageBgPic.scaleY = this.scaleY;
stageBgPic.alpha = 0;
stageBgPic.x = this.width - stageBgPic.getBoundingBox().width / 2;
stageBgPic.x = this.width - stageBgPic.getBoundingBox().width / 2 - 25 * this.scaleX;
stageBgPic.y = this.height - stageBgPic.getBoundingBox().height / 2 + 2 * this.scaleY;
this.stageBgPic = stageBgPic;
bg.addChild(stageBgPic);
const missionPic = new MySprite();
missionPic.init(this.images.get(theme + "e-mission"));
missionPic.scaleX = this.scaleX;
missionPic.scaleY = this.scaleY;
missionPic.x = missionPic.getBoundingBox().width / 2 - 3 * this.scaleX;
missionPic.y = this.height / 2;
bg.addChild(missionPic);
const stageVal = new Label();
stageVal.text = "";
......@@ -296,7 +317,7 @@ export class Mission extends Item {
stageVal.scaleX = this.scaleX;
stageVal.scaleY = this.scaleY;
stageVal.refreshSize();
stageVal.x = missionPic.getBoundingBox().width + 5 * this.scaleX;
stageVal.x = missionPic.getBoundingBox().width;
stageVal.y = 20 * this.scaleY + stageVal.getBoundingBox().height / 2;
stageVal.alpha = 0;
......
......@@ -799,7 +799,6 @@ export class RichText extends Label {
this._height = this.fontSize * row.length + (row.length - 1) * this.disH;
this.ctx.restore();
}
drawText() {
......@@ -811,7 +810,7 @@ export class RichText extends Label {
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = 'bottom';
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
......@@ -849,7 +848,6 @@ export class RichText extends Label {
}
}
// this.ctx.fillStyle = '#ff7600';
for (let b = 0; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
......
......@@ -545,12 +545,40 @@ export class PlayComponent implements OnInit, OnDestroy {
bg.y = this.canvasHeight / 2;
this.renderArr.push(bg);
const bg2 = new MySprite();
bg2.init(this.images.get(this.theme + "bg2"));
bg2.setScaleXY(this.mapScale);
bg2.x = this.canvasWidth / 2;
bg2.y = this.canvasHeight / 2;
this.renderArr.push(bg2);
const l_middle_1 = new MySprite();
l_middle_1.init(this.images.get(this.theme + "l_middle_1"));
l_middle_1.setScaleXY(this.mapScale);
l_middle_1.x = l_middle_1.getBoundingBox().width / 2 - 25 * this.mapScale;
l_middle_1.y = 10 * this.mapScale + l_middle_1.getBoundingBox().height / 2;
this.renderArr.push(l_middle_1);
const l_middle_2 = new MySprite();
l_middle_2.init(this.images.get(this.theme + "l_middle_2"));
l_middle_2.setScaleXY(this.mapScale);
l_middle_2.x = l_middle_1.getBoundingBox().width / 2 - 30 * this.mapScale;
l_middle_2.y = 300 * this.mapScale + l_middle_2.getBoundingBox().height / 2;;
this.renderArr.push(l_middle_2);
const pencil = new MySprite();
pencil.init(this.images.get(this.theme + "pencil"));
pencil.setScaleXY(this.mapScale);
pencil.x = pencil.getBoundingBox().width / 2 - 55 * this.mapScale;
pencil.y = this.canvasHeight - pencil.getBoundingBox().height / 2;
this.renderArr.push(pencil);
const r_middle = new MySprite();
r_middle.init(this.images.get(this.theme + "r_middle"));
r_middle.setScaleXY(this.mapScale);
r_middle.x = this.canvasWidth - r_middle.getBoundingBox().width / 2 + 80 * this.mapScale;
r_middle.y = this.canvasHeight / 2;
this.renderArr.push(r_middle);
const r_bottom = new MySprite();
r_bottom.init(this.images.get(this.theme + "r_bottom"));
r_bottom.setScaleXY(this.mapScale);
r_bottom.x = this.canvasWidth - r_bottom.getBoundingBox().width / 2 + 30 * this.mapScale;
r_bottom.y = this.canvasHeight - r_bottom.getBoundingBox().height / 2;
this.renderArr.push(r_bottom);
}
initStage() {
......@@ -558,7 +586,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const stage = new Stage(this.images, this.audioObj, this.mapScale, this.mapScale);
stage.init(this.theme);
stage.bg.x = (this.canvasWidth - stage.width) / 2;
stage.bg.y = (this.canvasHeight - stage.height) / 2;
stage.bg.y = (this.canvasHeight - stage.height) / 2 + 50 * this.mapScale;
this.renderArr.push(stage.bg);
stage.setStageContent(this.data.stageItemArr);
this.stage = stage;
......
......@@ -8,6 +8,13 @@ const res = [
['1_pic_bg', "assets/play/theme/1/pic_bg.png"],
['1_stage_bg', "assets/play/theme/1/stage_bg.png"],
['1_title_bg', "assets/play/theme/1/title_bg.png"],
['1_l_middle_1', "assets/play/theme/1/l_middle_1.png"],
['1_l_middle_2', "assets/play/theme/1/l_middle_2.png"],
['1_pencil', "assets/play/theme/1/pencil.png"],
['1_r_bottom', "assets/play/theme/1/r_bottom.png"],
['1_r_middle', "assets/play/theme/1/r_middle.png"],
['1_box', "assets/play/theme/1/box.png"],
['1_title_rope', "assets/play/theme/1/title_rope.png"],
['2_bg', "assets/play/theme/2/bg.png"],
['2_bg2', "assets/play/theme/2/bg2.png"],
......@@ -17,6 +24,13 @@ const res = [
['2_pic_bg', "assets/play/theme/2/pic_bg.png"],
['2_stage_bg', "assets/play/theme/2/stage_bg.png"],
['2_title_bg', "assets/play/theme/2/title_bg.png"],
['2_l_middle_1', "assets/play/theme/2/l_middle_1.png"],
['2_l_middle_2', "assets/play/theme/2/l_middle_2.png"],
['2_pencil', "assets/play/theme/2/pencil.png"],
['2_r_bottom', "assets/play/theme/2/r_bottom.png"],
['2_r_middle', "assets/play/theme/2/r_middle.png"],
['2_box', "assets/play/theme/2/box.png"],
['2_title_rope', "assets/play/theme/2/title_rope.png"],
];
......
src/assets/play/theme/1/bg.png

141 KB | W: | H:

src/assets/play/theme/1/bg.png

91.2 KB | W: | H:

src/assets/play/theme/1/bg.png
src/assets/play/theme/1/bg.png
src/assets/play/theme/1/bg.png
src/assets/play/theme/1/bg.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/theme/1/bg2.png

239 KB | W: | H:

src/assets/play/theme/1/bg2.png

105 KB | W: | H:

src/assets/play/theme/1/bg2.png
src/assets/play/theme/1/bg2.png
src/assets/play/theme/1/bg2.png
src/assets/play/theme/1/bg2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/theme/1/e-mission.png

13.7 KB | W: | H:

src/assets/play/theme/1/e-mission.png

13.7 KB | W: | H:

src/assets/play/theme/1/e-mission.png
src/assets/play/theme/1/e-mission.png
src/assets/play/theme/1/e-mission.png
src/assets/play/theme/1/e-mission.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/theme/2/bg.png

89.7 KB | W: | H:

src/assets/play/theme/2/bg.png

30.8 KB | W: | H:

src/assets/play/theme/2/bg.png
src/assets/play/theme/2/bg.png
src/assets/play/theme/2/bg.png
src/assets/play/theme/2/bg.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/theme/2/bg2.png

146 KB | W: | H:

src/assets/play/theme/2/bg2.png

104 KB | W: | H:

src/assets/play/theme/2/bg2.png
src/assets/play/theme/2/bg2.png
src/assets/play/theme/2/bg2.png
src/assets/play/theme/2/bg2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/theme/2/e-mission.png

11.5 KB | W: | H:

src/assets/play/theme/2/e-mission.png

11.5 KB | W: | H:

src/assets/play/theme/2/e-mission.png
src/assets/play/theme/2/e-mission.png
src/assets/play/theme/2/e-mission.png
src/assets/play/theme/2/e-mission.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/theme/2/stage_bg.png

5.22 KB | W: | H:

src/assets/play/theme/2/stage_bg.png

6.8 KB | W: | H:

src/assets/play/theme/2/stage_bg.png
src/assets/play/theme/2/stage_bg.png
src/assets/play/theme/2/stage_bg.png
src/assets/play/theme/2/stage_bg.png
  • 2-up
  • Swipe
  • Onion skin
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