Notes

Rather than Rendering everything at Once

Pistoncraft is a name for an online logic puzzle or real-time strategy game. The idea has been in my mind for a while. I attempted to implement it twice but it was too complicated and may not be as fun as I had hoped. The first attempt was the most successful to date. https://53vv.com/ It is implemented in Javascript, and relies heavily on a number 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 has since been incorporated into Minecraft's official version. Minecraft. I was able to see the potential of pistons earlier and began to consider ways I could make it fun and interesting.



I settled on the top-down 2D game where players construct factories using pistons that manipulate raw materials to make complex things. Because it's 2D, it is significantly different from Minecraft and Minecraft, but I also borrowed the concept of creating circuits and railway systems. SpaceChem is closer to SpaceChem in that it permits you to create an autonomous system for assembling objects. I also thought about the goal of creating an autonomous factory.



- Just to create things to satsify some arbitrary objective, like SpaceChem. Create 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 Idea



I designed an infographic to explain the game mechanics as well as the properties of the game's entities. I also elaborated on the idea that robots could be created in a real-time strategy game.



3 First implementation attempt



The first attempt to implement it made use of the sprites in the infographic above. I was able get pretty far. The pistons moved things according to what I wanted and the wires linked things in the way I wanted, the molds changed things as needed and the resource block created the items I wanted.



When the gas items were placed in the square mold, they transformed 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.



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



- CSS transitions were slow due to many DOM elements were required to create animations.


The animations were not satisfactory.


- The code was messy.


There was no way for the user to handle multiple layers of stuff, like wires that pass underneath objects.


4 Second attempt at implementation



The second attempt to implement was more organized from the beginning. The use of version control (the project was hosted by GitHub) was a notable improvement. It was based on the same CSS transitions concept, but the code was more streamlined and had stylesheets separated into multiple modular CSS files.



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



A minimap was added to the lower right. This lets you view the entire stack of items in each cell. The vector graphics were used to alter the pistons and give them a more enjoyable extended animation that didn't defy geometrical constraints.



Instead of rendering all elements at once, animation would be limited to the viewport's contents. As the user scrolled, elements that were not visible in the viewport were removed from the DOM. This could be used to reduce memory and increase performance.



Ultimately, it seems CSS transitions were still too slow and I was unable to find the motivation to work on this because of schoolwork and other obligations. Perhaps I'll revisit this in the near future.



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


My Website: https://53vv.com/