Instead of Rendering everything in one Go



Pistoncraft is a name of real time strategy or a logic puzzle video 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 may not be as fun as I originally thought. To date , the first effort is the most complete. It is written in Javascript and heavily relies on a large number of CSS transitions.



Pistoncraft attempt 1



1 Original idea



The idea was initially inspired by the Pistons mod in the video game Minecraft. The Pistons mod has since been integrated into Minecraft's official version. Minecraft. I was aware of the gameplay potential for pistons I was thinking about how to make it simple and fun.



Eventually I decided on a top-down 2D game in which the player builds a "factory" with pistons that manipulate raw materials to construct intricate things. Since it is 2D it is a lot different from Minecraft and Minecraft, but I also adapted the concept of creating circuits and railway systems. SpaceChem is similar to SpaceChem in that it allows you to create an autonomous system to assemble things. I also considered the goal of creating an autonomous manufacturing facility.



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


- To build autonomous fighting robots to defeat human opponents or an AI opponent, i.e. a real time strategy.


2 Refined concept



I designed an infographic to explain the game mechanics and properties of the game's entities.Minecraft Servers I also elaborated on the idea that robots could be manufactured in the real-time strategy game.



3 First implementation attempt



The first attempt at implementation used the sprites from the infographic above. I got fairly far - the pistons pulled things in the way I wanted and the wires linked things as desired; the molds changed the items in the way desired; and the resource block created items as desired.



When the gas components were placed in the square mold, they transformed into engines. When they were pushed into circular molds, they turned into warheads. Once they were pushed into the bullet mold, they changed into rocket fuel.



I gave up on implementation of this plan because:



- Using CSS transitions for all animations meant that many DOM elements were required and this was slow.


The animations were not satisfactory.


- The code was messy.


- The user could not manage many layers of materials such as wires that go beneath objects.


4 Second implementation attempt



The second implementation attempt was more well-organized from the beginning. The use of version control (the project was hosted by GitHub) was a notable improvement. It used the same CSS transitions idea, but the code was simpler and had stylesheets divided into several modular CSS files.



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



New features included a minimap at the bottom right that allows you to see the entire array of items within each cell (what is happening to the wires that run beneath the items and other such). The vector graphics were used to modify the pistons and gave them an enjoyable, extended animation that didn't defy the geometrical limitations.



Rather than rendering everything simultaneously, only the viewport's contents would be animated. As the user scrolled, elements that weren't in the viewport would be removed. This can be used to reduce memory and increase performance.



In the end, it appears CSS transitions were still too slow and I was unable to find the motivation to keep working on this issue due to schoolwork and other obligations. Maybe I'll revisit this in the distant future...



(c) Daniel Lawrence Lu. Page generated by DLLUP on 2022-06-10