Add move description text scrolling and summary sprite

This commit is contained in:
Flashfyre 2023-04-07 13:23:55 -04:00
parent 860c1a5c11
commit b743a44f4b
2 changed files with 64 additions and 11 deletions

View File

@ -159,13 +159,18 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
Promise.allSettled(moveIds.map(m => initAnim(m)))
.then(() => {
loadMoveAnimAssets(this.scene as BattleScene, moveIds);
(this.scene as BattleScene).loadAtlas(this.getSpriteKey(), 'pokemon', this.getAtlasPath());
(this.scene as BattleScene).loadAtlas(this.getSpriteKey(), 'pokemon', this.getSpriteAtlasPath());
if (this.isPlayer())
(this.scene as BattleScene).loadAtlas(this.getBattleSpriteKey(), 'pokemon', this.getBattleSpriteAtlasPath());
this.scene.load.audio(this.species.speciesId.toString(), `audio/cry/${this.species.speciesId}.mp3`);
this.scene.load.once(Phaser.Loader.Events.COMPLETE, () => {
const originalWarn = console.warn;
// Ignore warnings for missing frames, because there will be a lot
console.warn = () => {};
const frameNames = this.scene.anims.generateFrameNames(this.getSpriteKey(), { zeroPad: 4, suffix: ".png", start: 1, end: 256 });
const battleFrameNames = this.isPlayer()
? this.scene.anims.generateFrameNames(this.getBattleSpriteKey(), { zeroPad: 4, suffix: ".png", start: 1, end: 256 })
: null;
console.warn = originalWarn;
this.scene.anims.create({
key: this.getSpriteKey(),
@ -173,6 +178,14 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
frameRate: 12,
repeat: -1
});
if (this.isPlayer()) {
this.scene.anims.create({
key: this.getBattleSpriteKey(),
frames: battleFrameNames,
frameRate: 12,
repeat: -1
});
}
this.playAnim();
resolve();
});
@ -182,18 +195,30 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
});
}
getAtlasPath(): string {
getSpriteAtlasPath(): string {
return this.getSpriteId().replace(/\_{2}/g, '/');
}
getBattleSpriteAtlasPath(): string {
return this.getBattleSpriteId().replace(/\_{2}/g, '/');
}
getSpriteId(): string {
return `${this.isPlayer() ? 'back__' : ''}${this.shiny ? 'shiny__' : ''}${this.species.genderDiffs && !this.gender ? 'female__' : ''}${this.species.speciesId}`;
return `${this.shiny ? 'shiny__' : ''}${this.species.genderDiffs && !this.gender ? 'female__' : ''}${this.species.speciesId}`;
}
getBattleSpriteId(): string {
return `${this.isPlayer() ? 'back__' : ''}${this.getSpriteId()}`;
}
getSpriteKey(): string {
return `pkmn__${this.getSpriteId()}`;
}
getBattleSpriteKey(): string {
return `pkmn__${this.getBattleSpriteId()}`;
}
getIconAtlasKey(): string {
return `pokemon_icons_${this.species.generation}`;
}
@ -219,9 +244,9 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
}
playAnim() {
this.getSprite().play(this.getSpriteKey());
this.getTintSprite().play(this.getSpriteKey());
this.getZoomSprite().play(this.getSpriteKey());
this.getSprite().play(this.getBattleSpriteKey());
this.getTintSprite().play(this.getBattleSpriteKey());
this.getZoomSprite().play(this.getBattleSpriteKey());
}
calculateStats() {

View File

@ -21,6 +21,7 @@ export default class SummaryUiHandler extends UiHandler {
private summaryUiMode: SummaryUiMode;
private summaryContainer: Phaser.GameObjects.Container;
private pokemonSprite: Phaser.GameObjects.Sprite;
private summaryPageContainer: Phaser.GameObjects.Container;
private movesContainer: Phaser.GameObjects.Container;
private moveDescriptionText: Phaser.GameObjects.Text;
@ -30,6 +31,7 @@ export default class SummaryUiHandler extends UiHandler {
private extraMoveRowContainer: Phaser.GameObjects.Container;
private summaryPageTransitionContainer: Phaser.GameObjects.Container;
private moveDescriptionScrollTween: Phaser.Tweens.Tween;
private moveCursorBlinkTimer: Phaser.Time.TimerEvent;
private pokemon: PlayerPokemon;
@ -56,6 +58,9 @@ export default class SummaryUiHandler extends UiHandler {
summaryBg.setOrigin(0, 1);
this.summaryContainer.add(summaryBg);
this.pokemonSprite = this.scene.add.sprite(56, -106, `pkmn__sub`);
this.summaryContainer.add(this.pokemonSprite);
const getSummaryPageBg = () => {
const ret = this.scene.add.sprite(0, 0, this.getPageKey(0));
ret.setOrigin(0, 1);
@ -85,6 +90,7 @@ export default class SummaryUiHandler extends UiHandler {
this.summaryContainer.setVisible(true);
this.cursor = -1;
this.pokemonSprite.play(this.pokemon.getSpriteKey());
this.pokemon.cry();
switch (this.summaryUiMode) {
@ -116,9 +122,10 @@ export default class SummaryUiHandler extends UiHandler {
if (this.summaryUiMode === SummaryUiMode.LEARN_MOVE)
this.moveSelectFunction(this.moveCursor);
else {
if (this.selectedMoveIndex === -1)
if (this.selectedMoveIndex === -1) {
this.selectedMoveIndex = this.moveCursor;
else {
this.setCursor(this.moveCursor);
} else {
if (this.selectedMoveIndex !== this.moveCursor) {
const tempMove = this.pokemon.moveset[this.selectedMoveIndex];
this.pokemon.moveset[this.selectedMoveIndex] = this.pokemon.moveset[this.moveCursor];
@ -198,6 +205,27 @@ export default class SummaryUiHandler extends UiHandler {
const selectedMove = this.getSelectedMove();
this.moveDescriptionText.setText(selectedMove?.effect || '');
const moveDescriptionLineCount = Math.floor(this.moveDescriptionText.displayHeight / 14.83);
if (this.moveDescriptionScrollTween) {
this.moveDescriptionScrollTween.remove();
this.moveDescriptionScrollTween = null;
}
if (moveDescriptionLineCount > 3) {
this.moveDescriptionText.setY(84);
this.moveDescriptionScrollTween = this.scene.tweens.add({
targets: this.moveDescriptionText,
delay: 2000,
loop: -1,
loopDelay: 2000,
duration: (moveDescriptionLineCount - 3) * 2000,
y: `-=${14.83 * (moveDescriptionLineCount - 3)}`,
onLoop: () => {
this.moveDescriptionText.setY(84);
}
});
}
}
if (!this.moveCursorObj) {
@ -210,6 +238,7 @@ export default class SummaryUiHandler extends UiHandler {
if (this.moveCursorBlinkTimer)
this.moveCursorBlinkTimer.destroy();
this.moveCursorObj.setVisible(true);
this.moveCursorBlinkTimer = this.scene.time.addEvent({
loop: true,
delay: 600,
@ -321,15 +350,14 @@ export default class SummaryUiHandler extends UiHandler {
this.movesContainer.add(this.moveDescriptionText);
const maskRect = this.scene.make.graphics({});
maskRect.setScale(6);
maskRect.fillStyle(0xFFFFFF);
maskRect.beginPath();
maskRect.fillRect(2, 83, 149, 46);
maskRect.fillRect(112, 130, 150, 46);
const moveDescriptionTextMask = maskRect.createGeometryMask();
this.moveDescriptionText.setMask(moveDescriptionTextMask);
console.log(this.moveDescriptionText.displayHeight);
break;
}
}