Notes

Instead of Rendering everything at once

Pistoncraft is the name given to an online logic puzzle or real-time strategy game. I've been thinking about this for a while, and started implementing it twice, but it's too difficult to implement and may not be as enjoyable as I originally thought. To date the first attempt is the most complete. It is implemented in Javascript and is based on a large amount of 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 early on the potential of pistons in terms of gameplay I was thinking about ways to make it simple and enjoyable.



In the end, I settled on a top down 2D game in which one constructs a "factory" using pistons which manipulate raw materials to create complicated things. Being 2D it is a lot different from Minecraft and Minecraft, but I also adapted the concept of building circuits and railway systems. SpaceChem is more similar to SpaceChem in that it allows you to build an autonomous system to assemble things. I also thought about the possibility of creating an autonomous factory.



- To create things to satsify an 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 take on human opponents 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 elaborated on the idea that robots could be created in a real-time strategy game.



3 First implementation attempt



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



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



But I gave up on this implementation because:



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


- The animations were not satisfactory.


The code was messy.


- There was no way for the user to manage multiple layers of things, like wires that pass under objects.


4 Second Implementation attempt



The second attempt at implementation was more organized from the beginning. The most notable improvement was the use of version control (the project was hosted on GitHub). Although it utilized the same idea of CSS transitions, the code was much more streamlined and had the stylesheets separated into several modular CSS files.



The design of the visuals was also improved and the user interface was more familiar control panel, similar to the ones found in real time strategy games.



A minimap was added to the right of the bottom. This allows you to view the entire stack of items in each cell. The vector graphics were used to alter the pistons, resulting in a an enjoyable, extended animation that didn't violate geometrical limitations.



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



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



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

Cooper's blog
Read More: https://coopwb.org/