Usar assets en la parte del inicio

This commit is contained in:
Nulo 2021-07-05 15:49:06 +00:00
parent 9667c7520b
commit ae44130b75
21 changed files with 308 additions and 124 deletions

View file

@ -1,21 +1,29 @@
import botonJugarImg from "./assets/boton_jugar.png"; import botonComenzar from "./assets/Comenzar.png";
import flechaImg from "./assets/flecha.png"; import botonSiguiente from "./assets/Siguiente.png";
import larretaImg from "./assets/Larreta.png"; import logoFPGFDTBlanco from "./assets/LogoFPG-FDT-blanco-07.png";
import millonarioMaloPng from "./assets/Millonario Malo.png"; import logoSalvaLaCostanera from "./assets/SalvaCostanera.png";
import cieloRioCalleImg from "./assets/CieloRioCalle.png"; import logoSalvaLaCostaneraCostado from "./assets/Salva2.png";
import cieloImg from "./assets/Cielo.png"; import instrucciones1 from "./assets/Instrucciones 1.png";
import rioImg from "./assets/Rio.png"; import instrucciones2 from "./assets/Instrucciones 2.png";
import parquePublicoRioImg from "./assets/Parque publico con rio.png"; import instrucciones3 from "./assets/Instrucciones 3.png";
import parquePublicoImg from "./assets/Parque publico.png"; import flecha from "./assets/flecha.png";
import edificiosImg from "./assets/Edificios.png"; import larreta from "./assets/Larreta.png";
import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png"; import millonarioMalo from "./assets/Millonario Malo.png";
import baldosaImg from "./assets/Baldosa.png"; import cieloRioCalle from "./assets/CieloRioCalle.png";
import semillaImg from "./assets/Semilla.png"; import cielo from "./assets/Cielo.png";
import arbol1Img from "./assets/Árbol 1.png"; import rio from "./assets/Rio.png";
import arbol2Img from "./assets/Árbol 2.png"; import parquePublicoRio from "./assets/Parque publico con rio.png";
import ciudadanx1Img from "./assets/Firma 1.png"; import parquePublico from "./assets/Parque publico.png";
import ciudadanx2Img from "./assets/Firma 2.png"; import edificios from "./assets/Edificios.png";
import ciudadanx3Img from "./assets/Firma 3.png"; import jugadorx from "./assets/ProtagonistaCorriendo_1.png";
import jugadorxPresentando from "./assets/Personaje 1.png";
import baldosa from "./assets/Baldosa.png";
import semilla from "./assets/Semilla.png";
import arbol1 from "./assets/Árbol 1.png";
import arbol2 from "./assets/Árbol 2.png";
import ciudadanx1 from "./assets/Firma 1.png";
import ciudadanx2 from "./assets/Firma 2.png";
import ciudadanx3 from "./assets/Firma 3.png";
function loadImage(url: string): Promise<HTMLImageElement> { function loadImage(url: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -27,24 +35,32 @@ function loadImage(url: string): Promise<HTMLImageElement> {
} }
export const assetUrls = { export const assetUrls = {
botonJugar: botonJugarImg, botonComenzar,
flecha: flechaImg, botonSiguiente,
larreta: larretaImg, logoFPGFDTBlanco,
millonarioMalo: millonarioMaloPng, logoSalvaLaCostanera,
cieloRioCalle: cieloRioCalleImg, logoSalvaLaCostaneraCostado,
cielo: cieloImg, instrucciones1,
rio: rioImg, instrucciones2,
parquePublicoRio: parquePublicoRioImg, instrucciones3,
parquePublico: parquePublicoImg, flecha,
edificios: edificiosImg, larreta,
jugadorx: jugadorxImg, millonarioMalo,
baldosa: baldosaImg, cieloRioCalle,
semilla: semillaImg, cielo,
arbol1: arbol1Img, rio,
arbol2: arbol2Img, parquePublicoRio,
ciudadanx1: ciudadanx1Img, parquePublico,
ciudadanx2: ciudadanx2Img, edificios,
ciudadanx3: ciudadanx3Img, jugadorx,
jugadorxPresentando,
baldosa,
semilla,
arbol1,
arbol2,
ciudadanx1,
ciudadanx2,
ciudadanx3,
}; };
export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement }; export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement };

BIN
src/assets/Comenzar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 926 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/Firmá.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/Perdiste.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/assets/Personaje 1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/Salva2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/Siguiente.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 793 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

View file

@ -280,11 +280,12 @@ function getFloorY(juego: Juego<State>): number {
return (juego.canvas.height * 65) / 96; return (juego.canvas.height * 65) / 96;
} }
function drawBackground( export function drawBackground(
juego: Juego<State>, juego: Juego<AllState>,
y: number, y: number,
height: number, height: number,
img: HTMLImageElement, img: HTMLImageElement,
offset: number = 0,
sourceBox?: Box, sourceBox?: Box,
opacity?: number opacity?: number
) { ) {
@ -301,7 +302,7 @@ function drawBackground(
sourceBox.y, sourceBox.y,
sourceBox.width, sourceBox.width,
sourceBox.height, sourceBox.height,
i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x, i * (width - (opacity === undefined ? 1 : 0)) + offset,
y, y,
width, width,
height height
@ -309,7 +310,7 @@ function drawBackground(
} else { } else {
juego.ctx.drawImage( juego.ctx.drawImage(
img, img,
i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x, i * (width - (opacity === undefined ? 1 : 0)) + offset,
y, y,
width, width,
height height
@ -322,19 +323,33 @@ function drawBackground(
} }
export function draw(juego: Juego<State>, timestamp: number) { export function draw(juego: Juego<State>, timestamp: number) {
drawBackground(juego, 0, juego.canvas.height, juego.assets.cieloRioCalle); drawBackground(
drawBackground(juego, 0, getFloorY(juego), juego.assets.edificios, { juego,
0,
juego.canvas.height,
juego.assets.cieloRioCalle,
-juego.state.pos.x
);
drawBackground(
juego,
0,
getFloorY(juego),
juego.assets.edificios,
-juego.state.pos.x,
{
x: 0, x: 0,
y: 0, y: 0,
width: 89, width: 89,
height: 48, height: 48,
}); }
);
drawBackground( drawBackground(
juego, juego,
0, 0,
juego.canvas.height, juego.canvas.height,
juego.assets.cielo, juego.assets.cielo,
-juego.state.pos.x,
undefined, undefined,
juego.state.signatures / SIGNATURES_TO_WIN juego.state.signatures / SIGNATURES_TO_WIN
); );
@ -343,6 +358,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
0, 0,
juego.canvas.height, juego.canvas.height,
juego.assets.parquePublicoRio, juego.assets.parquePublicoRio,
-juego.state.pos.x,
undefined, undefined,
juego.state.signatures / SIGNATURES_TO_WIN juego.state.signatures / SIGNATURES_TO_WIN
); );

40
src/logo.ts Normal file
View file

@ -0,0 +1,40 @@
import { drawBackground } from "./jugando";
import { Juego, State as AllState } from "./main";
import * as welcome from "./welcome";
export type State = {
current: "logo";
timeout: number;
};
export function createState(): State {
return {
current: "logo",
timeout: 5 * 1000,
};
}
export function update(juego: Juego<State>, dt: number) {
juego.state.timeout -= dt;
if (juego.state.timeout < 0) {
(juego as Juego<AllState>).state = welcome.createState();
}
}
export function draw(juego: Juego<State>, timestamp: number) {
drawBackground(juego, 0, juego.canvas.height, juego.assets.cielo);
drawBackground(juego, 0, juego.canvas.height, juego.assets.parquePublicoRio);
juego.sprites.logoSalvaLaCostaneraGrande.draw(
juego,
juego.canvas.width / 2 -
juego.sprites.logoSalvaLaCostaneraGrande.getWidth(juego) / 2,
juego.canvas.height * 0.1
);
juego.sprites.logoFPGFDTBlanco.draw(
juego,
juego.canvas.width / 2 - juego.sprites.logoFPGFDTBlanco.getWidth(juego) / 2,
juego.canvas.height - 30 - juego.sprites.logoFPGFDTBlanco.getHeight(juego)
);
}

View file

@ -1,5 +1,6 @@
import { Juego, State as AllState } from "./main"; import { Juego, State as AllState } from "./main";
import { drawText } from "./utils"; import { drawText } from "./utils";
import * as welcome from "./welcome";
export type State = { export type State = {
current: "lose"; current: "lose";
@ -18,7 +19,7 @@ export function createState(juego: Juego<any>): State {
export function update(juego: Juego<State>, dt: number) { export function update(juego: Juego<State>, dt: number) {
juego.state.timeout -= dt; juego.state.timeout -= dt;
if (juego.state.timeout < 0) { if (juego.state.timeout < 0) {
(juego as Juego<AllState>).state = { current: "welcome" }; (juego as Juego<AllState>).state = welcome.createState();
return; return;
} }
} }

View file

@ -1,14 +1,20 @@
import "./style.css"; import "./style.css";
import * as logo from "./logo";
import * as welcome from "./welcome"; import * as welcome from "./welcome";
import * as jugando from "./jugando"; import * as jugando from "./jugando";
import * as win from "./win"; import * as win from "./win";
import * as lose from "./lose"; import * as lose from "./lose";
import { Assets, loadAssets } from "./assets"; import { Assets, loadAssets } from "./assets";
import { loadSprite, Sprite } from "./sprite"; import { loadSprite, Sprite } from "./sprite";
import { drawText, isMobile } from "./utils"; import { drawText } from "./utils";
export type State = welcome.State | jugando.State | win.State | lose.State; export type State =
| logo.State
| welcome.State
| jugando.State
| win.State
| lose.State;
export type Juego<T extends State> = { export type Juego<T extends State> = {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
@ -16,8 +22,17 @@ export type Juego<T extends State> = {
assets: Assets; assets: Assets;
sprites: { sprites: {
[key in [key in
| "botonSiguiente"
| "botonComenzar"
| "logoFPGFDTBlanco"
| "logoSalvaLaCostaneraGrande"
| "logoSalvaLaCostaneraCostado"
| "instrucciones1"
| "instrucciones2"
| "instrucciones3"
| "flecha" | "flecha"
| "jugadorx" | "jugadorx"
| "jugadorxPresentando"
| "baldosa" | "baldosa"
| "larreta" | "larreta"
| "millonarioMalo" | "millonarioMalo"
@ -41,6 +56,9 @@ function needsRotation(juego: Juego<any>): boolean {
function update(juego: Juego<any>, dt: number) { function update(juego: Juego<any>, dt: number) {
if (needsRotation(juego)) return; if (needsRotation(juego)) return;
switch (juego.state.current) { switch (juego.state.current) {
case "logo":
logo.update(juego, dt);
break;
case "welcome": case "welcome":
welcome.update(juego, dt); welcome.update(juego, dt);
break; break;
@ -76,6 +94,9 @@ function draw(juego: Juego<any>, timestamp: number) {
} }
switch (juego.state.current) { switch (juego.state.current) {
case "logo":
logo.draw(juego, timestamp);
break;
case "welcome": case "welcome":
welcome.draw(juego, timestamp); welcome.draw(juego, timestamp);
break; break;
@ -113,75 +134,104 @@ async function initJuego() {
const assets = await loadAssets(); const assets = await loadAssets();
const sprites = { const sprites = {
flecha: loadSprite( botonComenzar: loadSprite(assets.botonComenzar, {
assets.flecha, height: (juego) => juego.canvas.height / 8,
11, }),
9, botonSiguiente: loadSprite(assets.botonSiguiente, {
(juego) => juego.canvas.height / 6 height: (juego) => juego.canvas.height / 8,
}),
logoFPGFDTBlanco: loadSprite(assets.logoFPGFDTBlanco, {
height: (juego) => juego.canvas.height / 6,
}),
logoSalvaLaCostaneraGrande: loadSprite(assets.logoSalvaLaCostanera, {
height: (juego) => juego.canvas.height * 0.45,
}),
logoSalvaLaCostaneraCostado: loadSprite(
assets.logoSalvaLaCostaneraCostado,
{ height: (juego) => juego.canvas.height / 4 }
), ),
instrucciones1: loadSprite(assets.instrucciones1, {
width: (juego) => juego.canvas.width * 0.6,
}),
instrucciones2: loadSprite(assets.instrucciones2, {
width: (juego) => juego.canvas.width * 0.6,
}),
instrucciones3: loadSprite(assets.instrucciones3, {
width: (juego) => juego.canvas.width * 0.6,
}),
flecha: loadSprite(assets.flecha, {
height: (juego) => juego.canvas.height / 6,
}),
jugadorx: loadSprite( jugadorx: loadSprite(
assets.jugadorx, assets.jugadorx,
65, { height: (juego) => juego.canvas.height / 4 },
94, {
(juego) => juego.canvas.height / 4 width: 65,
), height: 94,
baldosa: loadSprite( }
assets.baldosa,
72,
72,
(juego) => juego.canvas.height * 0.8
), ),
jugadorxPresentando: loadSprite(assets.jugadorxPresentando, {
height: (juego) => juego.canvas.height * 0.8,
}),
baldosa: loadSprite(assets.baldosa, {
height: (juego) => juego.canvas.height * 0.8,
}),
larreta: loadSprite( larreta: loadSprite(
assets.larreta, assets.larreta,
83, { height: (juego) => juego.canvas.height / 4 },
131, {
(juego) => juego.canvas.height / 4 width: 83,
height: 131,
}
), ),
millonarioMalo: loadSprite( millonarioMalo: loadSprite(
assets.millonarioMalo, assets.millonarioMalo,
50, { height: (juego) => juego.canvas.height / 4 },
71, { width: 50, height: 71 }
(juego) => juego.canvas.height / 4
),
semilla: loadSprite(
assets.semilla,
72,
73,
(juego) => juego.canvas.height / 8
), ),
semilla: loadSprite(assets.semilla, {
height: (juego) => juego.canvas.height / 8,
}),
arbol1: loadSprite( arbol1: loadSprite(
assets.arbol1, assets.arbol1,
72, { height: (juego) => juego.canvas.height / 3 },
68, {
(juego) => juego.canvas.height / 3 width: 72,
height: 68,
}
), ),
arbol2: loadSprite( arbol2: loadSprite(
assets.arbol2, assets.arbol2,
72, { height: (juego) => juego.canvas.height / 4 },
56, {
(juego) => juego.canvas.height / 4 width: 72,
height: 56,
}
), ),
ciudadanx1: loadSprite( ciudadanx1: loadSprite(
assets.ciudadanx1, assets.ciudadanx1,
45, {
88, height: (juego) => juego.canvas.height / 4,
(juego) => juego.canvas.height / 4 },
{ width: 45, height: 88 }
), ),
ciudadanx2: loadSprite( ciudadanx2: loadSprite(
assets.ciudadanx2, assets.ciudadanx2,
45, {
88, height: (juego) => juego.canvas.height / 4,
(juego) => juego.canvas.height / 4 },
{ width: 45, height: 88 }
), ),
ciudadanx3: loadSprite( ciudadanx3: loadSprite(
assets.ciudadanx3, assets.ciudadanx3,
45, {
88, height: (juego) => juego.canvas.height / 4,
(juego) => juego.canvas.height / 4 },
{ width: 45, height: 86 }
), ),
}; };
let juego: Juego<welcome.State> = { let juego: Juego<logo.State> = {
canvas, canvas,
ctx, ctx,
assets, assets,
@ -189,9 +239,7 @@ async function initJuego() {
mouse: { x: 0, y: 0, down: false }, mouse: { x: 0, y: 0, down: false },
touches: null, touches: null,
keyboard: { keys: {} }, keyboard: { keys: {} },
state: { state: logo.createState(),
current: "welcome",
},
}; };
(window as any).juego = juego; (window as any).juego = juego;
juego.ctx.imageSmoothingEnabled = false; juego.ctx.imageSmoothingEnabled = false;

View file

@ -17,13 +17,15 @@ export type Sprite = {
// Sprites are image assets that have a grid of tiles to animate // Sprites are image assets that have a grid of tiles to animate
export function loadSprite( export function loadSprite(
img: HTMLImageElement, img: HTMLImageElement,
// The size of each tile
width: number,
height: number,
// Calculates the size of the sprite when rendering // Calculates the size of the sprite when rendering
getHeight: (juego: Juego<any>) => number size:
| { width: (juego: Juego<any>) => number }
| { height: (juego: Juego<any>) => number },
tileSize?: { width: number; height: number }
): Sprite { ): Sprite {
const aspect = width / height; const width = tileSize ? tileSize.width : img.width;
const height = tileSize ? tileSize.height : img.height;
const rowSize = Math.floor(img.width / width); const rowSize = Math.floor(img.width / width);
if (img.width / width !== rowSize) { if (img.width / width !== rowSize) {
console.warn( console.warn(
@ -32,7 +34,15 @@ export function loadSprite(
} }
function getWidth(juego: Juego<any>) { function getWidth(juego: Juego<any>) {
return getHeight(juego) * aspect; return "width" in size
? size.width(juego)
: (size.height(juego) * width) / height;
}
function getHeight(juego: Juego<any>) {
return "height" in size
? size.height(juego)
: (size.width(juego) * height) / width;
} }
function draw( function draw(

View file

@ -1,41 +1,94 @@
import { isTouching, posInBox } from "./utils"; import { Box, isTouching, posInBox } from "./utils";
import { createJugandoState } from "./jugando"; import { createJugandoState, drawBackground } from "./jugando";
import { Juego } from "./main"; import { Juego, State as AllState } from "./main";
import { Sprite } from "./sprite";
export type State = { export type State = {
current: "welcome"; current: "welcome";
step: 0 | 1 | 2;
// Hack because we can't detect when it is a mousedown/mouseup
buttonCooldown: number;
}; };
function startButton(juego: Juego<State>) { export function createState(): State {
const [width, height] = [
juego.assets.botonJugar.width / 4,
juego.assets.botonJugar.height / 4,
];
return { return {
current: "welcome",
step: 0,
buttonCooldown: 0,
};
}
function button(juego: Juego<State>): { box: Box; sprite: Sprite } {
const sprite =
juego.state.step === 2
? juego.sprites.botonComenzar
: juego.sprites.botonSiguiente;
const width = sprite.getWidth(juego);
const height = sprite.getHeight(juego);
return {
box: {
x: juego.canvas.width - width - 30, x: juego.canvas.width - width - 30,
y: juego.canvas.height - height - 30, y: juego.canvas.height - height - 30,
width, width,
height, height,
},
sprite,
}; };
} }
export function update(juego: Juego<State>, dt: number) { export function update(juego: Juego<State>, dt: number) {
const btn = startButton(juego); const { box } = button(juego);
juego.state.buttonCooldown -= dt;
if ( if (
(juego.mouse.down && posInBox(btn, juego.mouse)) || ((juego.mouse.down && posInBox(box, juego.mouse)) ||
isTouching(juego, btn) isTouching(juego, box)) &&
juego.state.buttonCooldown < 0
) { ) {
(juego as Juego<any>).state = createJugandoState(juego); juego.state.buttonCooldown = 1000;
if (juego.state.step === 2) {
(juego as Juego<AllState>).state = createJugandoState(juego);
return;
} else {
juego.state.step++;
return;
}
} }
} }
export function draw(juego: Juego<State>, timestamp: number) { export function draw(juego: Juego<State>, timestamp: number) {
const btn = startButton(juego); drawBackground(juego, 0, juego.canvas.height, juego.assets.cielo);
juego.ctx.drawImage( drawBackground(juego, 0, juego.canvas.height, juego.assets.parquePublicoRio);
juego.assets.botonJugar,
btn.x, juego.sprites.logoFPGFDTBlanco.draw(
btn.y, juego,
btn.width, 30,
btn.height juego.canvas.height - 30 - juego.sprites.logoFPGFDTBlanco.getHeight(juego)
); );
juego.sprites.logoSalvaLaCostaneraCostado.draw(juego, 30, 30);
const instruccionSprite =
juego.state.step === 0
? juego.sprites.instrucciones1
: juego.state.step === 1
? juego.sprites.instrucciones2
: juego.state.step === 2
? juego.sprites.instrucciones3
: null;
if (!instruccionSprite) throw new Error("AAAAAAAAAAAAAAAAAAAAA");
instruccionSprite.draw(
juego,
juego.canvas.width * 0.4,
juego.canvas.height * 0.1
);
juego.sprites.jugadorxPresentando.draw(
juego,
juego.canvas.width * 0.5 -
juego.sprites.jugadorxPresentando.getWidth(juego),
juego.canvas.height * 0.1
);
const { box, sprite } = button(juego);
sprite.draw(juego, box.x, box.y);
} }