Skip to content

Author: jahepi

Matrix Transformations

This new post is not about a game project but it is related to game development, i dedicated this post to one of the major math concepts use in game programming and computer graphics in general, Matrix Transformations.

The first demo implements a 2D matrix transformations from the ground up on the Html5 Canvas, it is a top-down tile map where you can move the hero “red square”, there are some control sliders below to apply transformations:

Here is the direct link to the demo if you want to see the code: https://games.jahepi.net/2dtransformations/index.html

The second demo implements a 3D rotation using matrix transformations, it rotates the Z axis (XY plane), Y axis (XZ plane) and X axis (YZ plane) of a 3D square.

For reference, this is how 3D rotation on X, Y and Z axis work, we have in total 3 planes, we are going to start with the XY plane first, where we rotate the Z axis, this is is a clockwise rotation in a left handed system, here is a graphic representation of how the XY plane looks like and we are going to plug the values in the matrix:

XY PLANE

xy

 

The basis vectors X and Y were rotated certain degrees, as you can see the hypotenuse length is 1 so the sides of the right triangle corresponds to the ratio of the trigonometric functions cosine and sine.

We plug the values in our matrix (Z axis rotation):

[ x               y         z]
[cos(0),  cos(0), 0][x]
[-sin(0), sin(0), 0][y]
[        0,            0, 1][z]

Now we are going to do the same with the two planes left.

YZ PLANE

yz

 

 

We plug the values in our matrix (X axis rotation):

[ x            y           z]
[1,            0,         0][x]
[0,  cos(0), sin(0)][y]
[0, -sin(0), cos(0)][z]

 

XZ PLANE

xz

 

 

We plug the values in our matrix (Y axis rotation):

[ x            y            z]
[cos(0),  0 -sin(0)][x]
[0,            1,         0)][y]
[sin(0),   0, cos(0)][z]

 

Here is the demo when we apply this transformations to the vertices that form the square:

Here is the direct link to the demo if you want to see the code: https://games.jahepi.net/3drotation/index.html

If you want to learn more about this topic i recommend the reading of 3D Math Primer For Graphics And Game Development, while this book does not focus on just matrix transformations, it is really a great resource of knowledge if you want to learn the math behind 2D and 3D programming.

 

 

 

Leave a Comment

Canvas Tetris

Let me share with you my latest addition to my gaming list projects, i have been playing a lot Puyo Puyo Tetris lately which is an awesome game for Nintendo Switch, i was thinking, hey!, i love this game so much, why not create a Tetris clone using HTML5 Canvas and ECMAScript 6 language?, so i started implementing the game a few days ago, i reused some classes from my previous game projects so the development was lighting fast.

The music played in the game is from a group known as PowerGlove, if you have not heard of them, go ahead and look for this incredible group and listen some of their recordings.  

I do not know if i could be committing some copyright infraction here, but i am planning to record my own Tetris metal theme song on my electric guitar soon but meanwhile i am using the PowerGlove version for now, i hope there would be no problems.

Regarding the mechanics of the game, each minute the speed of the game increments, you have to clear 10 lines to avoid the speed increase or if you clear 10 lines the speed reduces, therefore your mission is to clear as many lines as you can to prevent the game to end.

As usual, here is the link to the code repository:

https://bitbucket.org/jahepi/jstetris

And the link to the playable version (use arrow keys to move tetriminos):

http://games.jahepi.net/jstetris/index.html

1 Comment

Drip Drop Puzzle Game

I am proud to share Drip Drop Puzzle Game with you, for it is the first time that I created the graphics and sound by myself. It is also the second time that I implemented a web browser game with ECMAScript 6 and HTML5 Canvas.

Although development took about 3 weeks; I was satisfied the whole time and I had a awesome time creating this game for you all even though I had to work 3 times harder than normal. I even started thinking of ways to share this proud experience with you.

My particular objective was to publish my game at Newgrounds which it is a site for an indie developers to show their creations, all content must be done by yourself so this was a great opportunity to share my game and receive some feedback, i am not going to lie, i was scared, i like my own creations but when other people comes into play, there would be some mixed opinions about it, some bad, some good, so i was afraid i could not take the bits of the bad ones, in any case i did it, and i am glad of the decision, at end a received a regular score from the community which is a great start for someone who likes making games as a hobby.

The objective of the game is to extinguish the torch flames with the drips and drops of water from melting ice cube, game instructions are presented while advancing through levels.

Requirements:

  • Mouse

Features:

  • 10 Levels, from easy to hard.
  • Leaderboard, top 10 from best times.

Link to the game:

https://games.jahepi.net/labyrinth/index.html

Source code:

https://bitbucket.org/jahepi/labyrinth-game

Newgrounds link:

https://www.newgrounds.com/portal/view/702883

Any feedback would be appreciated.
Hope you enjoy it.

4 Comments

HTML5 game demo from scratch

It was a while since I posted my last entry because for 2 months, I was crafting a web game using the programming language Javascript and the HTML5 Canvas element. It was a incredible success and satisfyingly fun!

In this entry I will share with you the details of my latest creation – “Jahepi’s Dungeon”.

Before we begin, I want you to know that I created this 2d scroller game to test my programming skills with Javascript and the HTML5 Canvas element. I did not however design the graphics. With that being said, I would like to thank the gamedevmarket community at https://www.gamedevmarket.net and the opengameart community at https://www.opengameart.org for providing me with the paid-for and the free graphics and assets that I used on Jahepi’s Dungeon.

Jahepi’s Dungeon Overview:

The Demo I created has a total of 3 levels that each has a set amount of gold coins you need to collect and a boss you need to defeat before passing the level. There are checkpoints in each level that will ease the frustration and agony you endure after falling into lavapits and getting slaughtered by each of the bosses. But do not be too scared! Our main character is a special kind of character that has unlimited lives. So even if you die a few hundred times, you are sure to beat the demo on the 501st try.

After you load the game, you will be familiar with the layout. As a gamer, I am sure you have seen this type of layout a thousand times. The controller is a simple Left, Right, Up, Down, A, B. It is located at the bottom left of the screen so you can play with  a mobile device. You can however use your keys on a keyboard if you are using a PC. Feel free to leave a comment if you have any ideas for a better layout on this sweet 2d scroller.

Demo – https://games.jahepi.net/dungeon/index.html

Source Code – https://bitbucket.org/jahepi/html5gameengine/wiki/Home

Regards

 

Leave a Comment

Multiplayer Space Deathmatch for Android

This is a game i made for Android devices in 2016, it took about 3 months of development, i am really happy with the final result.

Thanks to Joseph Miraglia for writing such an amazing description.

Description of the game:

Play your Family and Friends, whenever and wherever, in a Local Multiplayer Space Shooter Deathmatch Arcade.

Jahepi presents Multiplayer Space Deathmatch; a 2016 Local Multiplayer Arcade offered free in the Google Play Store for Family and Friends to interact while battling each other in a free for all Space Deathmatch, on Smart Phones, Tablets, and even Computers. And just because it is free, does not mean you are limited from having an amazing time with your Family and Friends.

Strap on your Space Suit and get ready for intense, thrilling, and exciting Space Deathmatch Battles with your Family and Friends!

SPACESHIPS
• Five Spaceships : Columbia, Challenger, Discovery, Atlantis, Endeavour, each with their own diversity.

LOCATIONS
• Four Battle Locations: Andromeda, Centaurus, Pegaso, Sculptor, each with different twists and turns for unique battles.

POWER PICKUPS
• Power Pick Ups: Bigger Missiles, Huge Lasers, Repair Kits, Shrink Rays, but avoid picking up the Slowness!

LAN
• Multiplayer Lan Support: One, Two, Three, and Four Players can play!

LANGUAGE
• English • Spanish

Ultimate LAN Support:
The Ultimate LAN Support allows up to four of any Mobile Devices and Computers to connect and pair with each other, through (A. a Router / B. a Device with Hotspot Tether), for Local Multiplayer Gaming. Ultimate Lan Support does not require an active Internet connection, but does require WiFi.

Site:

https://space.jahepi.net

Play Store:

https://play.google.com/store/apps/details?id=com.jahepi.tank&hl=en

Regards

Leave a Comment

Dog Smash Pumpkins for Android

This is a game i made for Android devices in 2016, the mechanics of the game are really simple, you just have to  kill as many pumpkins as you can to get the most points.

Thanks to Joseph Miraglia for writing such an amazing description.

Description of the game:

The New World is here and for some strange trendy reason, Humans now prefer Pumpkins as Pets, instead of Dogs.

Dogs have been relegated and forgotten by their owners all over the World, and replaced with Pumpkins, but a Dog named Pancho is not satisfied with its owner having Pumpkins as Pets. Pancho the Dog is seeking revenge on all the Pumpkins of the World and knocking them out one by one.

Help Pancho the Dog finish its mission of saving Dogs from their Pet Owners prefering Pumpkins as Pets!

DESTROY THE PUMPKINS
• Knock out the Pumpkins one by one by hopping on top of the them and then smashing the Pumpkins weak spot.

PROVE PANCHOS WORTHINESS!
Pancho is not the only Dog risking its life to save humanity from Pumpkin Loving Pet Pumpkin Owners! Destroy more Pumpkins than all the other Dogs in the World, and prove to Panchos Owners that Pancho is the only Pet Worthy Pet ever!

You will not only reunite Pancho with its Owners, but you will go down in history as the best Dog to Smash Pumpkins on the WorldWide List of Dogs to Smash Pumpkin!

Be part of the top 10 worldwide list of dogs, help them to reestablish their life with humans to normal.

Play Store:

https://play.google.com/store/apps/details?id=com.jahepi.maze&hl=en

Regards

Leave a Comment

Nano MVC Framework PHP

Nano framework es un marco de trabajo muy pequeñito en PHP totalmente en español que utiliza el patrón MVC (Modelo, Vista, Controlador) para la separación de código por responsabilidades en los proyectos.

El marco de trabajo cuenta con:

  • Soporte de namespaces.
  • Integración con DBAL (Capa de Abstracción de Base de Datos) de Doctrine, soporte de los motores más populares como MySQL y Postgres.
  • Auto-completado total al integrarse con algún IDE como NetBeans o Eclipse.

Estructura

./controlador: Contiene las clases controladoras.
./libreria: Contiene las clases de terceros.
./modelo: Clases de la capa de negocio, responsables de la recuperación y guardado de información en un medio persistente (Base de datos, XMLS, TXTS, etc.), envío de
correos, servicios web, etc.
./recursos: Contiene las carpetas CSS y JS para almacenar los archivos CSS y scripts
en Javascript.
./sistema: Clases necesarias para el funcionamiento del framework.
./vista: Almacena los archivos PHP que pintan las páginas (código html).

Requisitos

  • Apache
  • PHP 5.3+

Configuración

El primer paso es habilitar el módulo mod_rewrite de Apache, hay muchas guías disponibles en Google.

Lo siguiente es editar el archivo config.php que se encuentra en la carpeta sistema:

La primera constante DIRECCION es la ruta de nuestro proyecto, la constante MOSTRAR_ERRORES es una bandera para activar o desactivar los errores en el proyecto y por último la variable $conexiones, arreglo asociativo con el listado de conexiones a la base de datos, bd1 es la llave con la que podremos recuperar la referencia de conexión desde código, y los datos de conexión mysql://root:1234@localhost/test, donde mysql es el motor a utilizar, root es el usuario, 1234 es el password, localhost el dominio o IP del servidor y test el nombre de la base de datos, se pueden agregar las conexiones que se deseen y hacer referencia desde código usando la llave que se asignó.

Controladores

Los controladores se crean en la carpeta controlador, ejemplo de implementación:

Por defecto se crea una instancia del controlador Index y se llama a su método index si se entra a la dirección del proyecto sin indicar ningún parámetro, las siguientes direcciones imprimirían Hola Mundo!:

  • http://localhost/nano
  • http://localhost/nano/Index/index

No estamos limitados a crear los controladores en la carpeta controlador, también podemos crear subcarpetas dentro de esta y organizar nuestros controladores de una mejor manera, para ello también hay que indicar el namespace en el controlador ya que el nombre del namespace se traduce a la ruta de carpetas del proyecto, por ejemplo:

El controlador estará ubicado en la ruta controlador/modulo1, ve además como el namespace está declarado: namespace controlador\modulo1;

Para llamar al método index de este controlador llamamos la siguiente dirección desde nuestro navegador de preferencia:

http://localhost/nano/modulo1_Index/index

Con el guión bajo separamos el namespace de la clase desde la dirección a invocar, por lo que el guión bajo no debería se utilizado como parte del nombre de las clases.

Nota: Recuerda que los controladores sólo tienen como responsabilidad manejar los eventos del sistema.

Modelos

Las clases del modelo van en la carpeta de modelo, al igual que los controladores podemos organizar las clases en carpetas y sólo definir el namespace de acuerdo a la ruta de la carpeta donde se encuentra ubicada, es importante recalcar que en esta capa del modelo va la lógica principal de nuestra aplicación por lo que además de incluir los servicios de recuperación y guardado de datos a algún medio persistente, también podemos hacer uso de otros servicios como el envío de correo, la validación de datos, etc.

La clases definitivas en el modelo, quedan a nuestro criterio el cómo crearlas, tenemos la libertad de hacer nuestro modelado de clases, coloco ejemplo de implementación de una clase llamada Usuario que viene en la demostración:

El namespace de esta clase es modelo\com\jahepi, por lo que la clase se encuentra en la siguiente ruta de carpetas modelo/com/jahepi.

Otro punto importante es la siguiente instrucción:

Con la cual podemos hacer referencia a la conexión de la base de datos que definimos en el archivo config.php en el apartado de configuración.

Vistas

Las vistas o los archivos que tienen los elementos visuales se deben guardar en la carpeta vista, desde nuestro controlador podemos cargar un vista de la siguiente forma:

Donde bienvenida.php es nuestro archivo vista que se encuentra ubicado en vistas/bienvenida.php:

Sólo el controlador tiene que regresar una instancia de tipo Respuesta donde tenga como salida el contenido de bienvenida.php.


 

Nano framework viene con una demostración de un login de acceso básico junto con un ABC o CRUD de usuarios.

Para descargar Nano Framework clic aqui.

Para ver demostración en línea clic aquí.

 

Leave a Comment

Active Record, Data Mapper, ORM, SQL Wrapper

Un ORM o Mapeo Relacional de Objetos es la capa responsable de analizar la información de las tablas de las bases de datos convirtiendo esos datos en objetos, así en un catálogo de usuarios cada registro de esa tabla se traduciría a instancias u objetos de tipo Usuario y los campos de la tabla serían los atributos de nuestra instancia (aunque no necesariamente un campo de una tabla se traduciría a un atributo de una instancia), el ORM se encarga además de hacer el proceso inverso ya sea cuando se guarda o actualiza la instancia, donde el objeto es persistido en la base de datos y para ello se necesita que sea analizado, generando las consultas necesarias para guardarlo en la tabla de la base de datos.

Un ORM puede ser implementado comúnmente utilizando el patrón Active Record o también el patrón Data Mapper.

Active Record

Definición de la wiki:

Active record es un enfoque para aceso de datos en una base de datos. Una tabla de la base de dados o vista (view) está envuelta en una clase. Por lo tanto, una instancia de un objeto está ligada a un único registro (tupla) en la tabla. Después de crear y grabar un objeto, un nuevo registro es adicionado a la tabla. Cualquier objeto cargado obtiene su información a partir de la base de datos. Cuando un objeto es actualizado, un registro correspondiente en la tabla también es actualizado. Una clase de envoltura implementa los métodos de acceso (setter e getter) o propiedades para cada columna en la tabla o vista

Un ejemplo de Active Record:

Cabe mencionar que cuando es implementado este patrón de diseño, la entidad del dominio es responsable de persistirse en la base de datos, esto conlleva que dicha entidad tenga además de tener reglas de la capa de dominio (Método esMayorDeEdad), también quede acoplada a la capa de persistencia (Métodos guardar y obtener), esto trae una gran desventaja, si queremos en un futuro cambiar la forma de persistencia, que ahora en lugar de guardarse en una base de datos se guarde en archivos de texto plano (lo sé, es una locura), habría que hacer una refactorización de código inmensa, pero para proyectos donde la capa de persistencia se tiene por sentado que no cambiará es una forma buena de abstraer el cómo se gestionan las entidades de nuestros sistemas.

La forma en que utilizaríamos la clase:

Data Mapper

Definición de la wiki:

Data Mapper es una capa de acceso a los datos que realiza una transferencia bidireccional de la información entre la persistencia (frecuentemente una base de datos relacional) y los datos que se encuentran en memoria (La capa del dominio). El objetivo de este patrón es mantener la capa del domino y de la persistencia independientes

Como vimos hace rato, Data Mapper ataca el punto débil de Active Record donde la capa de persistencia queda acoplada a la capa de dominio, su objetivo es mantener las dos capas independientes, es por ello que este patrón de diseño es ideal para sistemas donde las entidades del dominio son persistidas en diferentes medios, haciendo uso de este patrón no habría mayor problema si en un futuro se cambia la persistencia, que podría ser una base de datos a una fuente de información distinta.

Ejemplo de Implementación:

Como vemos, nuestra entidad del dominio usuario ya no tiene conocimiento de la capa de persistencia.

Ahora vamos a implementar la capa de abstracción responsable de guardar las entidades del dominio desde cualquier fuente de información:

Implementamos el Data Mapper en caso de que nuestra persistencia sea una base de datos:

O si en un futuro cambia el sistema para que la fuente de datos sean documentos XMLs:

Ahora nuestro sistema dependería de una abstracción, y el modo de persistir los datos puede ser cambiado de base de datos a documentos XML, o inclusive otras fuentes:

Como conclusión, el patrón DataMapper las entidades como es la de Usuario son independientes, estas no conocen como persistirse en la base de datos, el que tiene la responsabilidad de hacer esto es otra clase que llamamos manejador (mapeador), la gran ventaja de esto es que nuestros objetos del dominio quedan totalmente desacoplados, el manejador se encarga de guardar las instancias en una base de datos, en un archivo de texto, en memoria, etc. Al final no importa dónde, el manejador hace lo necesario para que esa entidad sea persistida.

SQL Wrapper

Un SQL Wrapper es un envoltorio para generar consultas de una forma orientada a objetos, utilizando los métodos del wrapper o envoltorio se construyen las consultas dinámicamente, un ejemplo de cómo implementarlo vale más que mil palabras:

La forma en que utilizaríamos la clase:

 

Eso es todo por hoy, saludos :)

Leave a Comment