¡Añadimos texturas! Ray casting HTML5 con JavaScript (Parte4)
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- ¿Quieres crear tu propio clon de Wolfenstein 3D usando HTML5 y JavaScript? En este cuarto programa, te cuento cómo renderizar las paredes en 3D con texturas.
🎮 ¿Quieres más? Aprende a programar tus primeros juegos HTML5 paso a paso y desde cero con mi curso de Udemy
👉 www.udemy.com/...
Basado en el motor creado por Gustavo Pezzi: github.com/gus...
¡Por cierto, se me olvidaba! En cuanto publique el último vídeo de esta serie, también compartiré el código completo del motor de Ray casting para que podáis jugar con él y tunearlo a vuestro gusto, que quiero ver qué cosas programáis con él ;)
¿Qué os parece cómo está quedando nuestro motor? En el próximo vídeo añadiremos sprites para tener items y enemigos :)
buenardo.
11:43 pensaba que le tenia que restar uno pero esta todo bien 😎😎😎
Na'guará Javier, estos tutoriales son una verdadera maravilla, mi mas sincero agradecimiento y felicitaciones
¡Muchísimas gracias, Alejandro! Te lo agradezco mucho ¡Sigo trabajando en nuevas series como esta para traerlas al canal! ;)
CARNAL ERES EL FUCKING AMO BUSCABA UN CURSILLO DE RAY CASTING ASI GRACIAS VIEJO, EXITO CON TUS VIDEOS
Thanks bro! te lo agradezco mucho. Hice este canal precisamente con ese fin: explicar las cosas que yo he buscado estos años y nadie contaba en Internet ¡Un abrazo!
Que buen ejemplo de desarrollo... Simple y fantástico resultado
¡Muchas gracias, Yury! me alegra mucho poder traeros contenido de este tipo al canal ^_^
Gracias Javier.. tus tutoriales son de gran ayuda!!!
De nada, Robayo Studios! Es un placer. Me encanta saber que mi contenido es de utilidad ¡Un abrazo!
Jaja la parte que todos aman, yo personalmente después de estar leyendo tantas referencias de raycasting estoy cansadisimo de ver las texturas originales pero lo bueno es que podemos usar cuales queramos!
¡Eso es! Precisamente os invito a hacer fotos de las paredes de casa y usarlas como texturas ;)
Me gustan mucho tus vídeos, hace que parezca fácil.
Bueno, pues ya he saltado a este cuarto video.... Al final, he vuelto a "picar" el código de cero, esta vez en JavaScript, y funciona perfectamente, (con este código perfectamente funcional cada vez estoy mas convencido que el problema que tengo con mi código son redondeos de los floats), pero bueno, seguiré el tutorial en JavaScript, (si bien no es mi lenguaje natural, jajaja), y luego atacare el problema. MUCHAS GRACIAS, como siempre Javier.
¡Muchas gracias JC! Me alegra mucho que te haya gustado. Ya, pero bueno, al verlo paso a paso y sin librerías la ventaja es que, si lo entiendes, puedes hacerlo en cualquier otro lenguaje ¡Mucha suerte, ya me contarás qué tal! ;)
Excelente explicaciòn...
Muchas gracias Humberto!
Muy buen video!! No domino muy bien la programación (aún) pero la verdad que a un juego retro como ese le pegaria mucho el rollo Dungeons and dragons donde puedes ser un mago que tire hechizos a enemigos y que haya un boss o algo que lo pete todo
¡Mola la idea, gracias Charlie! Me alegra mucho que te haya gustado el vídeo :D ¡Un abrazo, crack!
muy util y bien explicado gracias
¡Gracias Iván! :D
Excelente curso
Visto en 23/10/2021
Interesante, cuantas partes tendrá la serie?
Creo que 2 más, para cubrir la parte de cómo pintar los sprites, que tiene su miga también
Disculpa pero ¿Tú me darias consejos de cómo cuando tuvimos un error y la persona nos regaña diciendo lo que debimos no hacer como lo tomamos en opinión? Gracias.
Comentare cada linea :3. BDeah. Igual comentare mientras vea :3
Je je je espero que te haya gustado :)
Sé que esto fue hace mucho, y aun no he revisado si este problema es corregido en la siguiente parte, pero las texturas no están representadas en la imagen de un tamaño adecuado. Se puede notar que están demasiado grandes para la pared.
¿Hay una forma de asegurarse de que la textura siempre se estreche o expanda para que cubra al 100% la pared?
Al final lo que hice fue cambiar las dimensiones del mapa 640x640 e hice que tanto los tiles como el tamaño de la textura fueran de 64 pixeles.
Después de eso hice que al momento de dibujar la imagen this.pixelTextura fuese pasado a un entero.
ctx.drawImage(
tiles,
parseInt(this.pixelTextura),
(this.idTextura - 1) * altoTextura,
1,
altoTextura,
this.columna,
y1,
1,
alturaImagen
);
Excelentes tutoriales!
@@DerkerBluer si se puede, haciando columnaescalada = floor(columnatextura * texturanacho);
Es posible crear juegos con android studio? O existe otra plataforma mas efectiva? (Apartado grafico retro) exitos compa
¡Hola! La verdad es que no he usado mucho Android Studio pero, hasta donde yo sé, está más pensado para crear apps tipo página web, es decir, con componentes: botones, pestañas, cuadros de texto, etc, no para crear entornos gráficos para juegos. Para programar de forma visual y con resultados bastante buenos, está Godot que además es gratis :) ¡Un abrazo y suerte a ti también, compañero! ;)
Si es posible pero la verdad no te lo recomiendo, de por si Android Studio es muy pesado e intrincado para desarrollo de apps no digamos para juegos. Busca mejor otras herramientas orientadas a tal fin como LUA, Unity, etc
@@yuryeuceda8590 Coincido. Yo tiraría por Unity o Game Maker Studio, los dos son geniales.
Lo sento javi. Pero tengo sueño :'u
No te preocupes, descansar es lo más importante ¡Un abrazo! ^_^
No logro entender para que sirve el valor de wallHitX y el de wallHitY, tampoco de para que sirven
Estaba creando mi propio Engine con javascript y me encontre con este tutorial y me encanto lo de agregarles texturas, creo que es el unico que lo explica, pero aun viendo los episodios anteriores sigo sin saber para que sirve
antes en los primeros capitulos, era un mapa, no se veia en 1° persona y esos valores le decian donde terminaba el rayo :3
tengo un problema y es que no se ve nada y el codigo es el mismo me podrias ayudar?
Ya lo solucione es que en el capítulo anterior me olvide pasarle a los rayos la columna
@@Slender303YT xd
@@danielesquivel3155 ya lo arregle es que al rayo no le estaba pasando la columna osea la i
hola de nuevo, tengo un pequeño problema donde las paredes se vuelven "más delgadas". Si alguien me puede dar una respuesta, se lo agradeceré.
¿Qué te ocurre exactamente con las paredes, R?
@@javianmuniz las paredes estan más anchas que largas
Jjja. Nisiquiera termine lo de los otros videos. Y ya sues otro xd
Je je je intento seguir el ritmo, aunque esta semana no creo que haya vídeo, pero ya estoy trabajando en el siguiente :)
@@javianmuniz :3