Notes

Instead of Rendering everything in one Go

Pistoncraft is a name for an online logic puzzle or real-time strategy game. I've been contemplating this for a long time and then I decided to implement it twice, but it's too difficult to implement and might not be as enjoyable as I initially thought. To date , the first effort is the most complete. It is written in Javascript, and relies heavily on a 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 is now integrated into Minecraft's official version. Minecraft. I realized early on the potential gameplay for pistons and I began thinking about ways to make it nontrivial and enjoyable.



In the end, I settled on a top-down 2D game in which the player builds a "factory" using pistons which manipulate raw materials to create intricate things. Being 2D it is vastly different from Minecraft and Minecraft, but I also borrowed the idea of building circuits and railway systems. The idea of creating an autonomous system to build things is more similar to SpaceChem. I also put some thought into the goal of creating an autonomous factory:



- To design and create objects to satsify an arbitrary objective such as SpaceChem. Create an in-built defense system to beat waves of enemies, i.e. a tower defense game.


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


2 Refined Idea



I created an infographic to explain the game mechanics as well as the properties of the in-game entities. I also discussed the idea that robots could be manufactured in the real-time strategy game.



3 First implementation attempt



The first attempt at implementation made use of the sprites in the infographic above. I was able get pretty far. The pistons moved things in the way I wanted The wires connected things in the way I wanted The molds changed the things as needed, and the resource block produced the items I wanted.



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



But I gave up on this project because:



- Utilizing CSS transitions for all animation meant that a lot of DOM elements were needed and this was slow.


The animations were not satisfactory.


The code was messy.


- There was no way for the user to deal with many layers of stuff such as the wires passing beneath objects.


4 Second Implementation attempt



The second attempt to implement was more organized from the start. One notable improvement was the use of version control (the project was hosted on GitHub). It utilized the same CSS transitions concept, but the code was cleaner and had stylesheets split into several modular CSS files.



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



A minimap was added to the right of the bottom. dhakacourier.net This allows you to see the entire stack of items in each cell. The pistons were reworked in vector graphics and now featured an aesthetically pleasing extended animation that was no longer a challenge to geometrical constraints.



Instead of rendering all elements simultaneously, animation would be limited to the viewport's contents. As the user scrolledaround, elements that were not in the viewport were removed. This helps to save memory and can increase performance.



In the end, it appears that CSS transitions were slow and I ran out of motivation to work on this because of schoolwork and other things. Perhaps I'll revisit this in the near future.



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


My Website: https://www.dhakacourier.net/