Notes

Instead of Rendering everything at Once

Pistoncraft is a term used to describe an online logic puzzle or real-time strategy game. I have been thinking about this for a long time and have even tried to implement it twice, but it's too difficult to implement and could not be as fun as I initially thought. To date the first attempt is the most complete. It is implemented in Javascript and is based on a lot of CSS transitions.



Pistoncraft attempt 1



1 Original idea



The original idea was inspired by the Pistons mod in the video game Minecraft. The Pistons mod is now integrated into Minecraft's official version. Minecraft. I realized at an early stage the gameplay potential for pistons I was thinking about how to make it nontrivial and fun.



I decided to go with a top-down 2D game in which players build factories with pistons that manipulate raw materials to create complex things. Since it is 2D it is a lot different from Minecraft and Minecraft, but I also borrowed the concept of creating circuits and railway systems. The idea of creating a fully autonomous system to connect things is more like to SpaceChem. I also put some thought into the goal of creating an autonomous factory:



- To create things that satisfy an arbitrary goal, such as SpaceChem. - To create a static defense to defeat waves of enemies, i.e. a tower defense game.


- To create autonomously fighting robots to defeat an opponent who is human or an AI opponent, i.e. a real time strategy.


2 Refined concept



To pitch the idea to my friends, I designed a large infographic explaining the game mechanics, the properties of the entities in the game and then further developed the concept of manufacturing robots in a real time strategy game.



3 First implementation attempt



The infographic below demonstrates the first attempt at implementation. I made it pretty far - the pistons pulled things in the way I wanted and the wires linked things according to what was desired and the molds changed the objects as desired and the resource block created items according to what I wanted.



The gas objects that were pushed into a square mold changed into engines. When they were pushed in the circular molds, they turned into warheads. When they were pushed into the bullet mold they became rocket fuel.



However, I decided to give up on this project because:



- CSS transitions were slow because numerous DOM elements were required to create animations.


The animations were not satisfactory.


- The code was messy.
pessoa

The user is unable to handle many layers of materials like wires that run underneath objects.


4 Second Implementation attempt



The second implementation attempt was more organized from the beginning. A notable improvement was the use of version control (the project was hosted on GitHub). It used the same CSS transitions concept, however the code was more streamlined and had stylesheets separated into multiple modular CSS files.



The visual design was also improved: the user interface was more familiar control panel, similar to those found on real time strategy games.



New features included a minimap on the bottom right and a way to view the full stack of items on each cell (what is happening to the wires that run under the items, and other such). The pistons were reworked in vector graphics and now had a much more pleasant extended animation that no longer defied geometrical constraints.



Instead of rendering everything at once instead of rendering everything at once, only the contents of the viewport would be animated. As the user scrolled, elements that were not visible in the viewport were removed from the DOM. This can save memory and improve performance.



It seems that CSS transitions were too slow and I lost the motivation to work on it due to schoolwork. Perhaps I will revisit this in the near future...



(c) Daniel Lawrence Lu. Page created on 2022-06-10, by dllup.


Website: https://pessoa.info/