Login [Register]
Don't have an account? Register now to chat, post, use our tools, and much more.
https://sopaxorztaker.gitlab.io/tpt3d (You can find the source code at https://gitlab.com/sopaxorztaker/tpt3d).

It's a game like The Powder Toy, but in 3D!
It's notable because instead of using a 3D graphics framework such as WebGL I do all the rendering myself down to the polygon level of the HTML canvas.

Here's a quick demo level you can load into it (by pasting into the text area on the page) to learn more:

Code:
{"cubes":[{"coords":[50,-2,1],"type":4},{"coords":[50,0,0],"type":5},{"coords":[48,-2,0],"type":3},{"coords":[48,0,0],"type":2},{"coords":[12,32,2],"type":1},{"coords":[12,31,2],"type":1},{"coords":[10,31,2],"type":0},{"coords":[12,30,2],"type":1},{"coords":[10,30,2],"type":0},{"coords":[12,29,2],"type":1},{"coords":[10,29,2],"type":0},{"coords":[12,28,2],"type":1},{"coords":[10,28,2],"type":0},{"coords":[12,27,2],"type":1},{"coords":[10,27,2],"type":0},{"coords":[12,26,2],"type":1},{"coords":[10,26,2],"type":0},{"coords":[12,25,2],"type":1},{"coords":[29,-2,0],"type":2},{"coords":[29,-1,0],"type":5},{"coords":[29,0,0],"type":5},{"coords":[10,25,2],"type":0},{"coords":[12,24,2],"type":1},{"coords":[28,-2,0],"type":2},{"coords":[28,-1,0],"type":5},{"coords":[28,0,0],"type":5},{"coords":[10,24,2],"type":0},{"coords":[12,23,2],"type":1},{"coords":[10,23,2],"type":0},{"coords":[12,22,2],"type":1},{"coords":[10,22,2],"type":0},{"coords":[12,21,2],"type":1},{"coords":[10,21,2],"type":0},{"coords":[12,20,2],"type":1},{"coords":[10,20,2],"type":0},{"coords":[12,19,2],"type":1},{"coords":[10,19,2],"type":0},{"coords":[12,18,2],"type":1},{"coords":[12,17,2],"type":1},{"coords":[10,18,2],"type":0},{"coords":[12,16,2],"type":1},{"coords":[10,17,2],"type":0},{"coords":[12,15,2],"type":1},{"coords":[10,16,2],"type":0},{"coords":[12,14,2],"type":1},{"coords":[10,15,2],"type":0},{"coords":[12,13,2],"type":1},{"coords":[10,14,2],"type":0},{"coords":[18,0,1],"type":6},{"coords":[12,12,2],"type":1},{"coords":[10,13,2],"type":0},{"coords":[12,11,2],"type":1},{"coords":[17,0,1],"type":6},{"coords":[10,12,2],"type":0},{"coords":[12,10,2],"type":1},{"coords":[16,1,1],"type":7},{"coords":[16,0,1],"type":6},{"coords":[10,11,2],"type":0},{"coords":[12,9,2],"type":1},{"coords":[10,10,2],"type":0},{"coords":[12,8,2],"type":1},{"coords":[12,7,2],"type":1},{"coords":[10,9,2],"type":0},{"coords":[12,6,2],"type":1},{"coords":[10,8,2],"type":0},{"coords":[12,5,2],"type":1},{"coords":[12,4,2],"type":1},{"coords":[10,7,2],"type":0},{"coords":[12,3,2],"type":1},{"coords":[12,2,2],"type":1},{"coords":[12,1,2],"type":1},{"coords":[10,6,2],"type":0},{"coords":[12,0,2],"type":4},{"coords":[10,5,2],"type":0},{"coords":[10,4,2],"type":0},{"coords":[10,3,2],"type":0},{"coords":[10,2,2],"type":0},{"coords":[10,1,2],"type":0},{"coords":[10,0,2],"type":3},{"coords":[7,0,2],"type":6},{"coords":[6,0,2],"type":5},{"coords":[5,0,2],"type":2},{"coords":[3,0,2],"type":2}],"paused":true,"signs":[{"text":"Welcome to TPT3D!","coords":[0,0,2]},{"text":"Go right to continue!","coords":[0,1,2]},{"text":"This is a cube.","coords":[3,-1,2]},{"text":"Those have different types:","coords":[5,-1,2]},{"text":"There are solids, liquids and liquid sources.","coords":[10,-1,2]},{"text":"There's also fire! Press [Space].","coords":[16,-1,1]},{"text":"Click anywhere to place a cube!","coords":[21,-1,0]},{"text":"Press [.] to see the different types.","coords":[21,0,0]},{"text":"Try moving the viewport by dragging.","coords":[25,0,0]},{"text":"Also try [Z] and [X]! :P","coords":[28,0,0]},{"text":"Press [T] to place a sign with your own text!","coords":[31,0,0]},{"text":"[Y] will remove the last sign placed.","coords":[36,0,0]},{"text":"[Q] will clear everything.","coords":[40,0,0]},{"text":"That's it, now reload the page and try yourself!","coords":[44,0,0]},{"text":"By SopaXorzTaker","coords":[0,2,0]},{"text":"woo, some cubes are translucent!","coords":[28,1,0]},{"text":"Also try [K].","coords":[28,2,0]}],"viewport":{"coords":[2,0,-2],"look":[0,0,0]}}
I like it so far! I am confused about the pause mechanic, though. It seems you have to hold Space to keep the simulation unpaused. Also, I don't quite understand the fire. It seems that when the simulation is unpaused, the fire "block" just rises up and disappears. Overall, very cool! You'll have to explain to me how you got 3D rendering done. I'm still having some trouble with it in my limited experiments.
123outerme wrote:
I like it so far! I am confused about the pause mechanic, though. It seems you have to hold Space to keep the simulation unpaused. Also, I don't quite understand the fire. It seems that when the simulation is unpaused, the fire "block" just rises up and disappears. Overall, very cool! You'll have to explain to me how you got 3D rendering done. I'm still having some trouble with it in my limited experiments.


The thing about having to hold Space is a bug (the load button gets focus so when you press space it gets activated too) - I am going to fix that, hopefully Smile

A workaround for this is to click anywhere else on the page after loading the save (e.g. on the canvas).


Yes, the fire is supposed to rise, it can also spread to blocks of wood.


The rendering principle is pretty simple.
First, the cubes of the level are sorted according to their distance to the observer (the closest ones are rendered last).

Then,

Code:
drawCube()
does the same sorting, but with the cube faces.
Then it draws each face as a polygon path (using

Code:
move3D()
, which is just a glorified way of moving the canvas cursor according to a projection of 3D coordinates).
This is very cool! My only suggestion right now is if you could please remove the black fade outs on the edges? Also would it be possible to have more detailed textures?
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 1
» All times are GMT - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement