Coding, virtual reality, games, music and other things i love.
Author: jahepi
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
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
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
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
It is a pleasure to share my latest game project, it is a top-down zombie shooter made in Html5 and ECMAScript 6 language.
It is a short game with 2 levels and 2 bosses.
Controls:
- A: left
- D: right
- W: up
- S: down
- Mouse: shoot
- P: pause
Project repository: https://bitbucket.org/jahepi/zombiepix
Link to the game: http://games.jahepi.net/zombiepix/index.html
Newgrounds link: https://www.newgrounds.com/portal/view/709413
3 Comments
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
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.
I open this section with one of my favorites songs of all time, i hope you like it.
Leave a Comment
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
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:
Play Store:
https://play.google.com/store/apps/details?id=com.jahepi.tank&hl=en
Regards
Leave a Comment
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