Vectrex 2: Neon Boogaloo by ChainedLupine
This in my game! You can make a spaceship bigger by pressing the X key! Wow!
Actually, I didn't finish my game for this Ludum Dare. Since I'd entered a number of LDs, you think I'd know better by now! Despite not finishing a game, I did manage to have a lot of fun hanging out with the LD crowd and sharing the LD experience. And that, to me, is what Ludum Dare is all about.
About what I have up here. It's a Pixi.JS demo with a custom vector wireframe 3D engine. My goal was to make an old-style arcade game that played similar to a reverse-Hexagon, where you navigated a wireframe ship through a solid-filled puzzle with progressively narrower/shifty corridors.
About the engine: Models are stored as Wavefront OBJ files and parsed by wireframe.js. They are turned into a series of vertices and lines. Wireframe.js then performs all of the matrix math necessary, including converting 3D vertices into a series of screen-space 2D lines. These lines are then rendered by Pixi.js as a Graphics object.
Because the 3D engine is doing everything but actually rasterizing the lines, wireframe.js works with the standard HTML5 Canvas. (Use the Canvas link to try it out.)
Currently I am using Pixi.js along with a few WebGL shaders to give it that nice glowy vector look!
Things missing: No screen-space clipping, at all. (Watch as the spaceship turns inside out if you move it behind the camera!) No backface culling. (Duh, it's 80s wireframes, who needs that?)
Note: I am using THREE.js, but only for the linear algebra math stuff. Cuz I am tired of re-writing Vector and Matrix operations in yet another language.
Actually, I didn't finish my game for this Ludum Dare. Since I'd entered a number of LDs, you think I'd know better by now! Despite not finishing a game, I did manage to have a lot of fun hanging out with the LD crowd and sharing the LD experience. And that, to me, is what Ludum Dare is all about.
About what I have up here. It's a Pixi.JS demo with a custom vector wireframe 3D engine. My goal was to make an old-style arcade game that played similar to a reverse-Hexagon, where you navigated a wireframe ship through a solid-filled puzzle with progressively narrower/shifty corridors.
About the engine: Models are stored as Wavefront OBJ files and parsed by wireframe.js. They are turned into a series of vertices and lines. Wireframe.js then performs all of the matrix math necessary, including converting 3D vertices into a series of screen-space 2D lines. These lines are then rendered by Pixi.js as a Graphics object.
Because the 3D engine is doing everything but actually rasterizing the lines, wireframe.js works with the standard HTML5 Canvas. (Use the Canvas link to try it out.)
Currently I am using Pixi.js along with a few WebGL shaders to give it that nice glowy vector look!
Things missing: No screen-space clipping, at all. (Watch as the spaceship turns inside out if you move it behind the camera!) No backface culling. (Duh, it's 80s wireframes, who needs that?)
Note: I am using THREE.js, but only for the linear algebra math stuff. Cuz I am tired of re-writing Vector and Matrix operations in yet another language.
| Web (HTML5+WebGL) | http://chainedlupine.com/temp/ludum34/ |
| Web (Canvas) | http://chainedlupine.com/temp/ludum34/?render=canvas |
| Original URL | https://ludumdare.com/compo/ludum-dare-34/?action=preview&uid=1746 |
Are you still going to build a full game with it?