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

完成模板开发

parent 27abc5ba
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
MySprite, tweenChange, ShapeRect, MySprite, tweenChange, ShapeRect,
} from './Unit'; } from './Unit';
import { Content } from '@angular/compiler/src/render3/r3_ast';
class Item { class Item {
/**图片集合 */ /**图片集合 */
...@@ -71,6 +72,15 @@ export class Stage extends Item { ...@@ -71,6 +72,15 @@ export class Stage extends Item {
bg.alpha = 0; bg.alpha = 0;
this.bg = bg; 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(); const stageBg = new MySprite();
stageBg.init(this.images.get(theme + "bg2")); stageBg.init(this.images.get(theme + "bg2"));
stageBg.scaleX = this.scaleX; stageBg.scaleX = this.scaleX;
...@@ -91,8 +101,8 @@ export class Stage extends Item { ...@@ -91,8 +101,8 @@ export class Stage extends Item {
const picBg2 = new ShapeRect(); const picBg2 = new ShapeRect();
picBg2.setSize(picBg.width * this.scaleX, picBg.height * this.scaleY); picBg2.setSize(picBg.width * this.scaleX, picBg.height * this.scaleY);
picBg2.alpha = 0; picBg2.alpha = 0;
picBg2.x = (this.width - picBg2.width) /2; picBg2.x = (this.width - picBg2.width) / 2;
picBg2.y = (this.height - picBg2.height) /2; picBg2.y = (this.height - picBg2.height) / 2;
bg.addChild(picBg2); bg.addChild(picBg2);
this.picBg = picBg2; this.picBg = picBg2;
...@@ -112,6 +122,16 @@ export class Stage extends Item { ...@@ -112,6 +122,16 @@ export class Stage extends Item {
titleBg.alpha = 0; titleBg.alpha = 0;
this.titleBg = titleBg; this.titleBg = titleBg;
bg.addChild(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) { setStageContent(stageItemArr) {
...@@ -220,13 +240,13 @@ export class Stage extends Item { ...@@ -220,13 +240,13 @@ export class Stage extends Item {
title.width = this.titleBg.width - 40 * this._scaleX; title.width = this.titleBg.width - 40 * this._scaleX;
title.disH = 0; title.disH = 0;
title.text = val; title.text = val;
title.textAlign = 'middle'; title.textAlign = 'left';
title.fontSize = 40; title.fontSize = 40;
title.fontName = "BRLNSDB"; title.fontName = "BRLNSDB";
title.fontColor = "#a0e9ff"; title.fontColor = "#a0e9ff";
title.refreshSize(); title.refreshSize();
title.x = (this.titleBg.width - title.width) / 2; 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.titleBg.addChild(title);
this.curTitleLabel = title; this.curTitleLabel = title;
...@@ -234,11 +254,13 @@ export class Stage extends Item { ...@@ -234,11 +254,13 @@ export class Stage extends Item {
private setPic(content, callback = null) { private setPic(content, callback = null) {
if (this.curContent) { if (this.curContent && this.curContent.pic) {
this.picBg.removeChild(this.curContent.pic); this.picBg.removeChild(this.curContent.pic);
} }
if (content.pic) {
this.picBg.addChild(content.pic); this.picBg.addChild(content.pic);
}
if (callback) { if (callback) {
callback(); callback();
...@@ -268,24 +290,23 @@ export class Mission extends Item { ...@@ -268,24 +290,23 @@ export class Mission extends Item {
bg.alpha = 0; bg.alpha = 0;
this.bg = bg; 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(); const stageBgPic = new MySprite();
stageBgPic.init(this.images.get(theme + "stage_bg")); stageBgPic.init(this.images.get(theme + "stage_bg"));
stageBgPic.scaleX = this.scaleX; stageBgPic.scaleX = this.scaleX;
stageBgPic.scaleY = this.scaleY; stageBgPic.scaleY = this.scaleY;
stageBgPic.alpha = 0; 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; stageBgPic.y = this.height - stageBgPic.getBoundingBox().height / 2 + 2 * this.scaleY;
this.stageBgPic = stageBgPic; this.stageBgPic = stageBgPic;
bg.addChild(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(); const stageVal = new Label();
stageVal.text = ""; stageVal.text = "";
...@@ -296,7 +317,7 @@ export class Mission extends Item { ...@@ -296,7 +317,7 @@ export class Mission extends Item {
stageVal.scaleX = this.scaleX; stageVal.scaleX = this.scaleX;
stageVal.scaleY = this.scaleY; stageVal.scaleY = this.scaleY;
stageVal.refreshSize(); 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.y = 20 * this.scaleY + stageVal.getBoundingBox().height / 2;
stageVal.alpha = 0; stageVal.alpha = 0;
......
...@@ -799,7 +799,6 @@ export class RichText extends Label { ...@@ -799,7 +799,6 @@ export class RichText extends Label {
this._height = this.fontSize * row.length + (row.length - 1) * this.disH; this._height = this.fontSize * row.length + (row.length - 1) * this.disH;
this.ctx.restore(); this.ctx.restore();
} }
drawText() { drawText() {
...@@ -811,7 +810,7 @@ export class RichText extends Label { ...@@ -811,7 +810,7 @@ export class RichText extends Label {
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = 'bottom';
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor; this.ctx.fillStyle = this.fontColor;
...@@ -849,7 +848,6 @@ export class RichText extends Label { ...@@ -849,7 +848,6 @@ export class RichText extends Label {
} }
} }
// this.ctx.fillStyle = '#ff7600'; // this.ctx.fillStyle = '#ff7600';
for (let b = 0; b < row.length; b++) { for (let b = 0; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20 this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
......
...@@ -545,12 +545,40 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -545,12 +545,40 @@ export class PlayComponent implements OnInit, OnDestroy {
bg.y = this.canvasHeight / 2; bg.y = this.canvasHeight / 2;
this.renderArr.push(bg); this.renderArr.push(bg);
const bg2 = new MySprite(); const l_middle_1 = new MySprite();
bg2.init(this.images.get(this.theme + "bg2")); l_middle_1.init(this.images.get(this.theme + "l_middle_1"));
bg2.setScaleXY(this.mapScale); l_middle_1.setScaleXY(this.mapScale);
bg2.x = this.canvasWidth / 2; l_middle_1.x = l_middle_1.getBoundingBox().width / 2 - 25 * this.mapScale;
bg2.y = this.canvasHeight / 2; l_middle_1.y = 10 * this.mapScale + l_middle_1.getBoundingBox().height / 2;
this.renderArr.push(bg2); 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() { initStage() {
...@@ -558,7 +586,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -558,7 +586,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const stage = new Stage(this.images, this.audioObj, this.mapScale, this.mapScale); const stage = new Stage(this.images, this.audioObj, this.mapScale, this.mapScale);
stage.init(this.theme); stage.init(this.theme);
stage.bg.x = (this.canvasWidth - stage.width) / 2; 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); this.renderArr.push(stage.bg);
stage.setStageContent(this.data.stageItemArr); stage.setStageContent(this.data.stageItemArr);
this.stage = stage; this.stage = stage;
......
...@@ -8,6 +8,13 @@ const res = [ ...@@ -8,6 +8,13 @@ const res = [
['1_pic_bg', "assets/play/theme/1/pic_bg.png"], ['1_pic_bg', "assets/play/theme/1/pic_bg.png"],
['1_stage_bg', "assets/play/theme/1/stage_bg.png"], ['1_stage_bg', "assets/play/theme/1/stage_bg.png"],
['1_title_bg', "assets/play/theme/1/title_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_bg', "assets/play/theme/2/bg.png"],
['2_bg2', "assets/play/theme/2/bg2.png"], ['2_bg2', "assets/play/theme/2/bg2.png"],
...@@ -17,6 +24,13 @@ const res = [ ...@@ -17,6 +24,13 @@ const res = [
['2_pic_bg', "assets/play/theme/2/pic_bg.png"], ['2_pic_bg', "assets/play/theme/2/pic_bg.png"],
['2_stage_bg', "assets/play/theme/2/stage_bg.png"], ['2_stage_bg', "assets/play/theme/2/stage_bg.png"],
['2_title_bg', "assets/play/theme/2/title_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