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 flechaImg from "./assets/flecha.png";
import larretaImg from "./assets/Larreta.png";
import millonarioMaloPng from "./assets/Millonario Malo.png";
import cieloRioCalleImg from "./assets/CieloRioCalle.png";
import cieloImg from "./assets/Cielo.png";
import rioImg from "./assets/Rio.png";
import parquePublicoRioImg from "./assets/Parque publico con rio.png";
import parquePublicoImg from "./assets/Parque publico.png";
import edificiosImg from "./assets/Edificios.png";
import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png";
import baldosaImg from "./assets/Baldosa.png";
import semillaImg from "./assets/Semilla.png";
import arbol1Img from "./assets/Árbol 1.png";
import arbol2Img from "./assets/Árbol 2.png";
import ciudadanx1Img from "./assets/Firma 1.png";
import ciudadanx2Img from "./assets/Firma 2.png";
import ciudadanx3Img from "./assets/Firma 3.png";
import botonComenzar from "./assets/Comenzar.png";
import botonSiguiente from "./assets/Siguiente.png";
import logoFPGFDTBlanco from "./assets/LogoFPG-FDT-blanco-07.png";
import logoSalvaLaCostanera from "./assets/SalvaCostanera.png";
import logoSalvaLaCostaneraCostado from "./assets/Salva2.png";
import instrucciones1 from "./assets/Instrucciones 1.png";
import instrucciones2 from "./assets/Instrucciones 2.png";
import instrucciones3 from "./assets/Instrucciones 3.png";
import flecha from "./assets/flecha.png";
import larreta from "./assets/Larreta.png";
import millonarioMalo from "./assets/Millonario Malo.png";
import cieloRioCalle from "./assets/CieloRioCalle.png";
import cielo from "./assets/Cielo.png";
import rio from "./assets/Rio.png";
import parquePublicoRio from "./assets/Parque publico con rio.png";
import parquePublico from "./assets/Parque publico.png";
import edificios from "./assets/Edificios.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> {
return new Promise((resolve, reject) => {
@ -27,24 +35,32 @@ function loadImage(url: string): Promise<HTMLImageElement> {
}
export const assetUrls = {
botonJugar: botonJugarImg,
flecha: flechaImg,
larreta: larretaImg,
millonarioMalo: millonarioMaloPng,
cieloRioCalle: cieloRioCalleImg,
cielo: cieloImg,
rio: rioImg,
parquePublicoRio: parquePublicoRioImg,
parquePublico: parquePublicoImg,
edificios: edificiosImg,
jugadorx: jugadorxImg,
baldosa: baldosaImg,
semilla: semillaImg,
arbol1: arbol1Img,
arbol2: arbol2Img,
ciudadanx1: ciudadanx1Img,
ciudadanx2: ciudadanx2Img,
ciudadanx3: ciudadanx3Img,
botonComenzar,
botonSiguiente,
logoFPGFDTBlanco,
logoSalvaLaCostanera,
logoSalvaLaCostaneraCostado,
instrucciones1,
instrucciones2,
instrucciones3,
flecha,
larreta,
millonarioMalo,
cieloRioCalle,
cielo,
rio,
parquePublicoRio,
parquePublico,
edificios,
jugadorx,
jugadorxPresentando,
baldosa,
semilla,
arbol1,
arbol2,
ciudadanx1,
ciudadanx2,
ciudadanx3,
};
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;
}
function drawBackground(
juego: Juego<State>,
export function drawBackground(
juego: Juego<AllState>,
y: number,
height: number,
img: HTMLImageElement,
offset: number = 0,
sourceBox?: Box,
opacity?: number
) {
@ -301,7 +302,7 @@ function drawBackground(
sourceBox.y,
sourceBox.width,
sourceBox.height,
i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x,
i * (width - (opacity === undefined ? 1 : 0)) + offset,
y,
width,
height
@ -309,7 +310,7 @@ function drawBackground(
} else {
juego.ctx.drawImage(
img,
i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x,
i * (width - (opacity === undefined ? 1 : 0)) + offset,
y,
width,
height
@ -322,19 +323,33 @@ function drawBackground(
}
export function draw(juego: Juego<State>, timestamp: number) {
drawBackground(juego, 0, juego.canvas.height, juego.assets.cieloRioCalle);
drawBackground(juego, 0, getFloorY(juego), juego.assets.edificios, {
drawBackground(
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,
y: 0,
width: 89,
height: 48,
});
}
);
drawBackground(
juego,
0,
juego.canvas.height,
juego.assets.cielo,
-juego.state.pos.x,
undefined,
juego.state.signatures / SIGNATURES_TO_WIN
);
@ -343,6 +358,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
0,
juego.canvas.height,
juego.assets.parquePublicoRio,
-juego.state.pos.x,
undefined,
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 { drawText } from "./utils";
import * as welcome from "./welcome";
export type State = {
current: "lose";
@ -18,7 +19,7 @@ export function createState(juego: Juego<any>): State {
export function update(juego: Juego<State>, dt: number) {
juego.state.timeout -= dt;
if (juego.state.timeout < 0) {
(juego as Juego<AllState>).state = { current: "welcome" };
(juego as Juego<AllState>).state = welcome.createState();
return;
}
}

View file

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

View file

@ -1,41 +1,94 @@
import { isTouching, posInBox } from "./utils";
import { createJugandoState } from "./jugando";
import { Juego } from "./main";
import { Box, isTouching, posInBox } from "./utils";
import { createJugandoState, drawBackground } from "./jugando";
import { Juego, State as AllState } from "./main";
import { Sprite } from "./sprite";
export type State = {
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>) {
const [width, height] = [
juego.assets.botonJugar.width / 4,
juego.assets.botonJugar.height / 4,
];
export function createState(): State {
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,
y: juego.canvas.height - height - 30,
width,
height,
},
sprite,
};
}
export function update(juego: Juego<State>, dt: number) {
const btn = startButton(juego);
const { box } = button(juego);
juego.state.buttonCooldown -= dt;
if (
(juego.mouse.down && posInBox(btn, juego.mouse)) ||
isTouching(juego, btn)
((juego.mouse.down && posInBox(box, juego.mouse)) ||
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) {
const btn = startButton(juego);
juego.ctx.drawImage(
juego.assets.botonJugar,
btn.x,
btn.y,
btn.width,
btn.height
drawBackground(juego, 0, juego.canvas.height, juego.assets.cielo);
drawBackground(juego, 0, juego.canvas.height, juego.assets.parquePublicoRio);
juego.sprites.logoFPGFDTBlanco.draw(
juego,
30,
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);
}