Y que es interesante es que vamos a hacer esto, amigos
Esto que van a ver aquí, esto es lo que vamos a hacer
¿Ven esto? Pues esto
Esto es un Minecraft, fíjense
Tenemos aquí nuestros
Nuestros cositos, podemos poner aquí
Diferentes cosas, también al lado
¿Vale? Podemos poner aquí
También de cristal
De madera, esto es un bug que hay
Que si pones una...
Si pones justamente donde estás tú
Le pones uno, ¡pium! Sales disparado
Mira, un poquito Breath of the Wild eso, ¿eh?
Pero bueno, que puedes hacer las casas
Ya ves que lo puedes hacer todo
Y puedes ir cambiando el selector
Además, con local storage se guarda
Donde están todos los bloques
Podemos resetear y ya lo tendríamos
O lo puedes... ¡Ay!
¿Qué ha pasado? No sé si es que me he cargado
Lo del local storage. ¡Ah! Es que no lo he dado a save
Hay que guardarlo aquí
Hay que darle a save, ¿vale?
Se pueden quitar también, ¿eh? Mira
Se pueden quitar. Mira, le das al alt
Y le das y lo quitas. ¿Has visto?
O sea, no está mal
Es un clon de Minecraft hecho con JavaScript
Con React y con 3GS
Lo cual no está nada mal, ¿eh?
No está nada mal
Lo vamos a hacer hasta que lleguemos a este punto
Lo vamos a hacer desde cero, ¿vale?
Esto es como va a quedar al final
Pero... No, no se puede picar
No se puede picar
A ver, vamos a calmarnos
O sea, vamos a calmarnos
No tiene juego multijugador
No... No tiene...
Hay muchas cosas que no tiene, ¿vale?
Es un clon bastante sencillo
Pero la verdad es que se puede poner el material
Los puedes apilar
Tiene todo el tema de...
El rendimiento es brutal
Es brutal, la verdad
O sea, funciona súper bien
Pero lo bueno es que después
Podéis poner animalitos
Podéis hacer lo que queráis
Esto es un poco como un prototipo
Pero a partir de aquí
Ya veréis que con lo facilillo que es
O sea, a ver, vamos a estar un rato
Pero no es exacto
No es súper difícil
Y poco a poco pues podéis hacer lo que queráis
Le podéis añadir mods
Podéis hacer multijugador
Chat, lo que queráis
Podéis hacer lo que queráis
Sería la base del juego
Pero bueno
La base más interesante, ¿no?
Justamente la base de construir
Mira, de hecho podéis hacer que construya para allá
Podéis saltar a los bloques
Podéis poner por aquí
Mira, podéis seguir
Mira, otra vez
No está mal, ¿eh?
De hecho, mira
Uuuu
Sí
Mira, podéis ir hasta el infinito casi
Hasta el infinito
Y desde una vez que estáis aquí arriba
Pues podéis lanzaros
O sea que no está mal, ¿eh?
No está mal
Un momento
Podremos hacer después un tortilla LAN, ¿no?
No está mal
Obviamente, bueno
Está limitado un poco el espacio
Porque si no sería infinito
Pero no está mal
No está mal
Podéis cambiar entre
Solo hemos puesto cuatro
Solo hay cuatro texturas
Pero una vez que las tenéis
Podéis poner tantas como queráis
Que es lo más interesante
¿Veis?
Mira, estamos haciendo aquí un
Un puente
Un puente
A ver
Va bastante bien, ¿eh?
Va a 60 frames
Es bastante impresionante
Lo bien que funciona
Pues esto, esto
Esto está hecho con RIA
Con JavaScript
Y con todo esto
Así que
It's awesome
My man
I just can't believe
How good it looks
La verdad es que
Está muy bien
Hombre, las texturas no son 4D
Son pixeladas
Pero no está mal
El tema
Que esto es lo que vamos a hacer
Lo vamos a hacer desde cero
De hecho, este es el proyecto
Que tengo ya
Eso que veo en la estantería
¿Es una Nintendo Switch?
Sí, eso es una Nintendo Switch
Es mi Nintendo Switch
Es justamente
Es un proyecto bastante interesante
Con el que vamos a aprender
Bastantes cosas
Si sabes RIAG
Y si no sabes RIAG
Vas a aprender bastante de RIAG
Vas a aprender a hacer cositas en 3D
Además algo totalmente interactivo
Y además es un proyecto muy bonito
Porque es muy incremental
¿Vale?
Es bastante, bastante incremental
Sí, estaba dudando
Porque no sabía si estaba ahí
Entonces, nada
Luego, obviamente
Lo pueden tunear
Todo lo que quieran
Jugar
Con lo que quieran hacer
Y ya está
No sé nada de RIAG
¿Aún me sirve quedarme?
Sí, hombre
Yo creo que te sirve
Yo creo que sí
¿Qué limitaciones tiene el clon?
Hombre, limitaciones
Pues que lo que vamos a hacer
No tiene
Por ejemplo
No tiene multijugador
No tiene a lo mejor todas las físicas
No tiene los ataques
Pero, bueno
Que te puedes lanzar
Adiós
Ay, mira
Pensaba que
Ah, es que está hecho
Pensaba que me caería
Pero no
Ya veo que no
No
Ha llegado
O sea, tenemos un suelo
Lo que pasa es que es de 100%
Y ya está
Pero está
La física del suelo está
O sea, se podría hacer más grande y tal
Vida infinita
No, no usaré angular
Ego emperrones
Ya he dicho que va a ser con RIAG
De hecho, lo pone hasta en el título
O sea, que imagínate
Bueno
Pues nada
Muchas gracias a todos por pasaros
Así que vamos a empezar
No hay problemas con el copyright
Hombre
Los clones son
Qué copyright
Y qué leches
Bueno
Pues vamos a empezar
Desde cero
Muchas gracias a todos por las subs
Gracias Nicolín
Camilo Am
Sucustri
Manu Baglet
Héctor Daniel
Juanito Catulo
Muchas gracias a todos
Vamos a arrancar
Desde cero
Lo que he hecho ya
Para tener el proyecto
Ok
Es este
NPM Create
Bit Latest
¿Vale?
Con esto ya lo tendría
Todo lo que hemos hecho aquí
Solo que yo le he añadido
Una cosa
Le he añadido aquí
En Images
Le he añadido
Las imágenes que necesitamos
Para tener
Como las texturas
¿Veis?
Aquí tenemos las texturas
La puedo hacer más grande
Sería la textura esta
De lo que está sucio
Esto es el espejo
¿Vale?
El grass
Y aquí tendríamos
La madera
Bueno esto sería la madera
Y lo otro sería el tronco
¿No?
Esto sería madera
Y esto sería ya tronco
Directamente
Está raro ¿No?
El Tortillaland
No está mal
A ver
Yo nunca he dicho
Que odie Minecraft
He dicho que no me gusta
No me gusta
Porque estaría horas y horas
Y ya está
Sí, sí
Luego os comparto las imágenes
No os preocupéis
Aunque igualmente
Como esto está sacado
Del proyecto este
De Free Codecam
Ellos también tienen
El código hecho
Lo que pasa es que
Ellos lo hicieron
Con CreateRackUp
Yo lo voy a intentar
Hacer desde cero
Y bueno
Así lo podéis seguir
¿Vale?
Y lo voy a hacer con vid
Lo voy a hacer con las nuevas versiones
Hay algún pequeño cambio
Voy a hacer algunos arreglos
De cosas que yo he visto
Pero bueno
Aquí cada uno
Que lo haga como sea
Así que nada
Si quieren ver el vídeo
Este es el vídeo
Que está bastante interesante
También que lo explica
Desde cero
Son una hora y media
Y lo pueden hacer
Pero es en inglés
Y nosotros lo hacemos
Aquí en Castilla
¿Vale?
Pues venga
Vale
Pues yo ya he puesto
Las imágenes
¿Ok?
Así que vamos a darle cañita
A ver donde tengo yo
Un momento
Esto donde he dejado
Aquí
Vale
Pues lo primero
Que deberíamos hacer
Yo acabo de iniciar
El proyecto
O que ya le he puesto
Las imágenes
Con NPM CreateVit
Vit es un empaquetador
De aplicaciones web
Y es lo que estoy utilizando
Yo por mi parte
Si quieren utilizar
Otra cosa
CreateRackUp
Y tal
Yo creo que debería funcionar
O sea
No debería tener ningún problema
Pero yo he preferido
Utilizar este
¿Vale?
O sea
Que ahí cada uno
Que utilice el que quiera
Ahora
Vamos a instalar
Las dependencias
Que vamos a necesitar
Bueno
Voy a revisar un poco
El proyecto
Para que lo veas
Tendríamos aquí
El punto de entrada
De nuestra aplicación
El main.jsx
Que aquí
Pues estamos utilizando
Básicamente React
ReactDOM
Esto lo podríamos hacer así
Me gusta más
React React
Podemos quitar esto de aquí
¿Vale?
Y estamos diciendo
En este elemento
Me renderizas
Todo esto
Y aquí en aplicación
Vamos a crear nuestro
Clon de Minecraft
Para empezar
Una cosa que estoy viendo
También es que no tengo
El linter
Vamos a instalar el linter
Importante siempre
Instalar el linter
Al principio
¿Por qué?
Porque así nos evita
Unos cuantos problemas
¿Vale?
Así que instalamos el linter
Ya sabéis que a mí me encanta
Standard
Esto no debería tardar mucho
Y así ya lo pongo
Bueno
Mientras os voy explicando
Este es el punto de entrada
De nuestra aplicación
Luego el app.jsx
Sería lo que estamos viendo
Aquí a la derecha
Pues lo que vamos a hacer
Es básicamente
Lo vamos a cargar todo
Vamos a quitar todo esto
¿Vale?
Y voy a poner aquí
Minecraft
Miducraft
Miducraft
Le vamos a llamar
¿Vale?
Vamos a quitar el estado
Este
No lo necesitamos
Esto también lo quitamos
Esto por aquí
Guardamos
Bueno
Ya está
Ya hemos terminado
Muchas gracias a todos por venir
¿Qué pasa?
¿Os ha gustado?
Bueno
No hombre
No
Esto es solo principio
Vale
Ya hemos instalado aquí
El linter
Pues yo el linter
Para utilizarlo
Lo que siempre hago
Porque es como lo más fácil
Voy a quitar todos los carets
Ya sabéis que no me gusta utilizar
Los carets
Y vamos a utilizar aquí
SlingConfig
Extends
De
Barra
NoModulesStandard
Ok
Y ahora
Vale
Ya tengo el linter
Activado
Y me lo está solucionando todo
Perfecto
Aparte del linter
Otra cosa que necesitamos
Sería obviamente
Todo lo que tiene que ver
Con 3GS
3GS es una biblioteca
Que te permite construir
Cosas en 2D y en 3D
Utilizando la API de WebGL
Solo que tú
No te das cuenta
Que estás utilizando WebGL
WebGL es una API
Muy a bajo nivel
Que el navegador
Te permite acceder a tu GPU
Para hacer dibujos
Pues 3GS es una biblioteca
Que está por encima de WebGL
Y que te facilita un montón la vida
Así que vamos a instalar
Por un lado
React 3
Barra
Fiber
React 3
Barra
Drey
Vale
Que son como un conjunto
De utilidades
Y componentes
Que ya están preconfigurados
Que nos van a facilitar un montón la vida
Y también vamos a instalar
React 3
Barra
Canon
Canon
Que no es que sea canon
De que sigue la historia
Es canon
Porque
Es tema de físicas
Y lo vamos a utilizar
Obviamente
Pues para los saltos
Todo el tema de gravedad
Y esto
Para que tenga física
En nuestro juego
Así que
A ver si los he escrito bien
Esto debería instalarnos
Las dependencias que necesitamos
Y ya está
Mientras se van instalando
Voy a aprovechar
Para ver
Que más tengo que limpiar
Porque seguramente
Hay más cosas que limpiar
Por ejemplo
Aquí está importando
El index.css
Esto lo vamos a dejar
Pero voy a quitar
Todo esto
Todo esto
¿Vale?
Todo esto
No sirve para nada
Esto
También tengo dudas
Bueno
Lo vamos a quitar todo
¿Vale?
Y el app.css
Este
Esto lo vamos a eliminar directamente
Eliminamos el app.css
Y esto
Lo quitamos de aquí
¿Vale?
Le vamos a quitar
Todos los estilos
Y por ahora
Lo vamos a dejar así
Y luego iréis viendo
Los problemas
Que vamos teniendo
¿Vale?
Vais a ir viendo
Que tenemos algunos problemas
Conforme vamos iniciando
Como
La escena
Y todo esto
Pues vale
Lo primero que tenemos que hacer
Para tener nuestro juego
Básicamente
Es tener un canvas
¿Vale?
Un canvas es como
Donde vamos a pintar el juego
Y todo esto
Así que vamos a importar
Canvas
Desde
React3
Fiber
Y este canvas
Es lo que vamos a tener aquí
Canvas
Guardamos los cambios
Y vale
Ya ha empezado mal
Porque ya me dice
Que tengo que envolver esto
Bueno
Lo podemos poner
En un
Dip
Si vamos a ponerlo en un dip
Por si luego lo tenemos que estilar
O lo que sea
¿Vale?
Y el canvas
Vamos a ponerlo aquí
Bueno
Como podéis ver
Pues ahora mismo
No sale absolutamente nada
Pero lo que podemos empezar ya aquí
Es poner cosas
Por ejemplo
Le podemos poner un cielo
A nuestro juego
Así que vamos a poner
Sky
Y esto lo recuperamos
De
Drey
Que este tiene como
Diferentes componentes
Ya preparados
Ya veréis que tenemos
Algunos más que necesitaremos
Le vamos a poner un cielo
A nuestro juego
Mira
Vamos a ponerlo así directamente
¿Vale?
Pues podéis ver
Que no se ve absolutamente nada
Ah no
Ahora sí
Vale
Se ve esto
Que parece un cielo
Que está bastante bonito
Pero
Tenemos dos problemas
Como podéis ver
¿No?
Lo primero
Es que el miducraft este
Nos está molestando
Así que lo voy a quitar
Y por otro lado
Es que no está recuperando
Como todos los
O sea
Está ocupando solo un espacio
Muy pequeño
De nuestra página
Necesitamos que ocupe
Necesitamos que ocupe todo el espacio
Así que vamos a ir al CSS
Y ya vamos a poner
Primero en el asterisco
Vamos a poner el box sizing
Con border box
Vamos a adquisar HTML
El body
Y el root
Porque el root
Es donde se está renderizando
Nuestra aplicación
Si lo miramos aquí
Index HTML
¿Ves?
Aquí dentro
Se está renderizando
Nuestra aplicación
Pues este div
Vamos a hacer que tenga
Los mismos estilos
Vamos a ir un poco a saco
Que sea el width al 100%
La altura al 100% también
El margen a cero
Porque fíjate que aquí
Hay un espacio
Bueno, no sé si lo ves
Bueno, sí que se ve
Bueno
Me estoy dando cuenta
Que sale lo de las suscripciones
Voy a moverlo
O voy a quitarlo, ¿vale?
Voy a quitar lo de las suscripciones
Para que no os moleste
Que luego
Si no me
Os quejáis
Es que no veo tal
Es que no veo lo otro
Bueno
Pero podéis suscribir igual, ¿eh?
Bueno, pero lo quito
Y así lo veréis más limpio, ¿vale?
Ok
Vale
Pues este es el pequeño cielo
Midu, no veo
Pero si lo acabo de quitar, ¿no?
Ahora
Bueno, igualmente
Es muy poquito
Lo que se ve, ¿eh?
Es muy poquito
Ahora lo vamos arreglando
Bueno, ahora ya
Veis que ahora sí que
Tapa al menos todo lo que
Han quitado el margen
Bueno, vamos a quitar el padding
En nuestro juego
No vamos a permitir
Que se pueda seleccionar
Ya os dije el otro día
Que esto, bueno
A veces tiene sentido
Pues este es una de esas
De esas veces que tiene sentido
Y vamos a hacer un overflow hidden
Esto hasta aquí
Pero obviamente
Lo que es el body
Vamos a hacer que tenga
Un position fixed
Y lo que vamos a intentar
También vamos a poner overflow hidden
Bueno, este no hace falta
Overflow hidden
Porque ya lo tenemos
Eh...
Y cómo hacemos
Esto para que esté
Ta, ta, ta, ta, ta
A ver
Podríamos...
Ay, es que he puesto aquí
Body
Podríamos hacer esto
Y esto creo que hay que reiniciarlo
Ah, pues no
Me ha dejado fatal
Estoy importando esto, ¿no?
A ver
Width 100
Top 0
Bottom 0
Left 0
Right 0
Vale
Pensaba que esto
Iba a hacer que
Es que encima va a pedales
No sé
No sé si está petando
Está bien el stream
No peta, ¿no?
Vale, vale
Digo, a ver si iba a estar petando
Y tal
Vale, pues pensaba que con esto
Íbamos a tenerlo
De que nos iba a pillar ya
Todo el espacio que necesitábamos
Pero ya veo que no me lo está pillando
Así que...
A ver
Vamos a ver
El width lo he puesto
El margin es 0
El user select lo he puesto también
Esto
Podríamos poner overflow hidden
Pero este tampoco tiene mucho sentido
Phone family
Pues no sé qué me falta
No, el canvas ya lo he puesto, ¿no?
El canvas lo he puesto primero aquí
El canvas ya lo he puesto
Puede ser que sea por el dip este
Es por el dip
Es por el dip que he puesto, ¿vale?
Así que vamos a poner directamente el canvas
Claro, porque el dip no estaba pillando
Claro, que tenía sentido
Ya antes lo he pensado
Que he dicho
Claro, si pongo un dip
Bueno, pues no hace falta
Que envolvamos nuestra aplicación con el dip
Y así ahora sí que está
Ya decía yo que digo
¿Por qué esto no está pillando?
Bueno, ahora sí que ya tenemos
Todo nuestro cielo aquí
El cielo pues lo podríamos modificar un poquito
Por ejemplo, pues podríamos tener
Como decirle que el cielo
Que la posición del sol
Está en algún sitio, por ejemplo
Aquí
Entre las propiedades, ¿ves?
Tenemos un montón de propiedades
La distancia, inclinación
La sun position
Y aquí le podríamos decir
¿Cuál es la posición que tiene que tener el sol?
Pues le podemos decir
El 100, 100, 20
O le podemos
Podemos ir cambiando aquí
No sé si vamos a tener que
No sé, voy a tener que reiniciar
¿Sabes?
O sea, cada vez que haga un cambio
Pero no me está cambiando
La posición del sol
Ahora mismo
Sun position
0, 0, 0
Ahora
¿Vale?
Ahora sería esto noche total
¿Vale?
Aquí sería como un atardecer
Ahora sí que está cambiándolo
¿Vale?
Vale, pues lo dejamos así
Que es un cielo como clarito
La verdad es que es sorprendente, ¿no?
Que el cielo clarito
Es como el que sale por defecto
Bueno, es casi
Casi
Es parecido
Es parecido
Pero bueno, ya veis que podéis cambiar
Como la posición del sol
Y dependiendo de la posición del sol
Pues vais a tener de noche
Vais a tener atardecer
Ya sabéis un poco así como
Lo hacen los juegos
También vamos a añadir ya
Como una luz de ambiente
Hay algunos elementos
Que no son componentes
Son elementos
Que ya funcionan dentro del canvas
Por ejemplo, aquí tenemos
El de ambient light
¿Veis que ya aquí incluso aparece?
Ambient light
Y no hace falta
Ni siquiera que los importéis
Sino que simplemente
Estos elementos
Como ya funcionan
Dentro del React 3
O sea, del 3
De la biblioteca de 3
Que ya los tiene
Y son así
En minúscula
¿Vale?
O sea, no olvidéis
Hay algunos como el me
El ambient light
Hay unos cuantos
Que funcionan tal cual
Y no hace falta
Que los importéis
Así que tened cuidado
Con esto
Esto es lo que podéis mirar
Son los elementos
Que tenéis de 3
Que están disponibles
Y ya está
Y uno de ellos
Pues se dan bien light
Y aquí le podemos
Decir la intensidad
Vamos a decirle 0,5
Y ya está
Esto ahora
Esto ahora
No tiene mucho impacto
Pero luego
Cuando pongamos justamente
Como los diferentes
De hecho, mira
Os voy a enseñar
¿Ves?
Aquí lo tenemos
Es una luz
Que ilumina globalmente
Todos los objetos
Conforme vayamos poniendo objetos
Pues tendrá más sentido
El hecho de tener
Un ambient light ahí
Un ambient light
Me gusta
Porque es como el nombre
De las bombillas
De Panasonic
¿Vale?
¿Hasta ahora todo bien?
A ver
¿Hasta ahora todo bien?
Supongo que el canvas
A ser un componente
Debe tener su propio CSS
¿Con cuánto hay esperanza
De hacer componencia
De beber cerveza?
A partir de que tengas 18 años
¿Todo bien?
¿Todo correcto?
Sí, todo bien
¿Por ahora bien?
¿Todo?
Sí, sí, sí
¿Podrías hacer
A ver Petronini
Ahora no estamos con ello
¿No?
Ah, podrías hacer
Git commits al project
Para ir corriéndolo
En local nosotros también
Hostia, es que
Voy a tardar mucho
¿No?
Petronini
Haciendo todo esto
Vale
El problema es que
Si no estás talando
Madera
Vale, pues nada
Continuamos
¿Vale?
Entonces
¿Qué es lo siguiente
Que necesitamos en un mundo?
Otra cosa que necesitamos
En cualquier mundo
Sobre todo en el planeta Tierra
Serían las físicas
¿Vale?
Así que vamos a poner
Las físicas
Y estas las cargamos
De React 3
Y veis que tenemos
Canon, Dray Fiber
Pues Canon
Porque hemos dicho
Donde tenemos las físicas
Así que las físicas
Que las he escrito mal
Physics
Esto lo vamos a poner aquí
Y aquí
Vamos
Ahora no vamos a tener nada
Pero aquí
Es donde todo
Lo vamos a envolver
Vamos a tener aquí
Las cajas
Nuestro personaje
Todo
Todo
Más que nada
Para que le afecte
La gravedad
Las físicas
Que se choque
Con las cosas
Y vas a ver
Que es súper fácil
Porque no tienes
Que
O sea
No tienes que hacer
Absolutamente nada
Para que tengan físicas
Así que
Vale
Pues con esto ya está
Ahora
Ahora mismo
Es un poco aburrido
Porque solo estamos
Viendo como el cielo
Que a ver
El cielo no está mal
Pero bueno
Yo creo
Ah mira
Antes de esto
Para explicarte lo de las físicas
Te voy a enseñar una demo
Que está muy chula
Esta demo
Esta demo que veis aquí
Mira
Esta demo
Está hecha justamente
Con el React 3 Canon
Es una demo
Bastante sencilla
Pero está súper chula
Y si veis el código
Tampoco es tan complicado
Así que bueno
Si os creéis
Bueno tiene un montón de demos
Por ejemplo este
También está bastante chulo
Que puedes agarrar cosas
Y tirarlas
Y hacer
Mira
Y además
Fijaos que tiene las sombras
Y todo
La verdad es que
He alucinado mucho
Con las posibilidades que tiene
Y lo fácil que es hacerlo todo
Así que
Esto está hecho justamente
Con React 3 Canon
Todas las físicas que veis aquí
Están hechas con eso
Vale
Que son un poco bestias las físicas
Pero bueno
No está mal
Eso es sencillo
A ver
Si ves el código
Alucinas
Porque realmente
Tampoco es tan complicado
Sinceramente
O sea
Es sorprendente
Bueno
Vamos a ponerle un suelo
A esto
Porque si no
Va a ser un poco raro
Así que vamos a components
Y en components
Vamos a crear un ground.jsx
El ground.jsx
Lo primero que queremos hacer
Es como crear un plano
¿No?
O sea
Crear como un plano
El suelo al final
Es como un plano
Donde vamos a poner las cosas
Así que vamos a importar
El hook de use plane
De React 3 Canon
O sea
Todo lo que tiene que tener físicas
Pues ya está
Vamos a llamarle ground
También
Export function
No hace falta que tenga props
Y vamos a utilizar
Mira
Madre mía
¿Pero esto qué es?
Me está diciendo
Me está dando
Toda la solución
Me la está dando ya
Me la está dando ya
Increíble
De Geekhacko Pilot
Vale
Use plane
Está muy bien
Porque Geekhacko Pilot
Nos ha dotado la solución
¿Por qué?
El use plane
Recibe
También como
Un estado inicial
En este caso
Vamos a tener
Como una
Un objeto
Y el objeto
Va a tener
Por un lado
La rotación
¿Vale?
Que por ahora
Le vamos a poner
0, 0 y 0
Y por otro lado
La posición
Que va a tener este plano
0, 0, 0
¿Ok?
Aunque Geekhacko Palo
Ya nos estaba haciendo
Ahí más trabajo
Del que deberíamos
Y vamos a devolver esto
Y vamos a utilizar
El mesh
¿Vale?
¿Qué es el mesh?
El mesh
El mesh no es el mes
De febrero
Diciembre
O lo que sea
Sino que es la malla
Es una malla
En la que básicamente
Mezclas tanto geometría
Como textura
Y entonces
Con eso
Con esa malla
Pues puedes
Como crear
Un objeto visual
O le puedes pegar
Algo
¿No?
Para que se vea
Y puedes posicionarlo
Puedes ponerle la textura
Y ya lo tendríamos
En este caso
Aquí
Aquí se me ha olvidado esto
Vamos a ponerle
Esta mesh
Le vamos a decir
Que tenga esta referencia
Que hemos creado aquí
¿Vale?
Con el use plane
Nos está creando una referencia
Esta referencia
Se la pasamos a este mesh
Y ahora lo que necesitamos
Es decirle tanto
Que geometría
Vamos a utilizar
En esta malla
Y también
Que material
Es el que va a dibujar
Así que vamos a utilizar
La geometría
Que es plana
Porque tiene
Diferente geometría
¿No?
Un círculo
Un cuadrado
Un rectángulo
Lo que sea
Pues vamos a utilizar
La geometría
Que es plana
Esto
Le hacemos el attach
A la geometría
¿Vale?
Es donde se tiene
El mesh
Necesita geometría
Y material
Por lo tanto
Le decimos que
Este plan buffer geometry
Se tiene que
Atar
A la geometría
De la malla
¿Vale?
Y luego aquí
Tendríamos los argumentos
Los argumentos
Básicamente son los parámetros
Que se le va a pasar
A este elemento de aquí
Y ahora
Aquí lo que le vamos a decir
Es cuánto
Mide
Esta geometría
Le vamos a decir
Que es un 100%
¿Vale?
Luego esto
Si lo quieres hacer
Más grande
Más pequeño
Pues como tú quieras
Y ahora le tenemos que decir
Cuál es el material
Luego haremos las texturas
Pero ahora mismo
Vamos a utilizar
El mesh standard material
Esto es lo que se va a unir
Al material
Y el color
Pues le vamos a decir green
Y ya está
¿Vale?
Así que con esto
Ya tendríamos un suelo
Bueno, green no
Vamos a ponerle brown
Que tiene más sentido
Para el suelo
Bueno, green tiene sentido
¿No?
Porque es al césped
Vamos a ponerle green
Y ya está
Vale
Entonces
Esto sería el suelo
Esto sería el suelo
Ahora
El suelo
Tenemos que pensar
Vale, pero el suelo
¿Dónde va?
El suelo
Va al lado de
De la iluminación
¿Dónde iría?
A ver
El suelo
Al suelo le tiene que afectar
La gravedad
Por lo tanto
Bueno, la gravedad
Y todas las físicas
Así que vamos a poner
Que el ground
Va aquí
Vamos a poner el ground
Lo importamos
De los componentes
Lo guardamos
Y no se ve
Ah, mira
Sí, sí que se ve
Se ve pero a lo bestia
Además, ¿no?
Claro, ¿por qué se ve así?
Pues porque realmente
Como está el suelo puesto
Ahora mismo
Lo tenemos como
En nuestras narices
El suelo
Y no tenemos una cámara
Tampoco en la que
Nos podamos mover
Ver cómo se está viendo esto
Si se está viendo
Debajo nuestro
Si se está viendo arriba
Si se está viendo a la derecha
O sea, no tenemos
Ni puñetera idea
Lo mejor
A ver, tendríamos
Diferentes cosas
Para hacer esto
Yo que sé
Podríamos hacer aquí
Creo que si esto
A ver
Podríamos ir rotándolo
Claro, pero si lo rotamos
Demasiado ya
Si le ponemos
Un mathpi
A ver si lo podríamos ver
A ver
Menos dos
Nah, que va
Mira, lo mejor que podemos hacer
Para poder ver
Más o menos
Para que nos podamos hacer una idea
Es intentar ponerle una cámara
¿Vale?
Y le vamos a poner
Una cámara en primera persona
Que esto está súper interesante
Porque muchas veces
En los videojuegos
Incluso decimos
Wow, la cámara en primera persona
Se mueve
Y va a todos los sitios
Bueno, pues vamos a hacer
Un first point of view
Que básicamente
Es que vamos a poder
Controlar la cámara
Con el ratón
Y así podemos ir viendo
Lo que nos está rodeando
¿Vale?
Así que vamos a crear
Otro componente aquí
Que le vamos a llamar
First point view
.jsx
¿Vale?
Y aquí vamos a importar
Del Drey
El point
Point
Point
Point
Lock
Lock controls
¿Vale?
El pointer
Lock controls
Esto lo sacamos
De React3Drey
Que ya os he dicho antes
Que tenía un montón
De componentes
Que nos va a facilitar la vida
Y vamos a tener aquí
El de use3
Necesitamos el hook
De React3Fiber
Que de aquí vamos a sacar
Tanto la cámara
Como el elemento
En el que estamos renderizando
Ahora mismo
Todo el canvas y tal
Y como lo tenemos aquí
En este hook
Pues lo vamos a necesitar
Ahora vamos a exportar
Un componente de React
¿Y qué utilizamos aquí?
Vale, muy bien
Tenemos que sacar la cámara
YGL del use3
Me encanta
Y hackopilo
Porque lo está haciendo
Ya todo por mí
Y aquí vamos a renderizar
El pointer
Locks control
Y le pasamos
Como argumentos
¿Vale?
Como argumentos
Le tenemos que pasar
Por un lado
La cámara
Y por otro lado
El elemento
Con el que estamos trabajando
Y con esto
Ya lo tendríamos
Este first point of view
Tenemos que renderizarlo
Pero ¿Dónde tenemos que renderizarlo?
Vamos a nuestra app
Y claro
¿Lo tenemos que poner en las físicas?
Pues no
No, porque no tiene sentido
¿No?
Así que vamos a ponerlo
Aquí
Fuera
No tiene sentido
Que le afecte la gravedad
A nuestra cámara
O sea
Tú no mueves el ratón
Y de repente
La gravedad le afecta
Así que tenemos que evitar
Que le afecte cualquier física
Aquí nos da un error
Pascal Case
Vamos a poner este nombre
No le gusta que lo hagamos
Todo en mayúscula
Pues le ponemos este nombre aquí
Lo guardamos
Y ahora
¿Vale?
¿Veis?
Ya estoy moviendo
La cámara
Con mi ratón
¿Vale?
O sea que ya puedo mirar
A mi alrededor
O sea que al menos
No me puedo mover
Obviamente
Todavía no
Pero ya puedo ver
El plano
O sea el suelo
Que he creado
Ya lo puedo ver
Y me puedo mover
Me puedo mover
Bueno
Algo es algo
Para salir
Ya ves
Le tenéis que dar un clic
Entonces podéis mover el ratón
Y le podéis dar a esc
Para salir
De esa vista
¿No?
En la que se mueve el ratón
Y todo esto
Pero bueno
Esto sería lo más parecido
A la tierra plana
¿No?
Que justamente
Tiene muchos
Tierra planistas
En la cabeza
¿Vale?
¿Qué podemos hacer
Con esto?
Obviamente
Necesitamos de alguna forma
Que
No sé
Que el ground
Tenga sentido
Bueno
Podríamos hacer dos cosas
No sé qué queréis hacer
¿Qué podríamos hacer primero?
Podríamos hacer por un lado
O
Rotarlo
Bien
O sea
Vamos a rotarlo primero
Y luego le damos la textura
Primero tendríamos que rotarlo bien
En la rotación
Y en la posición
Que básicamente
He ido muy a saco
Ahí
Es un array
De tres elementos
0, 0, 0
Pero no os he explicado
Que es cada uno
A ver
Esto lo que sería es
La X
El eje X
El Y
Y el Z
Esto es porque
En cualquier punto 3D
Cuando estamos hablando de 3D
Tenemos este eje
¿No?
El donde está
La X
La Y
Pero también tenemos la Z
Porque eso no sería 3D
Sería 2D
Si sería la X y la Y
Solo sería 2D
Pero como es 3D
Tenemos que tener
Pues este sistema
De tres puntos
Y esto sería lo mismo
Con el tema de la rotación
¿No?
Aquí lo tendríamos
Posición y tal
Ahora
Este tipo de vector
Porque son como vectores
Tened en cuenta
Que no solo puede ser
La posición
Sino que también puede ser
La dirección
¿No?
O sea tú
Cuando tienes
Por ejemplo
La rotación
Estaríamos hablando
De la dirección
No tanto de la posición
Y la dirección
También la puedes hacer
Justamente
Puedes dibujar una flecha
Como una línea
Que te indique la dirección
La puedes hacer justamente
Gracias a este
Estos tres puntos
Así que en la rotación
Estaríamos viendo
Un poco lo mismo
En este caso
Como queremos
Que se
Se ponga
En un plano
En el que esté
Totalmente horizontal
Tendríamos que empezar
A jugar con el Mazpi
¿Qué pasa?
Esto es
Como es una redonda
¿No?
Sería una esfera
La cámara
Entonces tendríamos
Que ir girando
Y entonces
Para hacer
180 grados
Estaríamos haciendo
Pi completamente
La mitad
Justamente
Lo dejaría
Pues
Por la mitad
¿No?
90 grados
Que es justamente
Lo que queremos
¿No?
Así que tendríamos
Que dividir
Pi entre dos
Si te cuesta
La geometría
Que a mí me cuesta
Un poco
¿Vale?
Pues no te preocupes
Porque la verdad
Que esto normalmente
Lo vas a ver
En internet
Si te pones a buscar
Te pones a buscar
Y dices
¿Cómo hago
Que en una esfera
Calcular?
Lo vas a encontrar
En un momento
Y no te lo tienes
Que saber de memoria
Ni a veces
Tienes que entenderlo
Porque o te lo hace
Directamente
G-Hacko Pilot
O hay un montón
De ejemplos
Que ya te lo explican
Y ya está
Pero bueno
Te lo quería explicar
Más o menos
Para que lo tengas en cuenta
¿Vale?
Aquí en este caso
Ya vemos
Que no sé
Donde me la he dejado
Donde me la he dejado
Pero creo que es que
Tiene que ser al revés
Y la posición
También deberíamos ponerla
Un poquito por debajo
En el eje de la I
Deberíamos ponerlo
Un poco por debajo
¿Vale?
Y ya tendríamos aquí
¿Vale?
Ya tenemos aquí
Nuestra cámara
Y ahora sí que parece
Que tiene un poquito
Más de sentido
En la que vemos
Que estamos
Como si estuvieramos
Encima
Es como si estuvieramos
Encima del suelo
¿Vale?
Obviamente ahora
Con esto azul
Pues esto verde
Pues seguramente dirás
Bueno
No me creo mucho
Que esto se parezca
Se parezca al suelo
Entonces lo que vamos a hacer
Es cargar estas texturas
Que tenemos aquí en images
Que teníamos el grass
¿Vale?
Esta textura
Vamos a ponerle
Esta textura al suelo
Y vas a ver que ahora
Pues tendrá más sentido
Así que en images
Vamos a crear aquí
Un images.js
Y lo que vamos a hacer
Es importar
El grass image
From grass.jpg
¿Vale?
Esto lo que va a hacer
Es devolvernos
De alguna forma
La ruta de la imagen
Que vamos a necesitar
¿Ves?
De hecho me lo está diciendo
Está buenísima
Esta extensión
Que te dice la imagen
Para ver si la has hecho bien
Y vamos a exportar
El grass image
Luego lo haremos
Esto con todas
Pero bueno
Por ahora pues lo hacemos así
Esto también lo podríais
Exportar en una línea
Podríais hacer
Default as grass image
Por ejemplo
Podríais hacer esto
Y ya estaría
Lo que os guste más
Si os gusta más así
Pues lo hacemos así
¿Qué más?
Vale
Ahora que tenemos la imagen
Lo que tenemos que hacer
Es crear como la textura
Así que vamos a crear
Aquí en images
También las textures
Estas
Y vamos a importar
El grass image
Justo del archivo
Que hemos hecho
Y aquí
Tenemos que cargar
La textura
Así que vamos a importar
El texture loader
Texture loader
No sé
Si está texture loader
Yo creo que debería estar
No
Ah
Puede ser que no
Ah es que no he instalado
Three
Vale
Perdón
No he instalado
La dependencia
Más básica
Que es la de Three
Porque pensaba que venía instalada
Con
Justamente con lo de React Three
Pero no
Hay que instalar la parte
¿Vale?
Ahora se supone que sí
No sé si
Pues me da la sensación
Que ya está instalada
Porque
A ver
Texture loader
Texture
Ahora sí que sale
Texture loader
Vale
Ahora sí que sale
¿Vale?
Three es la biblioteca
De javascript pura
Que está utilizando
React Three
Y claro
La necesitamos
Porque hay algunas cosas
Que se pueden hacer
Directamente con Three
Como cargar una textura
Que no tenemos que hacerla
En React
Así que
Ahora que tenemos esto
Del texture loader
Pues nada
Vamos con el grass image
Que es el que ha importado
Vamos a crear nuestra textura
Ground texture
Hacemos un new
Texture load
Texture loader
Punto load
Grass image
¿Vale?
Y con esto hemos cargado ya
Nuestra imagen
Ahora
Bueno
Vamos a ver
Cómo quedará esto
Porque tiene sus cositas
Pero vamos a darle
Export
Ground texture
Porque habrá cosas
Que tenemos que cambiar de aquí
Esta textura
La importamos aquí
Así que vamos a importar
El ground
Texture
¿Vale?
Y ahora aquí abajo
Que teníamos justamente
Antes el color
Ahora le podríamos decir
El material
No
La textura
No
¿Cómo era esto?
Ah no me acuerdo
Menos mal que tengo por aquí
Apuntado todo esto
Porque si no
Pero esto era del
Ah no
Es
Map
Hay que mapear la textura
¿Vale?
Así que le ponemos aquí
El ground texture
Lo guardamos
Y
Vale
Bueno
Alguien me dirá
Bueno ha cambiado algo
Ha cambiado algo
¿Verdad?
Ha cambiado algo
De hecho se ve que algo
De hecho se ve que algo ha cambiado
Pero no parece todavía
Que es la textura de Minecraft
¿Por qué pasa esto?
Porque en realidad
Lo que he hecho
Es que a todo el suelo
De 100%
Le he puesto
La imagen
¿Sabes?
Le he puesto una vez la imagen
Entonces la imagen
Se ha estirado
Y se ha puesto
En todo el suelo
Lo cual
Pues obviamente
No tiene mucho sentido
Lo que tenemos que hacer
De alguna forma
Es asegurarnos
Que esta textura
Pues se repite
¿No?
De que realmente
La podemos tener
En todo el suelo
Lo que voy a hacer por aquí
Vamos a poner
GroundTexture.repeat.set
Y vamos a poner
100% veces
¿Vale?
Guardamos
Vale
Ahora parece
También que ha mejorado algo
Pero de nuevo
No se ve
No se ve muy bien
¿Por qué?
Pues porque
Por un lado
Se sigue estirando
Y no le hemos dicho
Que se tenga que repetir
¿De qué tiene miedo?
Es Minecraft
Versión
Es mosaico
Verso estirado
Totalmente
Totalmente
Mido
Puedes ponerte debajo
El explorador
Pero que más da
Hombre
Si todavía no se ve
Nada importante
¿No?
Debajo
O sea
Lo podéis ver bien
¿No?
Vale
Entonces
Vamos con el tema
De las texturas
Antes de que se me olvide
Porque esto
Si no
La lío parda
Texturas
Vamos otra vez
Aquí a texturas
Vamos a hacer una cosa
Con el GroundTexture
Con la textura del suelo
Vamos a decirle
Vamos a definir
Que la
Como tiene que ser
El mapeo
Tanto en horizontal
Como en vertical
Y le vamos a decir
Que se tiene que repetir
Para eso
En el GroundTexture
Le tenemos que decir
Que de forma horizontal
Y por eso es
Grab S
Ah mira
Que interesante esto
Que se puede hacer
Dos veces a la vez
¿Vale?
Le vamos a decir
Repeat Grapping
Y esto lo importamos
De 3
Y esto mismo
Lo hacemos
También
Para el vertical
¿Vale?
Y ahora ya empieza
A verse mejor
O sea
Ya como que se está repitiendo
Ya empieza a verse
Pero no tiene
Ese estilo
De Minecraft
Que nos gusta
Esto es porque
Cuando
Esto pasa lo mismo
En CSS
Y es que cuando
Tú en CSS
Pues intentas hacer
Una imagen
Grande
Una imagen
Que es pixelada
La intentas hacer grande
Como que se ve borrosa
Y eso es por el algoritmo
Que tiene a la hora
De intentar mejorar
La imagen
Pero claro
A nosotros nos está haciendo
Esto horrible
Que no es lo que queremos
Así que lo que vamos a hacer
En este caso
Vamos a poner aquí
GroundTexture
Midu puedes ponerte
Debajo del escritorio
Pero si ahora
¿Qué más da?
Si ahora mismo
Más o menos se ve
¿No?
Más o menos
¿Qué más da?
No entiendo
A ver
Vamos a quitar esto
Por un lado
Voy a moverme
Voy a moverme
Aunque no sé
O sea es que
Si se ve
Debajo de la mesa
Si si ya te digo
Me voy a tener que poner
A ver
Voy a ponerme aquí
No sé
Luego me diréis
Es que no veo
Las carpetas
Es que siempre
Me vas a decir algo
Si si
Mejor me pongo
La cocina
Directamente
Vale
Entonces
Lo que le tenemos
Que decir es
¿Cuál es el filtro
Que tiene que utilizar
A la hora de
Mostrar la imagen?
Y aquí hay diferentes
¿Vale?
Uno de ellos
Es el nearest filter
Que básicamente
Lo que hace
Es intentar
Agrandar la imagen
Y mantener los píxeles
Que están más cerca
Entonces lo multiplica
Digamos
Así que vamos a guardar
Los cambios
Y ojo
Ojo
Que esto ya
Si que tiene buena pinta
Ojo
Bueno ya tenemos el suelo
Ya al menos
Tenemos el suelo
Que si que se parece
Bastante
Esto mismo
Que he hecho aquí
Con el ground
Y todo esto
Esto lo debería hacer
Con todas las
O sea aquí debería hacer
Todas las imágenes
Mejor ponte en el cielo
Que eres un sol
Oh que bonito
Que bonito
Increíble
Vale el grass ya lo he hecho
Tenemos el glass
Glass image
El wood image
Vale esto lo tendríamos que hacer
Con todas las imágenes
Luego lo tendremos que hacer
Porque si queremos utilizarla
De hecho
De hecho voy a aprovechar
Ya que estamos aquí
¿No?
Vamos a hacer
Ta ta ta
Vale este sería
El ground
Ground
Grass
Bueno
No grass
Bueno si
Grass texture
Grass image
Este sería
Ground texture
Dirt texture
Dirt texture
Tendríamos aquí
El lock
El lock
Vale
Así ya tengo
Todas las imágenes
Aquí preparadas
¿Vale?
El glass
El wood
Este sería
El glass
Y este sería
El wood
¿Vale?
Y así tenemos todo
Y vamos a
Exportar todas
El grass texture
El dirt texture
El lock texture
El glass texture
Y el wood texture
¿Vale?
Así ya lo tenemos todo
Exportado
Perfectamente
En todos
Obviamente
Esto mismo
Bueno podríamos haber hecho un array
Pero bueno
No pasa nada
Al menos
Esto lo tenemos que hacer aquí también
O sea
Esto que hemos hecho aquí
Lo tenemos que hacer para todas
O sea
Esto lo tenemos que hacer
Para el grass texture
Todos queremos que se vea
Como pixelado
O sea que nos tenemos que asegurar
Que esto pasa en todas
Lock texture
Glass texture
Luego si tenemos tiempo
Le hacemos un refactor
¿Vale?
Para no repetir código
Pero por ahora
Lo dejamos así
Y ya está
¿Vale?
Me he cargado algo
Me he cargado algo
No sé que me he cargado
Pero algo me he cargado
Aquí no
Algo me he cargado ya
Images
Provide and export name
Dirt image
Vale
Ah
Vale
Ya está
Dirt
Esto es lo que pasa
Dirt
Glass
Es que no
No estaba
Exportando
Cuidado que esto es PNG
No estaba exportando
Las imágenes
Que también tenemos que hacer
Es un poco rollo
Pero
Hay que hacerlo
Grass
Wood
Y creo que ya está
¿No?
3, 4, 5
3, 4, 5
Vale
Ahora
Ahora sí que debería funcionar
Vale
Hostia
Ha me dado un 500
File to import
Wood.jpg
Vale
Este es PNG
Y ahora
Ahora sí que funciona
Bueno
Ahora con esto
Ya podemos continuar
Con nuestro
Maravilloso
Mundo de Minecraft
¿Ok?
¿Qué tal?
¿Todo bien por ahora?
¿Cómo lo lleváis?
¿Os estáis enterando?
¿Tenéis alguna duda?
Estrella que viaja por el universo
¿Todo bien?
Explicado por ti parece un juego de niños
Pero hacerlo por propia cuenta
Es como pillarse los dedos con la puerta
Bueno a ver
Ya lo he dicho yo antes
Yo lo he sacado esto de FreeCodeCamp
No es que yo me lo he inventado esto
Yo lo estoy intentando explicar
Lo mejor que lo he entendido yo
Y ya está
Pero
Ya veis que
Hay un vídeo donde lo hacen
Hay una guía entera
O sea que no
No es cosa mía
Vale
Ya tengo la textura del suelo
¿Qué es lo que podríamos?
Podríamos hacer el personaje
Al menos
Que el personaje se mueva hacia adelante
¿Vale?
Así que
Vamos a quitar
Todo
Voy a cerrar todo esto
Y vamos a crear aquí nuestro player
Para que al menos se mueva para adelante
Y a partir de ahí
Pues ya veremos lo que
Lo que hacemos
¿Vale?
Vale
Export
Const
Player
Y
Aquí tenemos que poner
Primero
Vamos a recuperar la cámara
También de Youth Tree
Luego
Vamos a crear una esfera
A ver
No es muy importante
Normalmente en los videojuegos
Igual sería más importante
El hecho de tener como
No sé
La figura
O la forma
Del personaje real
Pero nosotros vamos a crear una esfera
Que va a ser nuestro personaje
Porque bueno
Así se va a poder mover esta esfera
Y lo importante es que va a llevarse la cámara
Cada vez que se mueve la esfera
Y ya está
Y con esto vamos a tener suficiente
Así que vamos a tener
La referencia de esta esfera
Y la API
Para ver todo lo que
Por ejemplo
Para poder moverlo
Para poder suscribirte
A lo que sea
Y vamos a decir
Que la masa
Que tiene la esfera
Es de 1
¿Vale?
Esto es importante
Que lo que tiene que devolver
Es un objeto
Que describa
¿Vale?
La masa
No sé por qué no me sale eso
Pero bueno
Masa
Vamos a decir
Que es de tipo dinámico
Y la posición
Que va a tener
Le podemos poner
0, 0, 0
Pero el problema
Es que si le ponemos
0, 0, 0
Como hemos puesto
El ground
En menos 0, 5
Puede ser
Que se quede ahí
Clavado
En mitad del suelo
Lo podemos poner
Por ahora
Bien arriba
No sé
Lo vamos a poner a 5
Luego
Esta es la posición inicial
Que va a tener esta esfera
Que va a ser el personaje
Y luego vemos un poco
Lo vamos ajustando
¿Vale?
Porque esto
Ya os digo
Que esto es la X
Esto es la Y
O sea
Lo vamos a poner bastante arriba
Y esto sería la Z
¿No?
Como la profundidad
Por ahora lo ponemos
Bastante arriba
Ya veremos como de arriba está
Y ya nos preocuparemos
Y lo que vamos a renderizar
Con esto
Va a ser un mesh
Le utilizamos la referencia
Y ya está
Ahora
¿Para qué queremos la cámara?
Justamente
¿No?
Vale
Lo que queremos
Es que cada vez
Que haya un frame
Vamos a querer escuchar
El teclado
Vamos a querer ver
Si estamos pulsando
Hacia adelante
Hacia atrás
Izquierda
Derecha
Lo que sea
¿No?
Pero ahora
Sería como ir demasiado rápido
Entonces
En lugar de eso
Lo que vamos a hacer
Es que cada vez
Que hace un frame
Lo que vamos a hacer
Es que vaya hacia adelante
Y luego más adelante
Después nos preocupamos
De cómo hacer todo lo demás
¿No?
Entonces vamos a copiar
La posición de la cámara
Y para ello
Vamos a utilizar
Un vector3
Un vector3
Justamente es lo mismo
¿No?
Podemos crear
Este tipo de array
Pero con
Con diferentes métodos
Que tiene
Hay una clase
Que puedes crear
Una instancia
Del vector3
Que es justamente esto
También
La misma
Que puedes indicar
Una posición
Una dirección
Y nosotros
En este caso
Pues queremos
Una posición
Así que vamos a decirle
Que este vector3
Vamos a recuperar
Cuál es la posición actual
Pero ¿De dónde sacamos
La posición actual
Que tenemos?
Pues nos tenemos
Que suscribir
¿No?
O sea
No podemos sacar
La posición
Ahora mismo
De ningún sitio
Porque no tenemos
La posición
De ningún sitio
¿Dónde lo podemos saber?
Pues la esfera
Si os fijáis
Que la esfera
Por cierto
No me ha
No me ha hecho
El import
De la esfera
Tendría que ser
Aquí
Ahora
Del canon
Ahí está
La esfera
Tiene una API
Y en la API
Te puedes suscribir
A los cambios
¿Y cómo te suscribes
A cualquier API
Que tenga eventos?
Pues lo haríamos
Con un UseEffect
Por lo tanto
Esta posición
La vamos a poder sacar
Suscribiéndonos
A esta API
Para saber
Cuando se está moviendo
O si tiene una velocidad
Y hacia dónde
Está dirigiéndose
De esta forma
Nuestra cámara
Va a seguir
La posición
Que tenga nuestro personaje
Esto es súper importante
Porque si no
Se movería el personaje
Y la cámara
No se movería
Y si piensas
En un juego
En primera persona
Siempre que se mueve
El personaje
La cámara
Está pegada
Al personaje
Por lo tanto
Queremos que la cámara
La posición de la cámara
Copie
La posición
Que tiene nuestro personaje
¿Vale?
Así que necesitamos
Que la posición
Que tiene nuestro personaje
La podamos leer
Y ponérsela a la cámara
Así que por ahora
Vamos a comentar esto
¿Y qué vamos a hacer?
Pues vamos a suscribirnos
Para saber
Cuál es la posición
Que tiene nuestro personaje
La posición
Que tiene nuestro personaje
Vamos a empezar
Primero la posición
Con un useRef
Le vamos a poner
Que es 0, 0, 0
Aunque esto
Va a cambiar inmediatamente
Porque con un useEffect
Nos vamos a poder suscribir
A los cambios
Que tenga
La posición
De esta esfera
Nos suscribimos
A los cambios
Y le decimos
Vale
Pues cuando la P
Pues cambie
Lo que quiero
Es que la posición
Actual
La que tengo aquí
En este componente
Esta de aquí
Pues la podamos guardar
¿Vale?
Este useRef
Hay que importarlo
Que si no
No le gusta
Es importante
Que sea un useRef
Y no un state
Porque no queremos
Que se re-renderice
Nuestro componente
Cada vez que cambia
Esto por suerte
React3
Lo que hace internamente
Es ya hacer los cambios
Por nosotros
Y no nos tenemos
Que preocupar de esto
Y de hecho
Por temas de rendimiento
Tiene mucho más sentido
Que utilicemos referencias
Que no que utilicemos estados
Porque esto queremos
Que vaya a 60 frames
Y por muy rápido
Que es React
No sería capaz
De renderizarlo
Todo tan rápido
Como nos gustaría
Así que por eso
Hay que utilizar referencias
¿Vale?
Súper importante
Y este efecto
Tiene que tener una dependencia
Que es la posición
Aunque esto en realidad
No va a cambiar
La API.position
Pero bueno
Hay que ponerla
Por buenas prácticas
¿Vale?
Entonces
Ya estamos suscritos
A la posición
Pero nos falta
Suscribirnos también
A una cosa
Que bueno
No la necesitamos ahora
Pero como me la voy a copiar
Que es la velocidad
¿No?
La velocidad
A la que se mueve
Nuestro personaje
Así que vamos a poner aquí
La velocidad
En lugar de
La API.position
Nos vamos a suscribir
A la velocity
¿Vale?
Nos suscribimos
Esto lo vamos a dar en build
En build.current
Y en lugar de mirar
La API.position
Miramos
API.velocity
Esto lo necesitaremos después
Pero bueno
Por ahora lo dejo así
Porque son dos cosas
Que vamos a necesitar
Justamente copiarnos
¿Vale?
Ya tenemos esto
Ya tenemos la posición
Así que ahora sí
Podemos decirle
Que la cámara
Y de hecho ahora
Luego esto lo comentaré
Para que veas
Bueno
No puedes ver la diferencia
Aunque podríamos hacer
Que el mesh
Tenga un color
Para que lo veas
Pero bueno
Vamos a decir
Que la posición
De la cámara
Copie este vector 3
Y este vector 3
Que vamos a crear
Es con la posición
Actual
La posición 0
Que esta sería la X
¿Vale?
La posición de Y
Que esta sería
La Y
O sea posición 1
Que sería la Y
Lo dejamos aquí
Y aquí tendríamos
La posición 2
Que sería la Z
¿Vale?
Tenemos que pasarle
Esto
El punto copy
Necesita un vector 3
Pues le vamos a crear
Un vector 3
Justamente con estas coordenadas
¿Vale?
Para que pueda copiar
Justamente la posición
Ahora si guardamos
No deberíamos ver
Ningún tipo de cambio
O sea no hay ninguna cosa
Pero lo que vamos a hacer
Es
Vamos a hacer que el
Api.velocity
Que la velocidad
Vaya
0
0
Vamos a poner
Menos 1
¿Vale?
Supongo
X
Esto sería la X
Esto sería la Y
Y esto menos 1
Le vamos a decir
Que vaya hacia adelante
Vamos a guardar los cambios
A ver si va hacia adelante
Vale
Todavía no va hacia adelante
¿Por qué no está haciendo
Absolutamente nada?
Porque tenemos que
Añadir el player
A nuestro canvas
Hemos creado el player
Pero el player
Todavía no está en nuestro juego
El player sí que le tiene
Que afectar la gravedad
Y las físicas
Así que vamos a poner
El player
Aquí
¿Vale?
Player
Hacemos esto por aquí
Y ahora
Vale
Es un poco así
Pero al menos va hacia un lugar
¿No?
Va hacia una dirección
Fíjate que está muy arriba
O sea que parece
Como que está flotando
Esto es por la posición
Que le he puesto justamente
Al player
¿No?
Que le he puesto 5
Lo podría poner más arriba
¿Veis?
Y todavía va más arriba
20
Y todavía va más arriba
Yo creo que si le ponemos 1
La idea es que parezca realmente
Que ya es
O sea que parece
Que está en el suelo
Porque es que si no
Va a estar como demasiado arriba
Así que así
Yo creo que ya está
Más o menos bien
¿Vale?
Y ahora pues
Lo estamos moviendo
Constantemente
Lo estamos moviendo
Mira
Moviendo hacia adelante
¿No?
Pero
Pero esto tendría
Que ser
Con el teclado
Así que ahora
Lo que haremos
Es un custom hook
Para escuchar el teclado
Y que el teclado
Pues vaya poniendo
Izquierda a derecha
¿No?
Según cada cosa
Fijaos que
No sé si se ha notado
Pero mira
Justamente ahora lo he hecho
Pero ya el ground
Fijaos que
Se va acercando al suelo
Porque está como
Un poquito más arriba
De lo que debería
Y entonces
De repente
Choca
Veréis que
Deja de bajar
Y eso es por
El tema de las físicas
O sea que ya nuestra esfera
De alguna forma
Cuando llega al suelo
Pues ya no la traspasa
¿Vale?
Ya hay una física ahí
Y no la traspasa
¿Ves?
Ahora mismo
Pues ya se ha quedado
No sigue bajando
Eso es porque seguramente
Con el menos uno
Va un poquito hacia abajo
A lo mejor
Tendríamos que ajustarlo un poco
Pero bueno
Más o menos
No se va a notar nada
Porque al final
No se notará
¿Vale?
¿Qué tal?
A ver
¿Cómo lo lleváis?
¿Todo bien?
¿La fuente es Cascadia Coat?
Sí
Es Cascadia Coat
Y la textura del suelo
Si quisieramos que no fuese solo hierba
Todo el terreno ahora mismo
Es uniforme
Que no fuese hierba
Pues tendrías que cambiarle
El mesh
Y ya está
¿No?
Agüita
Para mí
Hay agüita para mí
Vale
No se cae
No se cae
Porque
Aunque no lo parezca
¿Veis?
Lo que habría que hacer
También serían como físicas
De que el mundo termina
O alguna forma
De que termine
Pero en realidad
El suelo
El suelo
En realidad
Sigue estando ahí
Lo que pasa es que
La textura
Solo llega hasta un punto
¿Ok?
O sea
Nosotros podríamos hacer
Que textura fuese
Más grande todavía
Y hasta el infinito
Y más allá
Ah bueno
Tenemos que hacer
Aquí también la geometría
¿Veis?
Ahora es más grande todavía
O lo podríamos hacer
Al revés
Que fuese más pequeño
Pero lo que tendríamos
Que hacer
De alguna forma
Es nosotros
Ponerle algún tipo
De límite
¿No?
Ahora lo he hecho
Absurdamente pequeño
12x12
Que no sé dónde está
El suelo ni siquiera
De lo pequeño que lo he hecho
¿Vale?
Así que
Aparecen
Y ya está
Vale
Entonces
Ya tenemos
El tema
Vale
Nos falta
El tema
Del custom hook
Del keyboard
Está bastante interesante
Es increíble todo
Aunque te mareas un poco
Si te distraes
De lo que el mundo termina
Ya se encarga Putin
Tengo casca de codo
Pero no me funciona
No sé
Joder
Cada vez que se va acercando
Al final la textura
Vuelve a recargar
Cada vez que se
No
Pero eso
A lo mejor he sido yo
Que le he dado
O ha hecho un cambio
O le he dado a recargar
Y la textura
Vale
Se acabó el suelo
¿Qué manera de no usar clases implícitamente?
Hostia
Eso no lo entiendo
¿Se puede poner la posición a 1.5?
Sí
Claro
La posición la puedes poner a 1.5
Por ejemplo
El player
De hecho
El suelo lo hemos puesto
¿No?
Igual es 0.5
Debería ser el bueno
Yo creo que 0.5
Es justamente el correcto
¿Vale?
Vale
A ver
Vector 3
¿Es un objeto de 3GS?
Sí
Vector 3
Justamente lo tienes aquí
Es una clase de 3GS
¿Vale?
Agrícale al proyecto algo propio
Que haga la diferencia
Joder
No sé
Luego lo miramos
Lo del ref se me escapa
¿Es para las posiciones?
El ref es básicamente
Una
Poder guardar una variable
Poder guardar una variable
Que va a poder mantener el valor
Entre renderizados de nuestro componente
Se llama referencia
Pero justamente sirve para eso
Lo que pasa es que cada vez que cambie la referencia
No vuelve a renderizar el componente
Que sería la diferencia con el useState
Y por lo tanto
¿Por qué lo necesitamos?
¿Vale?
¿Cuánto llevamos?
Por cierto
57 minutos
Uh
Tengo que darle cañita
¿Eh?
Tenemos que darle cañita
¿Vale?
Ta ta ta
Pues vamos con el keyboard
Vamos a hacer un custom hook
¿Vale?
Para justamente escuchar
Vamos a poner hooks
Uy he puesto hooks aquí
Y aquí vamos a poner
Use keyboard.js
¿Vale?
Vamos a crear un custom hook
Donde podamos escuchar
Cuando se está tocando una teclecita
¿No?
Y así podamos mover el personaje
Hacer una cosa
O hacer otra
Como le llamamos
Export
Const
Use keyboard
Esto está interesante
Porque esto puede servir para
Casi que cualquier proyecto
Mira no está mal esto
¿Eh?
No está mal lo que ha hecho
GeekhoPilot
Vale
Vamos a
Vamos a tener como una lista de acciones
¿Vale?
Vamos a poner las acciones
Que vamos a tener
Y esto va a ser un estado
Las acciones que van a ser
Pues por ejemplo
Moverse hacia adelante
Y por ahora es false
Moverse hacia atrás
Moverse a la izquierda
Moverse a la derecha
Saltar
Eh...
No, tenemos más
Por ejemplo
Cuando hemos seleccionado
Luego tenemos que poder seleccionar
No sé si ponerlo ahora
O dejarlo después
Pero podemos seleccionar
Como todas las texturas
El...
Lo que sería el suelo
La hierba
Lo que es el espejo
Vamos a poner false
Eh...
La madera
Y el tronco
¿Vale?
Estas serán como todas las acciones
Y lo tenemos como en un estado
Y este estado
¿Cuándo tiene que cambiar?
¿No?
¿Cuándo cada una de estas acciones
¿Cuándo se tiene que poner true?
Pues vamos a decir
Que cuando
Vamos a crear aquí un
Actions
Keyboard map
Vamos a tener un objeto
Y vamos a decir
Mira
Cuando toques la tecla
La W
Entonces
Tienes que moverte hacia adelante
Cuando tocas la S
Tienes que moverte hacia atrás
Cuando tocas la A
Te tienes que mover a la izquierda
La derecha
Espacio para saltar
Interaccionar
Todavía no vamos a poner
Interaccionar
Sería interesante
Vamos a poner los números
Por ejemplo
El...
Voy a pasar esto así
Digit 1
O sea cuando le damos al número 1
Entonces vamos a seleccionar
El...
Dirt
Y esto con todo
¿No?
El dirt
El grass
El stone no tenemos
Me encanta ahí
Hacopailo porque dice
No
Quiero stone
Quiero stone
Vale
Está bien
Pero no lo hay
Vale
Vamos a poner la madera
Y con el 5
Pondremos el tronco
Ahora ya tenemos como
Indicado
¿No?
Cada una de las teclas
Que acción
Es la que va a activar
Y ahora para saber
Cuando se activa
Cada una de ellas
Lo que tenemos que hacer
En un use effect
Sería escuchar
El evento
Cuando se toca
A cada uno
De los...
De...
De las teclas
Aquí tenemos
Diferentes opciones
Para hacer esto
Una sería justamente
Como me lo está diciendo
O sea justamente
Como me lo está diciendo
Esta sería una
Y es bastante interesante
¿No?
Dentro del efecto
Poner los métodos
De las constantes
A la hora de actualizarlo
O sea pondríamos aquí
Para que veamos
Un poco así
El tema
¿No?
Pondríamos
Cons handle key down
Esto recibe un evento
Y en el evento
Tendríamos que ver
Si tenemos
Lo que hemos tocado
En el teclado
¿No?
El código
De la tecla
Code
Esto lo sacamos
Del event
Vamos a poner el event
Que me gusta más
¿Vale?
Tendríamos aquí
El código de la tecla
Vamos a poner aquí
Un console lock
Del code
Solo para ver
Que esto funciona realmente
Y esto es importante
De que se tiene
Que ejecutar
Solo cuando
Cambie
Bueno
Cuando cambie nada
O sea lo vamos a poner así
Porque hemos puesto
El evento aquí
Ahora este handle key down
Vamos a escuchar
El document
Atm listener
Con el key down
Y vamos a limpiar
Este efecto
Con el document
Remove event listener
¿Vale?
O sea
Nos suscribimos al evento
De cuando se le da una tecla
Tenemos el handle key down
Vamos a ver
Que tecla se ha pulsado
Y cuando se desmonta
Este hook
Pues lo que vamos a hacer
Es
Eliminar el evento
Del DOM
Este use keyboard
Lo vamos a utilizar
En el player
Así que vamos a poner aquí
El import use keyboard
Lo importamos
¿Vale?
Y aquí
Vamos a
Por ahora
Solo vamos a utilizar
Use keyboard
Luego
Esto nos debería devolver
Bueno
Puede hacer que nos devuelva ya
El actions
¿No?
Así que voy a poner aquí
Que nos devuelva
Las actions
¿Vale?
Y esto
Actions por aquí
Ahora mismo
La actions
No hago nada
Con esto
¿Vale?
Vamos a ver que hay algún
Problemilla
Algo que no le ha gustado
Ta ta ta
Use state is not defined
¿Vale?
Esto que no me ha importado
Este use state
Y aquí
Vale
Esto lo guardamos
Y ahora esto
Si que debería
Vale
Bueno
Veis que tenemos aquí
Unos guardings raros
Pero si vuelvo aquí
¿Vale?
Ya está detectando
Ya está detectando
Que le estoy dando al teclado
O sea que ya tenemos
Le estoy dando a las teclas
Si ahora
Le doy a los números
Le doy a la ñ
¿Vale?
O sea que ya tengo
El keycode
¿Ok?
Así que ya tengo
Una forma de escuchar
Las teclas
Vamos a poner esto
Por acá
Así que ahora que ya
Tenemos el tema
De las teclas
Lo que necesitamos
Es justamente
Actualizar el estado
O sea tenemos que asegurarnos
De saber cuál es
El movimiento
Que tenemos que hacer
Aquí en el código
Tenemos que buscar
Este código
En nuestro diccionario
Así que vamos a sacar esto
Actions code
Code
¿Ok?
Actions keyboard map
¿Qué tenemos que hacer aquí?
A ver
Vamos a recuperar aquí
La acción
¿No?
Así que aquí
Tendríamos la acción
Que es la que tenemos
Que actualizar
¿Y qué vamos a actualizar?
La vamos a actualizar
Solo si realmente
Hemos encontrado la acción
O sea si alguien le da
A una tecla
Que no estamos escuchando
No vamos a tener ninguna acción
Y por lo tanto
No necesitamos actualizar el estado
Pero sí que
Si sí hemos encontrado
Esa tecla
Entre el diccionario de acciones
Vamos a recuperar
Esa acción
Y lo que vamos a hacer es
Vale
Si tengo la acción
Lo que voy a hacer es
Un set action
Set actions
¿Vale?
Aquí vamos a tener
Todas las acciones previas
Y vamos a actualizar
Este objeto
Que teníamos aquí
¿Vale?
Este objeto
Que teníamos aquí
Y vamos a decir
Bueno
Me dejas todas las acciones
Como estaban previamente
Pero
La acción
Que has encontrado
La pones a true
Así
De esta forma
Lo que ya tenemos
Es una forma
De saber
Qué acciones
Están siendo true
Ahora verás
Claro
Pero alguien dirá
Bueno
Pero si te pones a hacer esto
De hecho lo voy a poner aquí
Voy a poner un console lock
De las actions
Y vamos a ver si
Realmente ya está detectando
Las acciones que queremos
¿Vale?
Vamos a levantar aquí
Las herramientas de desarrollo
Voy a ponerlas abajo
Para que se vean mejor
¿Vale?
Vale
Fíjate que
Me está diciendo
False, false
Todo el rato
¿No?
False, false, false
Vale
Si ahora le doy
Hacia adelante
Con la flecha
Hacia arriba
Pues
Suda de mí
Ah, vale
Ostras, no
Claro, es que no son las flechas
Es el
El W
Ya decía
Digo, ostras
Que no funciona
No, es el W
Vale
Ahí está
¿Vale?
Fíjate
Que como le he dado al W
Y
Bueno, es que le he dado
Mucha
Voy a darle solo al W
¿Vale?
Voy a darle solo al W
Que es una lío
Vale
Ya está
Entonces
Ha detectado que tendría que moverlo
Hacia adelante
Pero ¿Qué pasa?
Que
Si no
Limpiamos
Los
Los eventos
Pues va a detectar
Claro, yo voy tocando teclas
Y ahí se va a quedar todo
True
Fijaos que pone
True, true, true
O sea
Ha detectado que se tiene que mover para adelante
Para atrás, a derecha
Porque no estamos limpiando nada
Pero lo que tenemos que hacer entonces
En el Use Keyboard este
Es
Todo lo que hemos hecho
Repetirlo también
Para cuando
Soltemos
La tecla
¿Vale?
Así que cuando soltemos la tecla
Vamos a repetir exactamente lo mismo
Solo que
Esto se podría refactorizar
Para no repetir el código
Pero
Handle Key Up
Y aquí lo pasaríamos a False
Cuando detecta que hemos soltado la tecla
Entonces lo que hacemos es
Esto lo escuchamos
Y lo pasa
Esa acción la pasa a False
Así que
Aquí ahora ponemos el Key Up
Handle Key Up
Y esto aquí
Key Up
Y Handle Key Up
¿Vale?
Y con esto
Pues ya lo tendríamos
Ahora
Aquí hay dos
Estrategias
Bueno, vamos a ver si esto funciona bien
Primero
Por ejemplo
Voy a darle hacia adelante
A la W
Vale
Ah, y es que he quitado el Console Lock
Digo
¿Por qué no funciona esto?
Si esto no funciona
Es que he quitado el Console Lock
Vale
Si le doy ahora a la W
Lo dejo pulsado
Y lo suelto
¿Vale?
Ahora veis
Que estaba siendo True
Hasta que lo he soltado
Y ha pasado a ser False
O sea que esto ya estaría detectando
Que me estoy moviendo hacia adelante
¿No?
Ya tendría una forma
De saber cuándo
Y cada una de las acciones
Que se están haciendo
Con nuestro personaje
Si se está moviendo para adelante
Si tiene que saltar
Si tiene que hacer una cosa u otra
Lo que os decía
Que hay diferentes estrategias
Sería aquí ¿No?
En este
Handle Key Down
O Handle Key Up
Aquí podríais utilizar
El Use Callback
Podríais crear una vez
Podríais crear una vez
Estos métodos
Fuera del efecto
Pero
No sé
El que os guste más
Porque total
Este efecto
Una vez que lo creáis aquí
Ya no es una dependencia externa
Del efecto
Y simplemente
Lo que ocurre
Es que
Lo tenéis dentro
Y lo tenéis como mejor
Yo
Casi que prefiero esto
Que no utilizar el Use Callback
Pero bueno
Aquí cada uno
Que lo haga como quiera
Lo importante
Porque si lo tienes como
Si lo tienes fuera
Tendrías que poner como dependencias
Handle Key Down
Handle no sé qué
Como queráis
¿Vale?
Pero bueno
Ya estamos detectando
Al menos el teclado
¿Cómo lo lleváis?
¿Cómo estáis?
¿Cómo estáis?
¿Cómo lo lleváis?
Va
¿Estáis bien?
Bueno veo que
100 personas ya han dicho
Hasta aquí he llegado
Utilizo bastante
Locomotive
¿Recomiendas otra?
Ni idea
Creo Roca
Ahora mismo no vamos a hablar de
GESAP
La verdad
¿Cómo vas Midu?
Bien
Un ojo en la chamba
Otro aquí
¿Qué chamba?
¿Cómo lo lleváis?
Bien
Solo para variables
Es solo para variables
Que son arrays
Eso no entiendo
La pregunta
Explica muy bien
Gracias
Y eso que no se ría
Imagínate
Pues nada
Midu
¿Cuándo un clon de Netflix?
Leonardo
Me lo has preguntado 80 veces
No entiendo la pregunta
En mitad de un clon de Minecraft
¿Sabes?
O sea
No sé
Ya lo haremos
No sé
No lo sé
Igual nunca
Es que
O igual algún día
No lo sé
Pero no sé
Si lo puedes hacer muy fácilmente
Y no sé
De clon de Netflix
Es que no sé
Esa fijación
¿Cuándo el clon de Netflix?
Pero si ahora van a poner
Anuncios en Netflix
Y todo
Vamos a poder ver esto
En repetición
Siempre se puede ver
Todo en mi directo
Se puede ver en repetición
¿Cuándo harás un clon de Midu?
Ojalá
Es que en México
Le decimos chamba al trabajo
Ah
No tenía ni idea
No lo sabía
Midu te hago una consulta
¿Por qué usas los nombres
De las variables en mayúscula
Y con guiones bajos?
¿Es solo para arreglos?
No
Eso es para las constantes
Las constantes
Que van a ser constantes
Se suelen poner así
Sobre todo cuando están
Fuera de la función principal
Pero esto es una cosa
Que ocurre
En todos los lenguajes
De programación del mundo
¿Manejarás el estado?
Sí
Pero no te enojes
No hombre
No me enojo
Sería bueno validar
Que el valor no está en true
No está en true
Un poco extraño
Porque si ha pasado ya
O sea
Que no está en true
Es que si ya está haciendo
El keydown
Es muy poco probable
Realmente que vuelva
A ocurrir el evento
Minecraft tiene dos movimientos
Uno la vista
Y otra posición
Tenlo en cuenta
Tiene uno la vista
Y otro la posición
Ya
Bueno
Pero eso lo vamos a hacer
¿No?
O sea ya lo estamos haciendo
Ya hemos explicado la separación
¿No?
Cuando dejas la tecla presionada
Ah
Cuando dejas la tecla presionada
Por ejemplo
Sí
Sí
Tienes razón
¿No?
Pero bueno
En realidad
¿Sabes qué pasa?
Que no pasa nada
En realidad
O sea
Cuando tú en React
Ah bueno
Claro
Como es un objeto
Igual sí que tiene sentido
Igual sí que tiene sentido
¿No?
Actions
O sea
Básicamente
Si tiene una acción
Sería
Que tengo dudas
Pero
Action
Si esto
Sería esto
¿No?
Básicamente
Si action
Si action
Return
Y aquí sí que entiendo
Que no podría ser
¿No?
O sea
Aquí no
No tiene mucho sentido
Aquí sí que no tiene mucho sentido
Pero entiendo
Que por aquí irían los tiros
¿No?
Y ya
Ahora por ejemplo
Lo que pasa
Ah
Estoy pensando
Que sí que lo vamos a necesitar
¿Eh?
Sí que lo vamos a necesitar
Porque
Yo creo que sí que lo vamos a necesitar
Lo voy a comentar
¿Vale?
Y luego lo probamos
Cuando tengamos el movimiento del personaje
¿Ok?
Porque
Puede ser que
Esté haciendo un nuevo set state
Esté renderizando
Luego lo miramos
A ver
¿Vale?
Luego lo miramos
Mejor que un clan
De todo el dinero de Elon Musk
Joder
Ya te digo
Vale
Entonces
Ya tenemos lo del use keyboard
Ya estamos
Con lo del personaje
Y bueno
Ahora obviamente
Lo que necesitamos
Es mover el personaje
Y aquí viene
Aquí viene la
La tela marinera
A ver
Ya tenemos las actions
Que aquí
Ahora mismo
Podríamos tener
Vamos a sacar
Los interesantes
Move left
Move right
Y jump
Vamos a poner esto
Que se formate bien
Esto por aquí
Esto por acá
A ver aquí
Ah vale
Digo
Que parecía que había un error
O algo
Vale
Entonces ya tenemos la cámara
Tenemos lo de la posición
Tenemos lo de la velocidad
Ahora
En cada frame
Aquí es donde está el tema
¿No?
En cada frame
Ahora solo estamos moviendo aquí
La cámara
No sé qué
Pero ahora tenemos que indicar
Nosotros
Los vectores
Esto
Esto va a ser un locuro
¿No?
Por un lado
Tenemos la dirección
Así que vamos a poner la dirección
Y la dirección
Vamos a poner vector 3
La dirección
Esto
Voy a quitar esto
La dirección al final
Va a venir
Entre
Mira
Más o menos
Es esto
O sea
Genial
Me encanta
Aquí jaco
Claro
Entre
Si el vector
De ir hacia adelante
Y de ir hacia los lados
¿No?
Porque puedes ir en diagonal
Puedes ir
Hacia
O sea
Puedes ir hacia adelante
A la derecha
Por lo tanto
Teníamos el vector
Hacia adelante
¿No?
Y además puedes saltar
Hacia adelante
O sea
Es que tiene un montón de historias
Así que necesitamos un vector
Que nos indique
La posición
De
Hacia adelante
O hacia atrás
¿No?
Y para eso
Vamos a crear
Este front vector
Hacemos un new vector 3
Y como necesitamos
Que sea hacia adelante
O hacia atrás
Pues no tenemos que
Hablar nada de la x
Nada de la y
Y solo tenemos que hablar
De la z
Que es la profundidad
Y la profundidad
Es la que nos da a nosotros
La sensación
Si vamos hacia adelante
O hacia atrás
Entonces
Si nos movemos
Yo creo que esto está al revés
Yo creo que esto
De Bija Copa
Lo está al revés
Pero bueno
Bueno
Me imagino que a lo mejor
Funcione igual
Si nos movemos
Hacia
Hacia atrás
Entonces
La posición
Vamos a poner que es 1
Y si no
Es 0
¿No?
O sea
De esta forma
Iríamos
Porque ya hemos visto
Que antes
Cuando he puesto
Lo de la velocidad
Cuando hacíamos menos 1
Íbamos hacia adelante
Por lo tanto
Para movernos
Hacia atrás
Si nos está moviendo
Hacia atrás
Tendríamos que ponerle 1
Y si no
Tendríamos que ponerle 0
Solo con esto
Bueno
Solo con esto
Solo veríamos una cosa
Pero
Lo que estaríamos haciendo ya
Es mover el vector
De ese eje
Hacia adelante
O hacia atrás
Y luego
Tendríamos que hacer lo mismo
Pero si nos movemos
Para adelante
Y en este caso
Como ponemos un menos
Porque hay que restar
Sería menos 1
O sea
Si no nos movemos
Para atrás
Pero nos movemos
Hacia adelante
Sería menos 1
Nos moveríamos para adelante
Pero imagínate
Que tienes pulsado
Los dos botones
Hacia adelante
Y hacia atrás
Pues se tendrían que cancelar
¿Vale?
Así que
Move backward
Sería 1
Move forward
Sería 1
1 menos 1
0
Entonces te quedarías
En el sitio
Esto mismo
Tendríamos que hacerlo
Con el side
¿Vale?
Side vector
¿Vale?
Un vector
De los lados
Justamente
Esto he puesto mal
Const
Y como este es de los lados
Este sí que tendría que ser
En el eje de la x
¿Vale?
La y sería hacia arriba
Que lo vamos a tocar
Cuando hagamos un salto
Pero si nos movemos
Hacia los lados
Pues tendría que ser
En el eje de la x
Aquí 0
Y aquí 0
Esto sería básicamente
La misma lógica
Que hemos hecho
Justamente aquí
Creo que esto estaría bien
No sé si sería al revés
Pero bueno
Lo probamos
Y si al movernos
Se mueve al revés
Pues ya nos daremos cuenta
Y ahora aquí viene
El temazo
Aquí viene el temazo
Aquí hemos creado
Una dirección
¿No?
Entonces la dirección
Que es un vector 3
Esto
Esto es bastante complicado
¿Qué necesitamos?
Necesitamos utilizar
El subvector
Que al final lo que hace
Es un cálculo
Con los vectores
¿No?
Lo que está haciendo
Básicamente es
Utilizar los dos vectores
Y los está como
Subtrayendo
Está diciendo
Este vector
Y este vector
Y luego necesitamos
Normalizarlo
Todo esto
Yo en realidad
No tenía ni puñetera idea
Me lo he visto en el vídeo
Me he quedado flipando
Usted ha puesto aquí vector
Y esto vector 3
Y he dicho
Vale me lo voy a creer
Me he estado mirando
Un poco la documentación
Me he enterado
También cero
Básicamente
Cero
Así que vas a tener
Que hacer un salto de fe
Pero básicamente
Aquí necesitamos
En la dirección
Que va a tener
Nuestro personaje
Cuando queremos
Queremos crear
Como la dirección
A la que va
Tanto hacia adelante
Y hacia atrás
Como de izquierda a derecha
Como si fuese hacia arriba
Que no es el caso
Entonces
¿Qué pasa?
Que necesitamos
Los dos vectores
Y de alguna forma
Con estos dos vectores
Son los que vamos a conformar
La dirección
Que va a tener
Nuestro personaje
Y una vez que tenemos
Este sub vector
Tenemos que normalizar
Este cálculo
Hacer una multiplicación escalar
Que esto va a ser
Esto
Básicamente
Este multiple escalar
Sería como
Para
Para la velocidad
¿No?
Porque aquí
Podríamos dejarle uno
Y va a tener eso
Pero si queremos
Tener como
Una forma
De que nuestro personaje
Vaya más rápido
Más lento
Y eso lo podemos hacer
Con un botón
¿No?
Lo típico
De que das a un botón
Y el personaje
Va más rápido
Pues por ejemplo
Andando
Sería dos
Y correr
Sería cinco
Por decir algo
¿No?
Aquí lo vamos a
Le vamos a poner
Aquí una
Una constante
Vamos a poner
Speed
O
Caracter
Speed
Le vamos a poner cinco
Pero bueno
Aquí ya podrías tener
Bueno
También
La fuerza del salto
Pero podrías tener
Una velocidad para andar
Y otra velocidad para correr
Por ejemplo
¿No?
Y sería bastante interesante
Así que
Le vamos a dejar aquí
El carácter
Speed
Vamos a ver si eso
Es muy lento
Muy rápido
Vamos a ponerle dos
A ver si es muy rápido
Muy lento
Y este ahora
Lo utilizaremos
Para el salto
¿Vale?
Y una vez que tenemos
La dirección esta
Lo único que nos falta
Es apply
Uler
¿Vale?
Esto es porque
Dependiendo
De la rotación
Que tenga nuestra cámara
No es lo mismo
Darle hacia adelante
Y hacia atrás
Porque dependiendo
De hacia dónde
Estás mirando
Se tiene que mover
Hacia un sitio
Esto es como funcionan
Los juegos de primera persona
Si tú miras a la derecha
Y le das hacia adelante
Te vas a mover
Hacia adelante
Según la rotación
De la cámara
Entonces
Este método
Lo que va a hacer
Es utilizar la rotación
Que tiene actualmente
La cámara
Para moverse
Hacia donde está
Mirando la cámara
O sea que está rotando
El vector
Para decir
Vale
Todo esto que has hecho aquí
Esto está muy bien
Pero si quieres
Ir hacia adelante
Lo vamos a hacer
A través de la rotación
Que tiene en ese momento
La cámara
Si no le ponemos esto
Bueno y de hecho
Luego lo intentamos
Será un poco raro
¿Por qué?
Porque nosotros miraremos
Hacia un sitio
Pero se girará
Hacia otro
¿Vale?
Luego hemos visto
Como hemos hecho antes
El tema de la velocidad
Así api.velocity
Le decimos el .set
Y ahora
Tenemos la dirección
.x
Tendríamos ahora
También
La velocidad actual
Que vamos a ponerle
Que es uno
Y la dirección
Z
¿Vale?
¿Por qué la velocidad
O sea
Lo utilizamos aquí?
Porque cuando nos movemos
No nos movemos
Hacia arriba
Pero
Si que vamos a saltar
Y el salto
No es sobre un movimiento
Que hacemos nosotros
Con el teclado
Sino es una acción
Y eso va a tener
Una velocidad
Que va a perder
A través de la gravedad
Va a perder
Pues impulso
Así que por eso
En la x
Utilizamos la dirección
Que hemos creado aquí
En la profundidad
Hacia adelante
O hacia atrás
También la que hemos creado aquí
Pero luego
Vamos a utilizar la velocidad
Cuando le demos al jump
Veremos que es lo que hacemos
Con la velocidad
Pero bueno
Por ahora lo dejamos así
Se debería quedar exactamente igual
Como estaba
Y ya está
Vamos a guardar esto
Vamos a tocar esto
¡Ojo!
¡Ojo!
¿Vale?
Ya se mueve
Mira
Voy a comentar esto
De la play
Uler
Para que lo veáis
¿No?
Pero yo hago esto
¿Veis?
Le estoy dando hacia adelante
Y va hacia atrás
O sea
Le doy hacia adelante
Y va a la derecha
¿Por qué?
Porque no está
Teniendo en cuenta
La rotación de la cámara
Hacia la dirección
En cambio
Si lo pongo
Y ahora le digo
Vale
Voy a girar
Y voy hacia adelante
¿Veis?
Ahora tiene sentido
Así que para eso
Es esto
Y es súper necesario
Y es súper típico
De cómo funcionan
Los juegos en primera persona
La verdad que está bastante chulo
El tema de saber esto
¿No?
De los juegos en primera persona
¿Sabes?
Es como que le faltas
No sé
Como le quita bastante magia
¿Por qué me sale
Que he resuelto dos retos
En Codenberg?
Pues porque los habrá resuelto
Egui Berrones
¿No?
Digo yo
Gente es hermosa
La matemática
La física aún más
No le tengas miedo
Bueno
Lo bueno de 3
Que estamos viendo
Es como que hay mucha magia
Que se la está quitando
¿No?
Pero lo importante es
Que lo que estamos haciendo aquí
Es esto
Sería una multiplicación
Por ejemplo
Si le pongo 100
Para que veáis esto
¿No?
Y le doy para adelante
O sea
Se le ha ido
Pero va
Va súper rápido
Súper rápido
¿No?
Entonces
Y si le pongo 2
Pues irá mucho más lento
Como mucho más lento
Si le pongo 5
Pues va un poco más rápido
Así que eso sería un poco
La idea
De
Del
Multiply
Scalar
Es opcional
Esto lo podríamos quitar
Pero sirve justamente
Pues para
Como para acelerar
¿No?
Esa dirección
Hacia la que estamos yendo
Y esto
Para utilizar la rotación
Para que siempre
Estemos yendo hacia adelante
¿No?
En el caso
O adelante
A la derecha
La referencia
La referencia de la rotación
De la cámara
La tenga en cuenta
¿Vale?
Y ahora que tenemos
Esto sería la velocidad
Del movimiento
Y todo esto
Pero nos falta también
El salto
¿Vale?
Si hacemos el salto
Vale
Esto es interesante
¿No?
Porque vais a ver aquí
Un bug
Y esto es una cosa
Muy interesante
Justamente
De los
De los juegos
¿Vale?
Vamos a hacer
Que si
Si le doy al salto
Si la acción es salto
Voy a hacer
La velocidad
Pero va a ir
Justamente
Vamos a darle
Una fuerza
Hacia arriba
Creo que ya está
La gravedad puesta
Porque le he puesto
Una masa
Al personaje
¿Ves que le he puesto
Masa?
Entonces
Ya la gravedad
Debería estar funcionando
Correctamente
Ahora lo probaremos
Pero cuando le demos
Un salto
Vamos a mantener
La velocidad que tiene
En el eje
X
Y en el eje
Y de la profundidad
Pero vamos a ir
Hacia arriba
Entonces
Vamos a guardar esto
¿Vale?
Ya tenemos el salto
Bueno ya veis que
Le he puesto un salto
Muy bestia
Como ya tiene la gravedad
Fijaos que ya
Hace esto
Esto deberíamos ajustarlo
Este
La fuerza del salto
Pues igual debería ser menos
No sé
4 a lo mejor
Vamos a poner 4 también
La velocidad esta
Y
Y ahora
Vale
Ahora parece un poco
Más normal
¿No?
Ahora es un salto
Más normal
Pero ¿Qué pasa?
Y esto es lo súper divertido
De los videojuegos
Son este tipo de cositas
Si miramos un poco el código
Dice
Si saltas
Haces esto
¿Vale?
Y si salto dos veces
¡Ojo!
Si saltas dos veces
Pues claro
Ahora lo que está pasando
Es que puedes
Podemos saltar infinito
Mira
Levantando al espacio
Y saltas infinito
Lo que tenemos que mirar aquí
Es justamente
¿Cómo evitamos que pueda saltar
Otra vez el usuario
Hay diferentes formas de hacerlo
Se puede hacer con un cálculo matemático
Que no es perfecto
Pero bueno
Casi
Por ejemplo
Lo que se puede mirar
Es ver
¿Cuál es la velocidad actual
Que tiene el personaje
El personaje
Hacia arriba?
¿No?
De forma que no pueda saltar
Cuando tiene una velocidad
En el eje Y
O sea
Cuando está cayendo
O cuando está subiendo
Así que
Lo que podemos hacer
Es un
Math Absolute
Devel Current 1
No hace falta que hagamos eso
Dice
Y aquí podemos ir ajustando
Yo creo que con que veamos
Que tenga un poquito de movimiento
Pues ya lo ajustamos
¿No?
¿Por qué?
Porque si le ponemos poco
A lo mejor
¿Ves?
Llega un momento que cuando cae
Puedo volver a saltar
O sea
Hay un momento justo
En el que puedo hacerlo
Pues aquí habría que empezar a jugar
Un poco con valores
Para que
¿Ves?
Ahora no lo hace
Hasta que no está
Casi
Casi tocando
Hasta que no está casi tocando
¿Ves?
Ahora puedo ir
Puedo mover la cámara
Puedo mover la cámara
Mientras salto
Y la rota
Cambia la dirección
Hacia la que va
¿No?
Puedo mirar hacia abajo
Hacia arriba
Puedo mover a la izquierda
Y saltar hacia la izquierda
Saltar a la derecha
Saltar hacia atrás
¿Vale?
O sea que ya tenemos
El movimiento del personaje
Con esto que hemos hecho
Además ya hemos arreglado
El bug este
De que salta dos veces
Y ya está ¿No?
Y si mantienes apretado
El botón de espacio
Da igual ¿No?
Porque al final
Ya lo que tenemos
¿Ves?
No pasa nada
No pasa nada
O sea
Espera
Porque
Si te fijas aquí
Aunque le venga otra vez
El jump
Va a mirar este cálculo
De aquí
Va a decir
Ostras
Pero realmente
Estás tan despegado
Y ya está
Entonces va a evitar
Justamente que
Que haga el otro
El otro check
Y ya está
Bueno
Entonces
Ya tenemos el movimiento
A la pantalla
A ver una cosa
Que yo creo que es súper
Interesante ¿No?
Para empezar a que parezca
Un videojuego
Es que le pongamos aquí
Aquí
Vamos a poner que esto
Es un fragment
Vamos a ponerle el puntero
Que esto también lo hacen
En el vídeo
Y queda muy chulo
Entonces vamos a poner aquí
El pointer
Que si no me equivoco
Con un más
Debería ser suficiente
Name
Vale
Le esperamos la indentación
Y aquí
Vamos a poner un pointer
Color
White
Font
Size
40 pixels
Vamos a poner
Position
Absolute
Top 0
No
Vamos a poner
50%
50%
Con esto
Vale
Pues mira
Ya tenemos ahí nuestro
No sé cómo es
El puntero de Minecraft
La verdad
No tengo ni puñetera idea
Pero
No sé si
No sé cómo es
No sé cómo es
No sé si es blanco
Es rojo
No sé de qué color es
¿Alguien sabe de qué color es?
Bueno
El tema que ya tenemos ahí
En nuestro puntero
Que nos va a ayudar justamente
Con lo siguiente
Que es el poner
Los bloques
Vamos a ir cerrando
Todo esto
Vamos a cerrar esto
Y vamos a
Claro
Para poner los bloques
Para dibujar los bloques
Vamos a necesitar
Primero un estado
Que nos guarde
Donde están los bloques
Posicionados
Y luego
Los componentes
De los bloques
Las cajas de Minecraft
¿Vale?
Es blanco
Vale
Es medio transparente
Vale
Pues venga
Vamos a hacerlo
Medio transparente
No sé si es
Medio transparente
O sea
Algo así
¿Así?
No sé si es
Medio transparente
Entonces
Ah
Es color inverso
A lo que apunta
Bueno
Madre mía
Madre mía
Entonces
El tema
Ahora necesitamos
El estado global
El estado global
Vamos a crear un
No sé si he instalado
Zustan antes
Pero lo vamos a necesitar
Zustan
Es una herramienta
Justamente
Que te permite
Manejar el estado global
De tus aplicaciones
Que es agnóstico
Al framework
Pero bueno
Que funciona súper bien
Con React
Y es el que vamos a utilizar
Así que vamos a poner
Un use store aquí
Vamos a utilizar
El create
Create
Vaya por dios
Create
De Zustan
Yo creo que esto
No es necesario
Pero bueno
Y aquí vamos a crear
Nuestro estado global
¿Vale?
Nuestro estado global
El use store
Hacemos un create
Y este set
Vamos a poner aquí
Nuestro estado global
Por un lado
Vamos a tener
La textura
Que hemos seleccionado
Que vamos a poner
Que por defecto
Sea dirt
Ahora
Los cubos
Que hemos pintado
Por ahora vamos a dejar
Un arriba vacío
Ahora le pondremos algo
¿Vale?
Cuando queramos añadir
Un cubo
Cuando queramos
Eliminar un cubo
Cuando queramos
Setear la textura
Para cambiar la textura
Que hemos seleccionado
Cuando queramos
Guardar
El mundo que hemos hecho
Y cuando queramos
Resetear
El mundo que hemos hecho
¿Vale?
Esto va a ser
Creo
Todos los estados
A ver que hay aquí
Ah vale
New line
Esto va a ser
Toda la gestión de estado
Que vamos a necesitar
¿Vale?
Y ahora
Yo creo que lo mejor
Que podemos hacer
Para saber por donde empezar
Sería tener un cubo
¿No?
O sea tener ya un cubo
De ejemplo
Los cubos
Podemos ponerle una idea
Así tal cual
Pero lo mejor
Es que utilicemos
O nanoID
¿Cómo se utilizaba?
¿Cómo se creaba esto?
A ver
Un momento
Vamos a mirar
Mira así es como queda
¿Eh?
Ya viene
Falta poco
Create
Random
UID
V4
JavaScript
Creo que hay
Un método nativo
Creo que hay
Método nativo
Que ahora no me acuerdo
Como es
El crypto random
No
UID
Ah
Crypto random
UID
Versión 4
Es que no sé
Si está en el navegador
Si no
Instalo
Vale
Creo que es este
A ver
No
No está
Vale
Pues nada
Instalamos nanoID
Y ya está
NanoID
NanoID
Lo que nos va a hacer
Es crear un identificador
Único
Para cada caja
Para que no se repita
Porque luego
Vamos a tener que
Iterar todas las cajas
Y decir
Tal vez que tengan una aquí
Y todo esto
Así que importamos
NanoID
De hecho
Si hago aquí
NanoID
NanoID
Vale
Ya me lo importa
Perfectamente
Que más información
Vamos a tener
De cada uno de los cubos
Vamos a tener su posición
Vamos a decirle
Que 0, 0, 0
Luego lo cambiamos
Vale
O bueno
Podemos ponerle
1, 1, 1
Para que lo veamos
En algún sitio
Porque si lo pongo 0, 0
Está justo donde está el usuario
Y le decimos que la textura
Es que está sucia
Vale
Luego volvemos
Por ahora vamos a dejar esto
De gestión del estado
Por ahora
Vamos a leer el estado
Luego hacemos que tenga
Latcube
Y todo esto
Y eliminar cubos
Vamos a crear aquí
Nuestros cubos
Cubes
JSX
Y aquí vamos a utilizar
Nuestra store
La vamos a leer
Vale
Creo que es este
Y
Bueno
Todavía no tengo cubo
Así que
Luego renderizamos el cubo
No necesitamos
Ningunas props
Recuperamos
Los cubos
Leyendo la store
Aquí tendríamos el estado
Y aquí lo que devolvemos
Es un state.cubes
Esto lo que va a hacer
Es suscribirse
A esta parte
De aquí
¿Vale?
Entonces cuando haya algún cambio
Esto
Este componente
Lo leerá
Volverá a renderizarse
Y ya lo tenemos
Aquí vamos a devolver
Todos los cubos
Los mapeamos
Y para cada cubo
¿Qué tenemos?
Tenemos la key
Tenemos la posición
Y...
No, la key no
La idea
Y la textura
¿Vale?
Entonces
Vale
Esto no está mal
No está mal
Bueno, podríamos hacer esto
Directamente
En lugar de crear un
Ay, le llamo cube
Y es cubes
Vale
Podríamos aquí manualmente
Sí, mejor esto
Podríamos ponerlo manualmente
Pero bueno
Vamos a crear un componente aparte
¿Vale?
Que se llama cube
Le pasamos como key
La id que tenemos
La posición
Se la pasamos también
Y la textura
La posición
Le vamos a position
Para que quede más fácil
De entender
¿Vale?
Esto por aquí
Esto por acá
Pam
Y este cubo
Lo vamos a crear ahora
Y este cubo
¿Qué es lo que vamos a hacer?
Vamos a hacer un poco
La técnica que hemos visto
Con el suelo
Le vamos a dar una textura
Y todo esto
Así que
Una textura
Vamos a crear un mesh
Que tenga polígono
Y textura
Y aquí
Pues nada
Le damos cañita
Export const cube
Vamos a tener la id
La position
La textura
¿Vale?
Entonces
Los cubos
Son cajas
Y necesitamos
Que tengan física
O sea
Que sean
Estáticas
O sea
Que al final
No se mueven
No se mueven
De que una vez
Que están posicionadas
No se tienen que mover
Igual en el juego
Hay algo que se pueda mover
O lo que sea
Pero estas cajas
Queremos que se quedan estáticas
Que su posición
Esté quieta
Una vez que la hemos puesto
Así que
Vamos a utilizar
Otro custom hook
Que tiene canon
¿Vale?
Book no
Box
¿Vale?
From
Esto
Y lo vamos a crear
Vamos a crear nuestra cajita
Nuestra cajita
Que vamos a tener por aquí
Esto tiene que ser un método
Y le decimos
La masa no hace falta
Porque tampoco
Tienen gravedad
Que yo sepa
Le decimos que es estática
Y la posición
Es la que le venimos dando
Por las props
¿Vale?
Hasta aquí
Bien
Para verlo
Para que podamos ver
Esto ya
A ver si renderiza algo
Voy a hacerlo con un color
Y luego le hago la textura
¿Vale?
Vale
Box buffer geometry
Para tener
La geometría
De una caja
Esto
Lo atamos
A la geometría
De la malla
Así que esto
Ya lo tenemos por aquí
No hay que importar
Nada de esto
Porque esto
Es una cosa
Que ya entiende
De 3
Y por otro lado
Tendríamos el material
El material
Podemos ponerle un color
De hecho le voy a poner
Que es color blanco
Podéis ponerle colores
Directamente o texturas
Luego mapeamos la textura
Y esto será el material
Ay
Me ha puesto la textura aquí
Cuando todavía no
Ni la he creado
Y ya está
O sea con esto
Con esto
Si lo guardamos
Esto importamos el cubo
Aquí
Cub
From
El cubo
JSX
Y los cubos
Los renderizamos
En nuestra aplicación
Que tiene que tener física
O sea que los ponemos aquí
Cubes
Cubes
Vale
Hostia
Me ha petado algo
Ha petado algo
Creo que ha petado algo
O me ha puesto el cubo delante
Now
Get a snapshot
Is not a function
Get a snapshot
Is not a function
No debería ser us store
From hooks
From hooks
No
From hooks no
Hostia
Get a snapshot
Is not a function
Esto si que es raro
Ay espérate
Ah no no no
Está bien
O sea el cube
Aquí hago el use store
Ah no
Es que no es from zustan
Perdón
Es desde store
Claro
Es desde
Ah no
Ahora tengo dudas
Ahora tengo dudas
No no
O sea es claro
Si hemos creado esto
De aquí
No
Use store
Vale vale
Ya está
No tengo dudas
No tengo dudas
Es desde aquí
O sea ese era el problema
El problema es que estaba
Vale
Ahora ya algo ha pasado ahí
Ojo
Ojo que tenemos ahí el cubo
Ahí tenemos nuestro cubo
No es el cubo más bonito
Está un poco elevado
Bastante
No sé si es
Yo creo que está bien
Lo que pasa es que parece un poco raro
Pero creo que está bien
Bueno vamos a darle la textura
Le podríamos haber puesto otro color
Para que se vea mejor
Mira
Pink
Ahí lo tendríamos
Ahí tendríamos nuestro
Nuestro cubito
Podríamos ponerle unos cuantos más
Para que veamos
Por ejemplo
Nano ID
Vamos a poner aquí otro
Uno que esté bastante arriba
Por ejemplo aquí le ponemos
Bueno esto ahora no funciona
Pero bueno
Voy a ponerle otro
Para que
Cuáles son las texturas que tenemos
Vamos a poner
Lock
Para poner otro diferente
Vale
Míralo
Ahí está nuestro cubo
Ahí arriba
Vale
Vamos a hacer que tengan texturas
Y para eso
Pues nada
Tenemos que repetir un poco
Lo que hemos hecho
Con nuestro
Con nuestro suelo
Vale
Vamos a importar
Todas
Todas las texturas
Que tenemos en imágenes
Images
Textures
Vale
Aquí tenemos las texturas
Y aquí lo único que tenemos que hacer
Pues es buscar la textura
¿Cuál es la textura que tenemos aquí?
Active texture
¿Vale?
Buscamos a partir del
Ah esto es interesante
Porque igual el nombre
Vale
Voy a mirar
Porque le estamos pasando
El nombre de la textura
Y en las texturas
Le estamos poniendo
Grass texture
Deer texture
O sea
Tenemos que
Una de dos
O cambiar el nombre
O
Concatenar
Vamos a poner esto
Texture
Y así texture
Y ya está
Y aquí
Quitamos el color
Ponemos el map
Del active texture
Y vale
No lo ha hecho
No lo ha hecho
No sé si por qué
No me está encontrando
La textura esta
Active texture
Vale
Porque me está poniendo
Dos glasses
O
Algo está poniendo ahí
Vamos a ver
Object
Active texture
Is texture
O sea que algo está encontrando
¿No?
Aquí
Aquí está
Encontrando algo
O sea que sí que ha encontrado
Algo
¿No?
Aquí
Sí que ha encontrado
Algo
Active texture
Active
O sea que sí que ha encontrado
La textura
Pero no me la está
A ver
En textura
No se me ha olvidado
Aquí hacer
Nada
¿No?
No
Tenemos aquí el load
Bueno
Veo que
Ah no
Glass
Grass
En el use store
Tenemos dirt
Lock
Y el dirt
Que es este
De aquí
O sea debería verse así
Y no me está saliendo así
Aquí la textura
Vamos a ver el cube
Este
Texture
No pero
Está
Está encontrándolo
Lo está encontrando bien
Vamos a ver
Vamos a ver
¿Qué le pasa a nuestra textura?
¿Ves?
Dirt
Y está encontrando la textura
Y luego
Como lo estoy importando
En textures
Aquí
Textures
Sí que estoy utilizando bien esto
Y la imagen
Ah tengo
No pero esto está bien
Macfilter
Texture
Export
Vale
Pues
No sé con qué la he ligado
Pero
Esto debería
Estar funcionando
Lo en errors filter
Lo he hecho ya con todos
El importarlo
Lo he hecho con todos
Obviamente
Está pillando bien las imágenes
Porque aquí la está pillando bien
¿No?
Sí
Ah espérate
A no ser que las imágenes
No
Están bien
Están todas bien
Están todas bien
Vale
A ver
Los cubos
Están bien
La idea
No es necesaria
La posición
Está
A ver voy a leer el chat
Que igual
Quita el color
El color lo he quitado ¿no?
Sí
Quita el color ya
El color
Lo he
El color lo he quitado
Esta es la textura
Que está activa
En el mesh
El color
Esto ha hecho un attach
El map
Del texture
Esto creo que está bien también
O sea
Hasta aquí
Está todo bien
Pero es verdad
Que no me está haciendo
La
Ah
What the
O sea
Me ha timado
No he hecho nada
O sea
No he hecho nada
Me ha engañado
Tío
Me ha engañado
Me ha engañado
Esto
Me ha engañado
O sea
Lo ha hecho bien
Lo había hecho bien
La madre que lo trajo
La madre que lo trajo
Vale
Ay Dios
Ay Dios
No pero están bien
O sea
El log
O sea
Parece que no
Pero ese
Es diferente
O sea
Está bien
Está bien
¿Ves?
Son dos materiales diferentes
Pues ya está
Tenías que apartar la cámara
Para que se volviera a renderizar
Ya te digo
Me han troleado
Pero a lo bestia
A lo bestia
Bueno
Entonces ya tenemos todas las texturas
Ya tenemos donde añadir los cubos
Bueno
Ahora lo que tendríamos que hacer
Es poder añadir los cubos
O sea
Vamos a hacer
En el useStore
Vamos a añadir aquí los cubos
Vamos a ponerle el addCube
Vale
El addCube
Vale
En el addCube
Lo que queremos
Es indicarle
Básicamente
Le decimos
¿Cuál es la posición?
X
Y
Y Z
¿Por qué?
Porque cada vez que añadamos un cubo
En realidad
Tenemos que hacerlo
Con la textura
Que ya tenemos
Seleccionada
Así que
Aquí
Que esto
Esto es un método
Vale
Aquí vamos a decirle
Que seteamos
El estado
Bueno
Bueno
Vamos a ponerlo state
Vale
Y lo que tenemos que hacer
Es tenemos todos los cubos anteriores
Vale
Cubos
Todos los cubos anteriores
Y vamos a añadir un nuevo cubo
No sé si se llama key
O id
Id
Vale
Pues id
Nanoid
La textura
Tiene que ser
La textura actual
Que tengamos
Seleccionada aquí
Ahora mismo
Dirt
Y la posición
Es la que tenemos que crear
A partir de
Lo que le estamos pasando aquí
Y de esta forma
Vamos a estar añadiendo
Esto
Aquí
Esto
Esto
Esto
Vale
Esto es lo que vamos a hacer
Cuando añadimos un cubo
Vamos a añadir el cubo
Le vamos a pasar la x, y, y, z
O sea su posición
En el
O sea tenemos que posicionarlo 3D
Y
Ya tenemos la id
La generamos
Le decimos la textura
Que tenemos seleccionada
Y la posición
Esa sí que es la que le tenemos que pasar
Vale
Y vamos a empezar
A poder
Poner
Los cubos
En el suelo
Al menos
Así que
Aquí en cubos
No en cubos no
En ground
Vale
En ground
Vamos a recuperar
Justamente esto del
Use store
Vale
Recuperamos
No
El state
Punto add cube
Cada vez
Que hagamos esto
Add cube
Y vamos a hacer
A añadir el cubo
Cuando hagamos
Click
En una parte
Del
Del suelo
O sea que
On click
Hacemos un on click aquí
Bueno
Vamos a poner aquí
Handle
Handle
Click
Ground
Vale
Handle
Click
Ground
Event
Vale
Vamos a poner un event
Stop propagation
Para que
Propa
Propagation
Propagation
¿No lo he puesto bien o no?
Sí
Para evitar que
Traspase el suelo
Puede ser
Y esto lo tenemos que hacer mucho
De que los eventos
Si tuviésemos por ejemplo
Una caja
Y detrás el suelo
Si no le ponemos
Stop propagation
Lo que hace la malla
Es que deja pasar el evento
Entonces nos podríamos volver
Bastante locos
Vale
Entonces vamos a recuperar
La posición
Donde hemos hecho
Justamente el click
Para eso
Tenemos x y y z
Bueno
Podremos mirar
Aquí
Vamos a hacer esto primero
Para que lo veamos
De donde estamos sacando
Esta información
Closing bracket
Must be aligned
Ah vale
Eso ahí
Vale
Y vamos a poner esto
Por aquí
A ver si
Cuando yo hago click
¿Veis?
Cuando hago click en el suelo
Estoy recuperando ahí
El punto
El punto
En un vector 3
Que tengo la
La x
La y
La z
O sea que
Ya sabemos donde estamos
Haciendo justamente el click
Obviamente
Como podemos ver
Pues viene con un montón
De
De decimales
Y lo vamos a redondear
Para que sea
Mucho más exacto
Así
Siempre pondremos
Como las cajas
Como son muy cuadradas
Tienen que quedar muy bien
Una detrás de otra
Así que
Vamos a redondearlo
Hacia arriba
Para que quede justamente
Donde queremos
¿Vale?
Así que
Vamos a
Esto es vector 3
Pero esto es un objeto
Vale
Vamos a hacer
Un object values
De esto
Y esto debería ser
X, Y y Z
Vamos a ver
Vale
Ahí lo tenemos
¿Vale?
Ahí tenemos
X, Y y Z
Voy a quitar esto
X, Y y Z
Así que lo único
Que nos falta
Es que esto sería
X, Y y Z
Pero mapeamos
Cada valor
Bueno aquí pone
Que hagamos un math round
Pero yo creo que
Vamos a hacer
Este
Math sale
Math sale es
Hacia
Math floor
Sería siempre hacia abajo
Math sale
Sale significa techo
Pues hacia arriba
¿Vale?
La X y tal
No dice que no se usa
Pero bueno
Ahora ya vamos
Al añadir cubo
Con X, Y, Y y Z
Y ya está
O sea
Ya lo tendríamos
Yo creo que con esto
¡Ojo!
Bueno
Bueno
Ahora mismo
Solo podemos añadir
Cubos en el suelo
¿Eh?
O sea
Nos tenemos que
Nos tenemos que
Que el mar
Todavía no podemos
Hacer nuestras casitas
Pero fijaos
Que queda perfecto
Uy
Quedan justo
Una al lado del otro
Porque no estamos
Dejando los decimales
Como estamos redondeando
Justamente a enteros
Estamos consiguiendo
Que queden justamente
Una al lado de la otra
Esto también tiene que ver
Con el tamaño
Que le hemos puesto
Y tal
Pero
Si dejásemos los decimales
No podríamos hacer esto
O sea
Si esto lo dejásemos así
Seguramente
Empezaríamos
A liarla
Vamos a
Resetear
¿Veis?
O sea
Primero
Es que lo pondría
Claro
En el eje
Y
Lo haría
En mitad
Porque depende
De hecho
Hay uno que estaría
Mira
¿Veis?
O sea
Estaríamos poniéndolos
Mal
Porque no nos podríamos
Poner uno al lado del otro
Así que
Ya sabéis
Hay que
Hacer esto
Y alguien se preguntará
Ostras
Pero ¿Por qué cuando redondeas
¿Por qué cuando redondeas
Igualmente no te pasa esto?
Que no se pone uno al lado del otro
Pues porque no puedes tocar el suelo
Es imposible
Que toques el suelo
¿Sabes?
O sea es imposible
Que toques el suelo
Cuando ya hay uno ahí
No puedes poner uno justo al lado
O sea
Al final al redondearlo
Puede ser que quede cerca
Pero no puede quedar encima
Porque es que es imposible
Que toques
Una posición del suelo
Que sea con decimales
Que quedase justamente ahí
Así que por eso
Ya lo tenemos aquí
Ok
Perfecto
Vale
¿Cómo lo lleváis?
¿Todo bien?
Si saltas y creas el cubo
Da igual
Porque el cubo
Hasta que no
Porque
Lo que estamos haciendo
Es el click
En el suelo
No cuando
Da igual
Que tú estés saltando
Eso no importa
No importa
Así que
Vale
Pues ya tendríamos
Esto
Ya tendríamos
A ver
Una cosa que podríamos hacer
Que es bastante fácil
Sería eliminar el cubo también
O sea
De hecho
Lo podemos hacer
Vamos a hacer el remove cube
Y luego total
Podemos seguir con lo otro
A la hora de eliminar el cubo
Eliminar el cubo
Sería un poco lo mismo
Tenemos que pasarle
Tanto la x
La y
Y
Y la z
¿Vale?
Podríamos hacer dos cosas
Pero bueno
Esto sería yo creo
Que lo más fácil
Y
Si
Hacemos un set
Del state
Y aquí tendríamos
Los cubos
Pero los cubos
Tendríamos
Que filtrar
State
Filter
Cube
Tendríamos que filtrar
Justamente esto
Que está comentando aquí
Vamos a recuperar
Por un lado
La x
La
O sea
La posición
Del cubo
Y aquí vamos a mirar
Que
Que no sean diferentes
O sea
Si al final
Podríamos hacerlo al revés
Que sea el mismo
Bueno claro
Estamos filtrando
O sea
Que tendría que ser
Tendría que ser así
O sea
Estamos diciendo
Quiero que me
Mantengas
Todos los cubos
Que no están
Justamente
En la posición
Que estamos mirando aquí
¿Por qué?
Porque en esta posición
En concreto
Este es el cubo
Que quiero eliminar
Entonces lo que
Podríamos hacer
Es que cuando
Utilizamos el
Alt
Este
A ver
Vamos a hacer
Que cuando le demos
Al cubo
Y encima
Lo mejor
Es que estoy pensando
Que no hace falta
Ni
Ni que hagamos
Mucha cosa
A ver
Vamos a poner aquí
El cubo
Vale
Aquí en el cubo
Para saber
Cuál es el que tienes
Como seleccionado
Podemos ponerle
Como un hover
Le podemos decir
Bueno
Vamos a hacer
Que tengas un hover
Cuando se te pone encima
Vamos a poner aquí
On pointer
Move
O sea cuando se mueve encima
Vamos a hacer
Que el evento
Vamos a parar
La propagación
Y le decimos
Que
Hemos hecho hover
Y cuando el pointer
Se va
Out
Vamos a hacer
Lo mismo
Esto
Propagation
Set is hover
Y vamos a poner
False
Vale
A ver
Aquí este sí
Pero este
No le ha gustado
Porque
He hecho esto
Vale
Y aquí he hecho
Esto
Vale
Vamos a añadir aquí
Un useState
Is hover
Set is hover
UseState
Le decimos
False
El useState
Lo vamos a
Importar
Y con este
Is hover
Lo que podemos hacer
Justamente
Es
Cambiarle un poco
El material
O sea podemos decir
Bueno el color
De
Si es hover
Es
De un color
Y si no
Pues es de otro
Le podemos cambiar
La transparencia
También
Podemos decir
Que es transparente
Y que
No sé
Le podríamos cambiar
Un poco la transparencia
Pero yo creo que
Con esto
Ah
Aquí se me ha olvidado
El evento
Cuando ahora
Vamos a
Refrescar
Vale
Bueno ahí podéis ver
Que ahora sabemos
Exactamente
Cuál es el que tenemos
Como seleccionado
¿Veis?
Incluso el de arriba
O sea que ahora
Bueno no sé esto
Exactamente como es
En
No sé como es
Exactamente
En el tema este
De
De
No sé si se le pone
Un color
O una opacidad
O lo que sea
Pero al menos ahora
Ya sabemos
A cuál me estoy refiriendo
Exactamente
Lo bueno de esto
Es que ahora
Podemos hacer justamente
Lo del onclick
Que luego lo utilizaremos
Para otras cosas
Pero es que ahora
Cuando hacemos un onclick
En esta malla
O sea en esta caja
Podemos decir
Cuando hagas un onclick
En esta caja
Si tienes
Si en el evento
Podemos mirar
Si en el evento
Tienes la key
Alt key
Si la tienes pulsada
Si tienes el alt pulsado
Quiero que me elimines
El cubo este
Que está en la posición
Que la tenemos aquí
La position
O sea ya tenemos
La posición justamente
Así que
La position
La tenemos en el ref
Vamos a sacar
El x, y, y, z
De ref
Current.position
De hecho esto
Lo podríamos dejar
Aquí
Para que justamente
Solo haga aquí
Y esto
Vale
Nos falta el removeCube
Que esto
Importamos el useStore
UseStore
El store que hemos creado
Para tener
El método este
Así que
Ponemos removeCube
State.removeCube
Y esto
Tiene que ser un array
Esto lo hacemos
Array básicamente
Por si luego
Tenemos que
Añadir más
O lo que sea
Y con esto
Vale
Ya tenemos aquí
Vale
Lo vamos añadiendo
Y ahora le decimos
Fuera
Ay
Hostia
Y porque no puedo
Seleccionar ese
Vale
Este no
No funciona bien
A ver
Vamos a
Refrescar
No
No funciona
Si tengo el altkey
A ver
Una cosa
También importante
El stoppropagation
Este
Que si no
La liamos parda
Stoppropagation
Vamos a mirar
Si tenemos
El altkey
Aquí
Yo diría
Que esto
Debería funcionar
El altkey
Y el onclick
En el mesh
Vale
Vale
Veo que no funciona
Vamos a ver
Por qué no funciona
No puede leer
Las propiedades
De undefined
Leyendo filter
Vale
Seguramente
He hecho mal
Esto
Este
La madre
Que me trajo
Vale
Vale
Ya está
Ya está
Ya está
Ya funciona
Ya funciona
Ya podéis eliminar
Cubos
Ya podemos eliminar
Cubos
Incluso el que tenemos
Aquí arriba
Vale
Pues ya tendríamos
Lo de eliminar cubos
¿Cómo vais?
¿Todo bien?
Si lo he puesto
Cubes
En catalán
¿Por qué no usar
El id
Para filtrarlo?
Esa es una buena
Pregunta
Porque justamente
Estaba pensando eso
Podríamos utilizar el id
Pero lo que estoy pensando
Sobre el id
Creo que sería lo ideal
De hecho
Yo creo que le podríamos pasar
O sea
Creo que tiene sentido
Vamos a intentarlo
¿Vale?
Porque creo que tiene sentido
Lo he pensado antes
Y digo
Ostras
¿Por qué no utilizamos el id?
Pero digo
Mira
Por ahora vamos a hacerlo así
Pero creo que le podríamos pasar
La id
Porque como no se lo he pasado
No lo he hecho así
Pero bueno
Lo podemos cambiar ahora
Le podemos pasar la id
Aquí recuperar la id
Y en el remove cube
En lugar de utilizar
X no sé qué no sé cuánto
Le podríamos pasar la id
Vamos a probar esto
Yo creo que debería funcionar
Así que
Y esto lo simplifica bastante
Porque esto sería
Cube
Cube
Que sea la id
Esto así
Yo creo
Que esto
Tiene sentido
Vale
Lo he hecho al revés
Lo he hecho al revés
Sabía que lo había hecho al revés
Pero hasta que no lo he visto
No me lo he creído
Vale
Vale
Ya está
Sí
Tiene sentido
De hecho
Ya te digo
Mientras lo estaba haciendo
De hecho en el vídeo
Ellos lo hacen así
Y tiene sentido
Que sea con la idea
Es mucho más fácil
Mucho más sencillo
Y menos problemas
Y además que tengo la información
Así que bien visto
Y ya está
Pues aquí lo tenemos
Esto
Vale
¿Qué más?
¿Qué más podríamos hacer?
Podríamos añadir
Los
O sea
Poner cubos uno al lado del otro
¿No?
Vale
Los cubos los estamos renderizando
Nos falta poner los cubos uno al lado del otro
Tenemos el resto de texturas
Tendríamos la selección de la textura también
Que eso está interesante
Vale
¿Qué hacemos?
Selección de texturas
O poner un cubo al lado del otro
¿Qué hacemos?
Selección de texturas
Texturas
Cubo al lado del otro
Joder
Cada uno dice una cosa
Multijugador
Sí, claro
Texturas
Sí, hacemos
Joder
Que cada uno dice una cosa
Cada uno dice una cosa
Cada uno dice una cosa
Cubo uno al lado del otro
Uno al lado del otro
Ahora que estamos
Viendo posiciones
A ver
Yo lo decía más que nada
Para dejar de ver tantas posiciones
O sea
Bueno
Creo que habéis dicho bastantes texturas
Apotación
Texturas
Bueno, más o menos
Más o menos
Vamos a hacer lo de las texturas
Porque es bastante visual
Creo que todo el mundo entenderá
Y luego hacemos lo de un cubo al lado del otro
Que también está súper interesante
Venga
Esto lo vamos a hacer rapidito
Vale
Vale, primero
Necesito las imágenes
Que tenemos estas imágenes
Import
All as images
From
Images
Images
Export
Const
Textures
Selector
Esto va a ser un momento
Vale
Esto va a ser visible
Solo
Cuando le demos
A uno de los números
O sea
Al principio no será visible
Vamos a tener la textura
Textura
Vale
Vale
Del store
Que hemos creado
Vamos a recuperar
Cuál es la textura
Que tenemos
Use store
Cuál es la textura
Que tenemos seleccionada
Y cómo cambiar la textura
Y este cambio
Es un estado global
Porque afecta también
Cuando creamos una caja
Así que ya teníamos esto
Tenemos
El keyboard
El keyboard
Que tendríamos que poner aquí
A ver
Use keyboard
Tendríamos que seleccionar
Esto
Esto
Es lo que tendríamos que
Escuchar del teclado
Así que importamos
El use
Keyboard
Que es el custom hook
Que hemos hecho antes
Use keyboard
Use keyboard
Y este custom hook
Nos va a devolver
Justamente
Cuál es la textura
Que hemos seleccionado
¿Vale?
Ahora
En el efecto
Use effect
Vamos a crear aquí
Vale
Esto está bien
Esto está bien
¿No?
Podríamos hacer esto
¿No?
Si es dir
Hace esto
Si es no sé qué
Hace esto
A ver
¿Cómo podríamos hacer esto?
Options
Podríamos tener
Dirt
Grass
Glass
Wood
Lock
Entonces
Selected
Texture
De todas estas
Bueno
Esto tiene buena pinta
Las keys
Options
No
Las keys
No
Necesitamos las entries
Las entries
Porque esto
Esto me dirá
Si esto es true
Si es false
Necesitamos las dos cosas
No te puedes quedar con una
Entonces
Vamos a tener
Object
Bueno
Con las keys
Puedes mirarlo con el index
También es verdad
Pero es que así
No
Entries
Creo que es más
Más fácil
Así que
Entries
De las texturas
De las opciones
Vamos a buscar
Vale
Key
Sería la texture
Y
Is enable
Sería la
La opción
¿No?
Si sería true
O false
O lo que sea
Entonces
Texture
¿Vale?
Encontramos la que esté
La que sea
Enable
¿No?
Si
Selected texture
Is enabled
Ok
O sea
Buscamos
La textura
Y esto nos debería
De volver
Los
O sea
Cuando hago el find
Esto ¿No?
Selected texture
Debería ser el primero
A ver
A ver
Aquí
No sé si es que me falta
Ah
¿Qué me está pasando aquí?
¿Qué me está pasando aquí?
Saliando el
Is enable
Vale
Console log
Selected texture
Y aquí en el use effect
Vamos a hacer que esto cambie
Claro
Aquí hay que poner todo esto
Dirt
Grass
Porque cada vez que cambia una de esas
Tenemos que cambiar
Todas las texturas
O sea
Cada vez que cambia una de estas
Tenemos que cambiar la textura
Que ha sido seleccionada
Pues con esto
Y con este console log
Al menos
Deberíamos ver
Si cambia
Que no
Ah
Hostia
Tengo que utilizar este método
En algún sitio
Y esto lo he puesto
Images is not defined
Use effect
Vale
Traemos el use state
Set texture
Selected texture
O sea
O sea que
Esto sí
Y vamos a utilizar este texture selector
En nuestra app
Fuera de las físicas
También
No tiene sentido que le
Que le afecte la gravedad
Por ejemplo
Vale
Undefined is not iterable
Esto no sé si es por los images
Creo que sí
Puede ser
No
Vale
Vale
Me dice que no es iterable
Undefined is not iterable
Use store
El options
No
Ah
Creo que es que no puedes
Hacer un return
O sea
Tienes que hacer un return
De un
Tampoco
No
Ah
Espérate
Texture selector
Yo esto lo he importado
O sea
Lo he importado aquí bien
Le llamo texture select
Texture selector
Texture selector
Use effect
Undefined is not iterable
Esto normalmente
Puede ser por uno de estos
Ahora voy a tener que empezar
A comentar cosas
Para ver donde está el problema
Donde está el problema
Undefined is not iterable
A ver
Vale
Será por el
Use effect
O sea
Por el use keyboard
Vale
Es el use keyboard este
Tiene pinta
¿Por qué?
El use keyboard
Me está dando este problema ahora
Pero esto
Lo está
Antes importando bien
¿No?
Es con export const
Esto
Ah
Ostras
La madre que me trajo
La madre que me trajo
Este es el problema
La verdad es que
La información que da
Es un poco
What
Vale
Return null
Use function
Use keyboard
Is not a function
Or return
No sé qué
A ver
Ah no
No
Lo estaba haciendo bien
Si esto está devolviendo
El actions este
Vamos a ver
Vamos a ver que no está devolviendo
El use keyboard
Aquí es cuando
Este momento
Este es el momento
En el que echábamos de menos
Pero si esto lo he usado antes
O sea
No entiendo muy bien
Voy a traerme esto
Voy a poner aquí actions
Voy a poner aquí un console.log
De actions
Vamos a ver que tiene esto
Que no le gusta
Vamos a comentar esto
Un momento
Y vamos a ver aquí
Ta ta ta
Vale
Pues aquí tiene el dirt
El no sé qué
La madre que los parió a todos
Dámelo
Dámelo
Dame eso
Eso es lo que quiero
A ver
Dirt
Grass
Glass
Good
Log
Vale
Pues esto
¿Por qué no me lo
¿Por qué no me lo traes aquí?
¿Ves?
¿Por qué me pasa esto?
Actions
Ah bueno
Esto tiene sentido
¿No?
Porque todavía no
Vale
O sea que hasta aquí funciona bien
Vale
Igual he sido yo que la he liado con alguna cosa
¿No?
Usemos el console.log confiable
Totalmente
Vale
Esto fuera
No
O sea que igual el problema está aquí
En el options y todo esto
Vale
Perfecto
Pues vamos a darle aquí
Use effect
O sea que el problema está en el use effect
Vale
Vamos a quitar esto
Vale
El options
Object entries
No
Ay perdón
Que he hecho de más
Vale
Hasta aquí bien
Ahí tenemos el console.log
Object
Ay
Ah no
Object entries
Options
Pues aquí
No sé si es que
Ah ya sé lo que pasa
Ay Dios mío
Ya sé lo que pasa
Sí la he liado parda
No no
Si es una tontería
O sea el tema es que el selected este
Selected texture
O sea el selected texture este
Puede dar undefined
Y aquí lo que deberíamos utilizar es el texture por defecto en todo caso
Ya está
Ya está
Ya está
Joder ha costado eh
La madre que lo parió
A ver
O podríamos poner
Vamos a poner esto
Selected texture
O sea si tenemos una textura seleccionada
Lo veas eh
Bueno amigos así se aprende
El que tiene boca se equivoca
Y el que tiene nariz
Lo vuelvo a repetir
No pasa nada
Selected texture
Vale
Cuando tenemos la textura seleccionada
Y esto era una entry
O sea que tendríamos que recuperar
Texture name
Vale
Esto sería selected texture
Recuperamos el primero
Y esto sería así
Ahora sí
Ahora
Ahora sí
Vale
Entonces
Vale
Ahora
Ahora sí
Este console.log
Ahora está funcionando bien
Estamos cambiando ahí la textura
Este console.log
Ya lo tenemos bien
Vamos cambiando la textura
Y por lo tanto
Por lo tanto
No está haciendo
No está
Se supone que está cambiando
A ver voy a poner esto por si acaso
Set texture
¿Por qué?
Ah es que el use store
El set texture no lo he puesto
Vale
Bueno pero ya está pintando bien
Ya pinta bien
Porque ahora lo único que tenemos que hacer es
La textura
Hacemos un set
Set
Ya está ¿no?
Si devolvemos
Creo que si hacemos así
Devolvemos solo el objeto
Hace un match
Automáticamente
Si no utilizamos
Podemos hacer esto
Básicamente
Actualizamos la textura
Uno más
¿Vale?
Y ahora con esto
¿Ves?
¿Ves?
¿Ves?
¿Ves?
Vale
Vale
Vale
Ya tenemos diferentes
Ya tenemos diferentes
Entonces
Esto es el texture selector
Pero nos faltaría
Mostrar algo
O sea
Renderizar alguna cosa
Porque si no
No tiene mucho sentido
Entonces
Use effect
Vamos a renderizar
Aquí
Vamos a poner
Que
Si no está visible
Hacemos el return null
Este que hemos hecho antes
Pero si está visible
Vamos a poner aquí un dip
Dip
A ver
Vamos a bajar un poco de la música
Vamos a poner
Un dip
Y aquí
De todas las opciones
Las imágenes
Que tenemos por aquí
Esta
Las imágenes
Las vamos a
Tenemos
Texture name
Y texture
Texture name
Vale
Vale
Esto me va a fiar
Un poco de GHackoPilot
Aquí
Me va a fiar
Más que nada
Porque
Antes
La he liado parda
Por eso
Vamos a ver
Si GHackoPilot
No la lía
Y os explico el código
¿Vale?
Os explico
Vale
Object entries
Images
Viene de este
Fichero images
Que estamos cargando
Básicamente los ficheros
Directamente
Lo que quiero
Es enseñar
Como una fila
Con todas las imágenes
Así que dentro de este dip
Lo que tenemos aquí
Renderizamos cada una de las imágenes
Utilizamos el texture name
Bueno
Este es el nombre de la textura
Que básicamente va a pillar
Grass image
Dirty image
No es que sea muy correcto
Que sea el
Como justamente
El texture name
Porque claro
¿Cómo hacemos esto entonces?
¿Cómo hacemos?
A ver
No lo vamos a hacer en un click
Lo podríamos hacer
Pero como lo hacemos con los dígitos
Así no
Tampoco nos tenemos que preocupar
Esto va a ser el image name
En realidad
O image
Esto sería el image
Vamos a poner image key
Y vamos a poner aquí image
Que tiene más sentido
Entonces ponemos aquí image key
Alt image key
Y aquí el image
Y esto
Vale
¿Qué pasa?
Vamos a quitarlo de visible por ahora
O sea
Vamos a hacer que sea visible todo el rato
Para que lo veamos siempre
Vale
No
Otra vez no
Vale
Image is not part of the namespace
Vale
Object interest image
Es que esto
Vamos a ver
Que nos devuelve esto
Porque me
A ver
Este object interest image
Esto tiene que ser un array
Vale
Un array de dos
Y tendríamos aquí la key
Y tendríamos aquí la
Source image
Bueno
Esto es la
Se supone que es el
El path
O sea que hasta aquí bien
O sea este path
Lo tenemos bien
Vamos a poner esto por aquí
Y esto por aquí
Y aquí devuelve la imagen
Pero se está quejando de
Box
No este no
Eh
¿Qué es este error?
Estamos intentando
Dice image
Y lo pone mayúscula
No es parte del
Three namespace
¿Has olvidado extender?
No
No he olvidado extender
Pero me parece que aquí
Hay algún otro problema
Que no es
Joder
Parecía que esto iba a ser lo fácil
Y al final es lo que más problemas
Nos va a dar
El tema de las imágenes
Me cago en la hostia
Mira que ahora es simplemente
De hecho esto
Vamos a ponerlo ya
Texture selecto
Si esto es lo más fácil
Y estos son las imágenes
A ver las imágenes
Las estamos importando aquí
Las estamos iterando
Pero es como que está intentando
No sé por qué esto
Lo está detectando
Como si fuese
Porque si le quito esto
Seguramente funciona
Funciona
Image key
Si hago esto
Tampoco
H1 is not part of
Hostia
Es que
No sé si es que lo he puesto
Que se renderice
Donde no es
Ah amigo
Claro
Claro
Es que esto no lo puedo renderizar aquí
Esto no es parte
Ya está
Sí
Voy a empezar de nuevo
No
El problema es que lo he puesto
Dentro del canvas
No lo tengo que poner dentro del canvas
Tengo que ponerlo fuera del canvas
¿Vale?
O sea
Tenemos que ponerlo fuera del canvas
Vale, vale
Ya está, ya está
Ya está, ya está
Cago en la leche
Cago en la leche
Bueno
No se ve
No sé por qué motivo
No se ve
Visible
True
Pero ahora ya sabemos
Por qué
No funcionaba
No funcionaba
Porque lo había puesto dentro del canvas
Dentro del canvas
No tiene sentido que pongamos
La cosa esa
Vale
Vamos a ver
Ah
Y no se ve
Porque está por debajo
La rata
Claro
Tenemos que poner
Position absolute
A ver
¿Dónde estás ahora?
Vale
No sé por qué te has puesto ahí
Pero top 0
Vale, vale
Ahí sale
Ya está, ya está
Ya está
Ya está
50
Vamos a poner el transform
Vale
¿Veis que ya está ahí?
Ya está ahí
Ya está ahí
Bueno
Ya está ahí
Ya está ahí
Pues ya
Ya lo tendríamos
Ya lo tendríamos
Vamos a poner aquí el
Use store
Pointer
A ver cuál era
El class name
Texture selector
Vale
Texture selector
Position absolute
Esto también
Podríamos poner
Que el texture selector
Image
Sea más grande
¿No?
100 píxeles
Por lo menos
Vale
Esto
¿Veis que se ve también
Como mal?
¿Veis que se ve como mal?
Que por cierto
Queda por debajo
Esto debería quedar por encima del
Esto
A ver cómo lo podemos hacer
No sé si podremos hacer
Que el pointer
Si no lo podríamos mover
Aquí
A ver si aquí
Si lo movemos aquí
Ahora sí
Para que quede por encima del pointer
No tiene mucho sentido
No sé si te
No sé cómo es tampoco en
Vale
Esto lo podemos dejar así
Y esto que se ve como regulinchis
Esto lo que podemos cambiar
Es el image rendering
Rendering
Creo que era
Pixelated
Y vais a ver la diferencia
¿Veis?
Ahora se ve mejor
Ahora se ve mejor
La diferencia importante
Hostia
Eso es demasiado grande
Vale
Pues lo podemos dejar así
¿No?
Ponemos poner aquí
Como un
Gris
Light grey
No me acuerdo si esto es un color
Padding
16 píxeles
Vale
No sé
Borde
2 píxeles
Solid
La verdad es que no sé
No sé cómo es
Minecraft porque no he jugado nunca
No he jugado nunca
Pero bueno
Esta podría ser
Podría ser una forma de hacerlo
¿Eh?
Luego
Cada uno que lo haga como quiera
No tengo ni idea
Cómo se supone que sale
No tengo ni idea
Podríamos poner que esto sea
Display flex
Y le ponemos un gap
16 píxeles
Vale
Algo así
Algo así ¿Eh?
Más o menos
Más o menos
Pero lo bueno es que ahora sale como pixelado
¿Sabes?
Podríamos jugar como método de investigación
Ya te digo
Vamos a poner esto un poco más oscuro
Vale
Entonces
Además
Lo que tendríamos que hacer
De alguna forma
Es indicar
Cuál es el que está activo
¿No?
Esto no debería ser muy difícil
Porque aquí
Ya tenemos la información
Vamos a quitar cositas por aquí
¡Qué bonito ha quedado!
¡Qué bonito ha quedado!
Podríamos ponerle un class name
De que
Si la textura
Pero claro
El image key
El image key
Es el mismo nombre que la textura
Porque creo que no
Creo que no
El image key
Si miramos aquí
Images
¿Ves? Ponía
Tirt image
No sé qué
No sé cuánto
Punto replace
Image
Portal
Algo así
A ver ahora
No es lo más
No es lo mejor
¿Vale?
Pero al menos
Para ver si podemos ver
Cuál es el que está seleccionado
En un momento
Ah, mira
Selected
Sí
Ya va cambiando
El selected
Entonces
Podemos hacer que
Una vez que el selected
Cuando tengamos uno seleccionado
Texture
Selector
Image
Punto
Selected
Tampoco sé
Tampoco sé
Si hay algún color
Vamos a ponerlo rojo
Yo que sé
Ay
Ay
Ahora
Bueno
No sé
No lo sé
No lo sé Rick
No sé si ese es el color
A ver si me pone
Ay, porque no puedo elegir el color
Bueno, no sé
No sé cuál poner
Blanco
No sé
Rojo
Rojo pasión
Bueno
Ya está
El tema es que ahora
Cada vez que cambie
Pues
Como podéis ver
Va un poco raro
Ah, porque he puesto
En otro orden
He puesto en otro orden
Vale
Interesante
Es que he puesto mal los números
No es que los he puesto mal
Es que al final
Los he ordenado de una forma diferente
O sea
El grass es el 1
El 2
Es este
O sea que esto lo debería mover
Hostia
No sé si esto va a funcionar
O sea
No sé si va a funcionar esto
De ponerlo así
O sea que yo debería poner
La selección a mano
Claro
Es que este image
Es que he puesto aquí
Ay
¿Sabes?
No sé si
Me va a continuar
Por ejemplo
El 1
Está bien
El 2
Es el
El grass
No, es el
El 2
Claro, este es el glass
Glass
¿Ves?
Pero me sale la imagen
En otro sitio
O sea que no
No me queda muy claro
Bueno
Tendría que ajustar
Las teclas
Porque las teclas
La posición en la que están
No es la correcta
Pero bueno
Ver se ve bien
Lo único que nos falta ya
Es hacerlo visible
Durante un tiempo
O sea
Hacemos que sea invisible
Y que cuando le demos
A un botón
Vamos a crear aquí un efecto
Use effect
Y hacemos
Un timeout
Vamos a hacer que
Visibility
Timeout
Vamos a hacer que
Durante un tiempo
Cuando le des
Al botón
O cuando lo estés cambiando
Pues que se haga visible
Entonces
Vamos a poner
Que sea false
Después de
Dos segundos
Y lo que podríamos hacer aquí
En todo caso
Bueno
Por ahora
Vamos a hacer así
A lo bestia
Set visible
Lo ponemos a true
Y esto lo hacemos
Cada vez que cambie
La textura
Que está activa
Cada vez que cambiamos
La textura está activa
Pues lo ponemos
Que se vea un momento
La cajita
Cuando esto se cambie
Vamos a hacer un
Clear teamout
Del visibility
Timeout
Y ya está
Entonces
Ay porque esto
Ahora
Vale
Entonces yo estoy aquí
Tan tranquilo
Estoy poniendo cajitas
Y digo venga
Cambio de cajita
Vale
Perfecto
Bueno
Dos segundos igual es demasiado
Bueno no sé si es demasiado
Pero podremos hacer esto
Y esto del visible
Igual lo que podríamos hacer aquí
Más bien
Sería algo más bien
Textuse selector
Y que si está visible
En lugar de hacer que tenga null
Y eso
Podríamos hacer aquí un hidden
Si es visible
No ponemos nada
Y si tal
Vamos a poner que
Hidden
Vale
Esto lo quitamos
Vale
Lo único
Estoy pensando
Cómo hacer que esto
No nos
No nos moleste
Ponemos aquí esto
Textuse selector
Hidden
Selector
Punto
Hidden
Vamos a poner
Display none
Y ya está
Al menos estará ahí siempre
Vale
Pues ya está
¿Qué os parece?
No está mal
No está mal
Apenas selecciona la textura
Que cierre
Bueno la textura
Es que le das al botón
Es justo
Le das al botón
El tema es que
Que el crosser
Debería estar más abajo
O que está más abajo
Yo creo que está bien
Voy a jugar un mes
Para valorar el coste
Del proyecto
Típico de alguna empresa
De desarrollo
No está mal
No está mal
No está mal
La verdad es que
Nos queda poco
Pero lo vamos a dejar
Para otro día
Lo vamos a dejar
Seguiremos
Mañana
¿Queréis que sigamos mañana?
Igual seguiremos mañana
Ya está
Está bien
No sabía cómo ibas a hacerlo
En Minecraft no desaparece
Simplemente está abajo estático
Bueno lo puedo dejar abajo estático
Si queréis
Lo hacemos un momento
A ver
Sinceramente
Es que no sé
Como nunca he jugado
A Minecraft
Nunca he jugado
No sé exactamente
Cómo se supone
Que es
Pero vaya
Si me decís que es abajo
Pues nada
Lo dejamos abajo
Le ponemos aquí
Un botón
Botón 0
Obviamente
Lo vamos a tener que hacer
Más pequeño
O sea esto
Bueno más que 0
Vamos a poner un 32
O 30
Lo que sea
Esto
También lo tenemos que quitar
Ya no tiene sentido
Bueno
Lo que tiene sentido
Es esto
Esto
Esto
Esto
Esto
Ah que cabrón
Esto
Es un poco más complicado que eso
Vale
Esto así
Lo hacemos más pequeño
¿No?
Porque supongo que tiene sentido
Que queda como más pequeñito
No tan grande
Así que las imágenes
Imagino que será algo así
No lo sé
El borde
Ahora ya no tiene sentido
Que sea tan grande
Porque obviamente
No sé si me he pasado
75
El border
Vamos a hacer que sea
Más pequeño
Y el padding
Pues menos exagerado
No sé
Algo así
No sé
No sé exactamente
Cómo es
Pero pues algo así
Pero mira
Ya tenemos aquí
Nuestro
Nuestro jueguecito
Nos falta un par de cosas
Que si queréis
Las podemos hacer mañana
Esto también lo vamos a hacer
Un poquito más así
Que esté más pegado
Algo así
¿Qué os parece?
Está mal ¿No?
Mañana le damos cañada
Mañana sí
Mañana fijo
Se puede saltar
Mira
¿Qué te parece?
¿Se puede saltar o no se puede saltar?
Se puede saltar
Se puede saltar
Y se puede ir creando
Mañana haces el pico de la pala
No
Mañana hacemos
La creación de las cajas
Cuando están pegadas
Y ya está
La verdad
Quedó muy guapo
¿Se puede poner bloque encima de otro?
Eso es lo que nos ha quedado
Big Dread
Por hacer
Mañana lo hacemos
Mañana directo jugando al Minecraft
Bueno, sí
Podemos jugar
Mañana hacemos la casita
Porque total
Podemos añadir más texturas
Podemos hacer un montón de cosas
Y no queda
Podemos guardar en el local storage
Eso también lo íbamos a hacer
Así nos podemos al día
Venga, va
Os lo subo en un
Vamos a crear un Minecraft clone
Vamos a crear un repositorio
Minecraft
Minecraft
Clone
Clone
Clone
De Minecraft
Vale
Ta ta ta
Mañana el multiplayer
¿El bloque blanco era el vidrio?
Sí, es el vidrio
Vamos a poner esto por aquí
Minecraft clone
Este es el clone
Vale
Git init
Git init
Git remote
Add
Origin
Vale
Ta ta ta ta
Package lock
Ojo
Vaya
Vaya por dios
This is cool
Venga
Uy, porque se me ha abierto esto por aquí
Vale
Y con esto
Ya lo tenemos por aquí
Ya tenemos ahí el clone
¿Cómo se rampa?
Minucraft
El Minucraft
No, Minecraft clone
De hecho, antes de que me venga alguien y me meta ahí hate
Lo hemos sacado de aquí, de FreeCodeCamp
Yo me he basado bastante en lo que ha hecho esta persona
He cambiado alguna cosilla
Tampoco muchas
Y lo voy a poner en el Ritmi
Para que nadie
Si no
Basado en el vídeo de FreeCodeCamp
Dicho esto
La verdad es que ha quedado bastante bien
No nos podemos quejar
Ha faltado alguna cosa por hacer
Pero entre que hemos estado explicando y todo esto
No sé
Dicho esto
Os quiero preguntar
¿Os ha gustado?
¿Os ha gustado?
¿No os ha gustado?
Porque la verdad es que
No sé
No sé si este tipo de
Mucha gente