Notes

Instead of Rendering everything in one Go

Pistoncraft is a name of an actual time strategy/logic puzzle video game. I've been contemplating this for a long time, and started implementing it twice, but it is too difficult to implement and might not be as enjoyable as I initially thought. The first attempt has been the most successful to date. It is implemented in Javascript and relies heavily on CSS transitions.



Pistoncraft attempt 1



1 Original idea



The original idea was inspired by the Pistons mod that is included in the video game Minecraft. The Pistons mod has since been incorporated into Minecraft's official version. Minecraft. I realized at an early stage the potential of pistons in terms of gameplay I was thinking about how to make it nontrivial and enjoyable.



I chose the top-down 2D game where players construct a factory using pistons that manipulate raw materials to make complex things. Being 2D it is vastly different from Minecraft and Minecraft, but I also borrowed the idea of constructing circuitry and railway systems. SpaceChem is closer to SpaceChem in that it lets you to build an autonomous system to assemble things. I also considered the goal of creating an autonomous manufacturing facility.



- To design and create objects to create an objective that is not arbitrary like SpaceChem. The goal is to build a static defense to defeat waves upon waves of enemies. a tower defense game.


- To develop autonomous fighting robots to take on an AI opponent or human opponent. a real time strategy.


2 Refined idea



To promote the idea to my friends, I made an extensive infographic that explains the game mechanics, as well as the properties of the game's entities and further developed the concept of manufacturing robots for a real-time strategy game.



3 First implementation attempt



The infographic below shows the first implementation attempt. I got fairly far - the pistons moved things as desired and the wires linked things as desired The molds changed the objects as desired; and the resource block made items according to what I wanted.



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



But I gave up on this project because:



- CSS transitions were sluggish due to many DOM elements were needed to create animations.


- The animations weren't satisfactory.


- The code was messy.


The user cannot manage many layers of material such as wires that go beneath objects.


4 Second Implementation attempt



The second implementation attempt was more organized from the start. One notable improvement was the use of version control (the project was hosted on GitHub). It was based on the same CSS transitions idea, but the code was simpler and had stylesheets separated into several modular CSS files.



The design of the interface was also improved. It was more akin to real-time strategy games' control panels.



A minimap was added to the right of the bottom. This allows you to view the whole stack of items inside each cell. The pistons were updated to vector graphics, and now had a much more pleasant extended animation that no longer violated geometrical constraints.



Instead of rendering all of the content at once, only the viewport's contents would be animated. When the user scrolled, elements outside of the viewport would be removed from DOM. This helps to save memory and can enhance performance.



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



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


Here's my website: https://acesasoft.com/