added graphics update article; snippets support articles with picture links
chimchooree
4 years ago
parent
1067b4567e
commit
950a76371f
@ -1,6 +1,6 @@
|
||||
<!--200810-->
|
||||
<h1>my first game jam - #weeklygamejam </h1>
|
||||
august 25, 2020<br>
|
||||
august 24, 2020<br>
|
||||
game jam<br>
|
||||
<br>
|
||||
<b><a href="https://weeklygamejam.itch.io/">WeeklyGameJam</a></b> is weekly theme-based game jam hosted through itch.io. It's fairly laid-back for a jam, giving you a full week's time, allowing for pre-made/stock assets and code, and being understanding of late submissions. Most people make videogames, but any kind of game is allowed. At the end of the week, streamers will play and critique the submissions while the devs hang out in their chat. <br>
|
||||
@ -0,0 +1,35 @@
|
||||
<!--200810-->
|
||||
<h1>inventory as a system diagram </h1>
|
||||
august 24, 2020<br>
|
||||
system diagram, game mechanics<br>
|
||||
<br>
|
||||
<b>System diagrams</b> illustrate how components interact within a system. It saves so much headache to step back and plan a system out like this before jumping into the code. <br>
|
||||
<br>
|
||||
<center><img src="/static/img/ent/systemdiagram_inventory.jpeg" alt="(image: system diagram for inventory)" width="500" height="250"></center> <br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>stop + plan before coding </h2>
|
||||
I want to move blessfrey's inventory into an app on the player character's smartphone. Before, it was displayed in a random pop-up window. It was poorly planned, so the programmatic inventory and the UI were tightly coupled so I couldn't just pop it into the phone. Instead of wrestling, it's easier to start over and actually plan before I code this time. <br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>list out your nouns </h2>
|
||||
A simple way to start thinking about a system is to list out its nouns and verbs. Jot down the entities that interact with your system. <br>
|
||||
<br>
|
||||
For blessfrey's inventory, that's the inventory (programmatic), the player character, the inventory app (UI), and base items. The inventory app is related to the smartphone and inventory items. Items are related to floor items, which are related to rooms. <br>
|
||||
<br>
|
||||
(blessfrey has three different kinds of items. <b>Base Items</b> are the code, which hold all the data relevent for the item no matter how it's expressed. <b>Floor Items</b> are the version that sit on the ground and get picked up by characters. <b>Inventory Items</b> are the version that are displayed in inventories, store windows, containers, etc. Floor and Inventory Items hold a base item inside them, that gets popped out and traded around as the item needs to be expressed in different forms.) <br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>connect your nouns with verbs </h2>
|
||||
I wrote the entities in pink and moved them around until the placement was decently readable. Then I connected the concepts with arrows. These arrows represent the verbs, which I explicitly labeled in yellow. <br>
|
||||
<br>
|
||||
The flow of these arrows can be very important. If you are modeling AI, for instance, no matter what path the program takes, there shouldn't be dead-ends. Seeing mistakes like that is easier with a diagram than lines of code. Otherwise, the flow is generally useful for figuring out which methods are needed for each class and how they connect. <br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>write the code </h2>
|
||||
At this point, coding is a bit easier, now that it's in some ways a transcription of the diagram. The entities are data (classes or objects) and the arrows are logic (methods). <br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>conclusion </h2>
|
||||
Your diagram doesn't have to be too fancy or formal to get the point across to yourself, and it just takes a minute to save all the headache later. Don't skip this step or you'll have to rewrite the inventory system just to display it in a different window. <br>
|
||||
<br>
|
||||
@ -0,0 +1,43 @@
|
||||
<!--200810-->
|
||||
<h1>blessfrey graphic updates + mockups </h1>
|
||||
august 24, 2020<br>
|
||||
screenshots, mockups<br>
|
||||
<br>
|
||||
I iterate over the graphics periodically, so I can practice without worrying about polish. Here's some screenshots of different styles I've tried. (Though April 23, 2019's is actually a mockup, that style did run in-engine for a few weeks.)<br>
|
||||
<br>
|
||||
<center>
|
||||
<a target="_blank" href="/static/img/ent/screenshot_August152018.jpeg">
|
||||
<img src="/static/img/ent/screenshot_August152018.jpeg" alt="(image: Cassia and Bad Cat on the pink carpet tilemap)" width="500" height="313">
|
||||
</a><br>
|
||||
August 15, 2018 - Early experimenting with Godot Engine. Collision was just added for sprites and walls. The buttons to the right are for switching between characters (who each have different skillbars). <br>
|
||||
<br><br>
|
||||
<a target="_blank" href="/static/img/ent/screenshot_January132019.jpeg">
|
||||
<img src="/static/img/ent/screenshot_January132019.jpeg" alt="(image: Angel in a periwinkle room full of Bad Cats)" width="500" height="330.72">
|
||||
</a><br>
|
||||
January 13, 2019 - Videogame perspective is so different from perspective in illustration. Scale of characters vs environment is another quirk of games I had 0 experience with. I was vaguely going for an old Western RPG style with tall, somewhat realistic sprites with nondistinct faces. Something like Divine Divinity. <br>
|
||||
<br><br>
|
||||
<a target="_blank" href="/static/img/ent/screenshot_April232019.png">
|
||||
<img src="/static/img/ent/screenshot_April232019.png" alt="(image: Angel blasting a neighborhood coyote with fire)" width="500" height="375">
|
||||
</a><br>
|
||||
April 23, 2019 - This is a mockup, but the game did look like this for a while. The fireball projectile didn't come until later, though. Here, I was trying to get a little more of a top-down view but not really. Instead of cats, Angel's fighting with a coyote. The government stopped removing coyotes from my old neighborhood, so they killed all the neighborhood cats except one and I saw him running away from a big coyote during a storm, so maybe he's gone now, too. It's just not right. <br>
|
||||
<br><br>
|
||||
<a target="_blank" href="/static/img/ent/screenshot_May252019.png">
|
||||
<img src="/static/img/ent/screenshot_May252019.png" alt="(image: Angel and Chloe in front of a slanted house)" width="500" height="375.18">
|
||||
</a><br>
|
||||
May 25, 2019 - The slanted edition was so annoying. It's not isometric, it's just at an obscure angle because I drew these assets more for fun than to actually be practical. I do reuse the tree + bushes a lot, though. I also tried a more chibi sprite because they are soo common, might as well try it out. <br>
|
||||
<br><br>
|
||||
<a target="_blank" href="/static/img/ent/screenshot_June292019.png">
|
||||
<img src="/static/img/ent/screenshot_June292019.png" alt="(image: Lots of Angels and other characters at a shopping center)" width="500" height="278.66">
|
||||
</a><br>
|
||||
June 29, 2019 - Trying a shopping center level now. It's reeally spaced apart. It's inspired by a real shopping center;; <br>
|
||||
<br><br>
|
||||
<a target="_blank" href="/static/img/ent/screenshot_July252020.png">
|
||||
<img src="/static/img/ent/screenshot_July252020.png" alt="(image: Angel and some slimes in a cavern)" width="500" height="281.04">
|
||||
</a><br>
|
||||
July 25, 2020 - There's some missing in this gap, so I'll add in more pics if I find any. This is the first version of a cavern level for the blessfrey demo. It's inspired by local caves. <br>
|
||||
<br><br>
|
||||
</center>
|
||||
<h2>you're up to date.</h2>
|
||||
<br>
|
||||
Hope you enjoyed seeing the different art I've used for blessfrey over the years. Even if I never really polish anything, it's nice to iterate to get a sense of game art and blessfrey's personal style. Hopefully it ends up looking okay okay when I do start polishing. But until then, in the words of YandereDev, "All art is placeholder."<br>
|
||||
<br>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Loading…
Reference in New Issue