<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="/rss.xsl"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Andrey Listopadov</title>
    <link>https://andreyor.st/tags/pixelart/</link>
    <image>
      <title>Andrey Listopadov</title>
      <link>https://andreyor.st/tags/pixelart/</link>
      <url>https://andreyor.st/tags/pixelart/favicon-64.png</url>
    </image>
    <description>Posts tagged 'pixelart' by Andrey Listopadov</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <copyright>Andrey Listopadov 2020-2026 - This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</copyright>
    <lastBuildDate>Sat, 16 Sep 2023 01:59:00 +0300</lastBuildDate>
    <atom:link href="https://andreyor.st/tags/pixelart/feed.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Game3 W?/4</title>
      <link>https://andreyor.st/posts/2023-09-16-game3-w4/</link>
      <guid>https://andreyor.st/posts/2023-09-16-game3-w4/</guid>
      <description>&lt;p&gt;I&amp;rsquo;m working on the next game, although I gave myself an extended period of rest.
After failing to complete the last one I needed to distract myself a bit from this activity, so I worked a bit on Fennel stuff, played some games, and I think I&amp;rsquo;m back in business by now.
I have an interesting thing going on with my productivity - it comes in waves.
What I mean is that I can go onto programming frenzy for several months, and then once I feel burned out, I can just play games for another full month straight.
Though I get tired of games too, and if by that time I feel that I&amp;rsquo;m not ready for programming yet, I can read some technical books, or even just some manga if I still feel too tired to be productive.&lt;/p&gt;
&lt;p&gt;So this five month marathon is a bit hard for me, as I basically have to give up on long periods of rest, and juggle my free time to actually have some time to work on these projects.
While these games are nothing special, I feel like I&amp;rsquo;m still learning new stuff, and thus this is beneficial for me still.
Though, at some I actually thought of dropping the whole idea, and starting a more complex project that I was thinking about for a lot of time already.
But I decided to leave it for the next year, as I still need a lot to learn.
But, back on the topic.&lt;/p&gt;
&lt;p&gt;This post actually marks the end of only the second week of the current game.
How come, you might ask?
To put it simply, I miscalculated a bit, and in reality I had another week on the previous game by the time I dropped it.
So, technically, I could probably finish that game, but the burnout got me, so that&amp;rsquo;s that.&lt;/p&gt;
&lt;p&gt;As for this game, I have a little to show.
As it is a side-scrolling shooter, I designed a basic ship with some shooting modules, and some powerup icons.
I considered to not making any graphics for this one, and doing everything with just primitives, like triangles, circles and so on, but after trying to draw a ship like this I dropped the idea and returned to Pixel Studio.
Here are the results so far:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-09-16-game3-w4/sprites.png&#34; width=&#34;100%&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;The ship turned out to be a bit too big, but I decided that I can make a game with larger assets for a change.
So the enemy also uses 4 sprites, instead of just one, as in my previous games.&lt;/p&gt;
&lt;p&gt;And here are the enemies animated:&lt;/p&gt;
&lt;div class=&#34;grid-gallery&#34;&gt;
  &lt;div class=&#34;grid-gallery-row&#34; style=&#34;display: flex&#34;&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-09-16-game3-w4/roaming.gif&#34; width=&#34;40%&#34; height=&#34;auto&#34;/&gt;
&lt;/figure&gt;

&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-09-16-game3-w4/roaming-2.gif&#34; width=&#34;40%&#34; height=&#34;auto&#34;/&gt;
&lt;/figure&gt;

&lt;/div&gt;
&lt;figcaption&gt;
  &lt;p&gt;Movement animations&lt;/p&gt;
&lt;/figcaption&gt;
&lt;div class=&#34;grid-gallery-row&#34; style=&#34;display: flex&#34;&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-09-16-game3-w4/exploding.gif&#34; width=&#34;40%&#34; height=&#34;auto&#34;/&gt;
&lt;/figure&gt;

&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-09-16-game3-w4/explosion-2.gif&#34; width=&#34;40%&#34; height=&#34;auto&#34;/&gt;
&lt;/figure&gt;

&lt;/div&gt;
&lt;figcaption&gt;
  &lt;p&gt;Explosion animations&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/div&gt;
&lt;p&gt;Obviously, I need to add more enemy variety, with different patterns, but designing enemies is hard.
BTW, if you&amp;rsquo;re curious how I draw things on the phone, here&amp;rsquo;s a time-lapse:&lt;/p&gt;
&lt;p&gt;&lt;video autoplay loop&gt;&lt;source src=&#34;https://andreyor.st/2023-09-16-game3-w4/timelapse.webm&#34; type=&#34;video/webm&#34;&gt;
Your browser does not support the video tag.&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Though, I usually don&amp;rsquo;t do it in the landscape mode, portrait mode works better for me, especially with a stylus.
This process was recorded in landscape just for viewing convenience.&lt;/p&gt;
&lt;p&gt;On the technical side of things, I already implemented a basic movement with linear interpolation for the flying modules, and implemented some enemy patterns, but there&amp;rsquo;s no actual interactions yet.
I&amp;rsquo;m kinda torn on the idea of including &lt;code&gt;bump.lua&lt;/code&gt; again, as I feel like that this game can be done without any collision library.
At the same time, having a collision library may make things much simpler, so I&amp;rsquo;m still thinking how to approach this game.&lt;/p&gt;
&lt;p&gt;For the &lt;em&gt;record&lt;/em&gt;, I basically dropped the idea of making &lt;em&gt;any&lt;/em&gt; kind of music for these games because I just can&amp;rsquo;t get myself to work on it.
I do plan to take some courses on music composition for future projects, though.
Sound effects are challenging enough already by themselves.&lt;/p&gt;
&lt;p&gt;That&amp;rsquo;s all for this week!
Hopefully, I&amp;rsquo;ll manage to finish the game this time, though I already lost one week.
Let&amp;rsquo;s say, this is week 1/3 instead of 2/4 shall we?
Feels less demotivating this way.&lt;/p&gt;
&lt;div class=&#34;comment-link&#34;&gt; &lt;a href=&#34;mailto:%61%6e%64%72%65%79%6f%72%73%74%2b%62%6c%6f%67%40%67%6d%61%69%6c%2e%63%6f%6d?subject=Comment: Game3 W?/4&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34;&gt;Comment via email&lt;/a&gt;&lt;/div&gt;</description>
      <pubDate>Sat, 16 Sep 2023 01:59:00 +0300</pubDate>
    </item><item>
      <title>Game1 - Results</title>
      <link>https://andreyor.st/posts/2023-07-30-game1-results/</link>
      <guid>https://andreyor.st/posts/2023-07-30-game1-results/</guid>
      <description>&lt;p&gt;Well, this was fun!
A bit exhausting, actually.
The first of five months of the challenge has ended and here are the results:&lt;/p&gt;
&lt;iframe src=&#34;https://itch.io/embed-upload/8414750?color=3e3c57&#34;
        allowfullscreen=&#34;&#34;
        width=&#34;600&#34;
        height=&#34;320&#34;
        frameborder=&#34;0&#34;
        style=&#34;margin-left: auto; margin-right: auto; display: block;&#34;&gt;
  &lt;a href=&#34;https://andreyorst.itch.io/game1&#34;&gt;Play Game1 on itch.io&lt;/a&gt;
&lt;/iframe&gt;
&lt;p&gt;The game isn&amp;rsquo;t really complete, but I did my best to make it feel as complete as possible in the time constraints I had.
Technically, I have 1 day left, but given that I need to start working on the next game immediately I decided to give myself a day off.
It only features one level, and cuts out to the &amp;ldquo;you won&amp;rdquo; screen, but I still consider it a success.&lt;/p&gt;
&lt;p&gt;Here&amp;rsquo;s the last bit of devlog for this particular game outlining some things I did since the last post in no particular order.&lt;/p&gt;
&lt;h2 id=&#34;graphic-overhaul&#34;&gt;Graphic overhaul&lt;/h2&gt;
&lt;p&gt;I&amp;rsquo;ve added parallax scrolling to the background, making the game happen inside a cave.
Well, at least, now the background is not that boring to look at, but it&amp;rsquo;s still plain.&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/background.gif&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;Then, I added a second layer and started experimenting with different colors:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/background2.gif&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;The problem with limited colors is that I can&amp;rsquo;t find a way of having foreground and background properly separated without using outlines on sprites, which I wanted to avoid for this game at least.
Thus, slimes are now blue instead of green.
But I like it more this way because it pops from the green ground a bit better.
And now that the background is also green it&amp;rsquo;s a lot more sensible.&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve spent some time drawing foliage, like mushrooms, trees, grass, water, and so on.
None of this is animated though - time is once again against me.&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/foliage.png&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;Also, added the menus, title screen, cover art, and some fade-in/out animations for smoother transitions:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/transitions.gif&#34;/&gt;
&lt;/figure&gt;

&lt;h2 id=&#34;enemy-ai&#34;&gt;Enemy AI&lt;/h2&gt;
&lt;p&gt;While I wanted to add more enemy types to the game I simply ran out of time, so the game only features basic slimes.
Their AI is extremely simple too - just roam forward until there&amp;rsquo;s no more ground, a wall, or another entity, then turns around.&lt;/p&gt;
&lt;p&gt;Still, I had some trouble implementing this at first, as I tried to use the &lt;code&gt;world:check&lt;/code&gt; method to try and move the slime forward and below to check if there&amp;rsquo;s ground to traverse on.
But this didn&amp;rsquo;t work for some reason, so I opted for advanced bump API &lt;code&gt;world:queryRect&lt;/code&gt; and queried the rectangle below the slime instead.
It worked nicely, and perhaps I&amp;rsquo;ll use this to make a more robust AI in future games.&lt;/p&gt;
&lt;p&gt;I was toying for a little bit with flying enemies, but it&amp;rsquo;s hard to make them work right with the environment.
I didn&amp;rsquo;t want something like Medusa heads from Castlevania games, but that&amp;rsquo;s exactly what I got during testing.&lt;/p&gt;
&lt;p&gt;I also finally added the death mechanic, as previously the game lacked it completely.
Death doesn&amp;rsquo;t take away your score, as the game turned out to be hard, and there are not enough coins in the only level to get 100 of them and earn an extra life.&lt;/p&gt;
&lt;h2 id=&#34;level-design&#34;&gt;Level design&lt;/h2&gt;
&lt;p&gt;Probably shouldn&amp;rsquo;t have left this to the last possible moment, but designing interesting levels turned out to be a lot harder than I thought initially.
I think I&amp;rsquo;ve managed to at least do a somewhat challenging one, but you&amp;rsquo;re the judge here.
Probably most enemies and traps are cheap.&lt;/p&gt;
&lt;p&gt;As I mentioned previously, I&amp;rsquo;ve used the map editor to construct the level:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/level.png&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;It&amp;rsquo;s a shame though that &lt;a href=&#34;https://www.mapeditor.org/&#34; target=&#34;_blank&#34;&gt;Tiled&lt;/a&gt;, a tilemap editor, doesn&amp;rsquo;t support TIC&amp;rsquo;s maps.
Well, there&amp;rsquo;s a converter but it didn&amp;rsquo;t work for me.
Map editor in TIC isn&amp;rsquo;t bad, but it isn&amp;rsquo;t as good as something like Tiled.
For example, Tiled has randomization from a selected set of tiles when you paint with them, which makes things like ground feel less repetitive.
In TIC I had to do it by hand, and I may have forgotten to do it somewhere in the game, so excuse me if you&amp;rsquo;ll see something like that.&lt;/p&gt;
&lt;p&gt;I used the bottom of the map to draw menus, backgrounds, transitions, and so on, as can be seen here:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/map.png&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;My initial idea was to implement the first few levels like this, one below another, and then switch the memory bank, draw a new set of tiles, and make more levels.
But not only I ran out of time, I also ran out of ideas.
Maybe next time.&lt;/p&gt;
&lt;p&gt;Overall, I&amp;rsquo;d say making levels isn&amp;rsquo;t my least favorite thing so far but it&amp;rsquo;s close.
I&amp;rsquo;ve played in a fair bit of games with level editors and even published some online, but it never grew on me.
I guess I&amp;rsquo;m not a level designer at heart.&lt;/p&gt;
&lt;h2 id=&#34;music-and-sfx&#34;&gt;Music and SFX&lt;/h2&gt;
&lt;p&gt;This was probably the hardest part.
I can&amp;rsquo;t compose music and TIC&amp;rsquo;s tracker is alien to me. Sound design is a bit easier, but I don&amp;rsquo;t know a lot of tricks, so sounds in this game are far and few between.
Still was worth a shot.&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/coin-sound.png&#34;/&gt;
&lt;/figure&gt;

&lt;h2 id=&#34;up-next&#34;&gt;Up next&lt;/h2&gt;
&lt;p&gt;The next game in the challenge is a roguelike.
This kind of game poses different problems, like pathfinding, more complex enemy AI in general, randomization of levels, items, etc.
I kinda feel exhausted right now but I&amp;rsquo;ll still try not to repeat the mistake I made and not procrastinate too much in the first weeks.
Though the next month is packed with various life-related events, much more than this one, so we&amp;rsquo;ll see.&lt;/p&gt;
&lt;p&gt;As for this game, here&amp;rsquo;s the cartridge if you want to play it yourself:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-30-game1-results/game1.png&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;Though, because the original code requires a more recent version of Fennel than the one TIC provides, the code in the cart above was AOT compiled to Lua and isn&amp;rsquo;t very readable.
Also note that the last stable release of TIC still contains the &lt;a href=&#34;https://github.com/nesbox/TIC-80/issues/1904&#34; target=&#34;_blank&#34;&gt;#1904&lt;/a&gt; bug, which means that my game will run ~10 times slower than it should.
So you either need to play the game on the itch.io page, as it features a more recent version, build a standalone version yourself, or use an older release with the Lua version above.
You can read the original source code at the itch.io page linked above, or in the &lt;a href=&#34;https://gitlab.com/andreyorst/game1/-/blob/main/cart.fnl&#34; target=&#34;_blank&#34;&gt;game repository&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&#34;comment-link&#34;&gt; &lt;a href=&#34;mailto:%61%6e%64%72%65%79%6f%72%73%74%2b%62%6c%6f%67%40%67%6d%61%69%6c%2e%63%6f%6d?subject=Comment: Game1 - Results&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34;&gt;Comment via email&lt;/a&gt;&lt;/div&gt;</description>
      <pubDate>Sun, 30 Jul 2023 15:29:00 +0300</pubDate>
    </item><item>
      <title>Game1 W4/4 progress</title>
      <link>https://andreyor.st/posts/2023-07-26-game1-w44-progress/</link>
      <guid>https://andreyor.st/posts/2023-07-26-game1-w44-progress/</guid>
      <description>&lt;p&gt;This post is midway through the last week I have to work on the game in a platforming genre.
And it&amp;rsquo;s a bit of a shame because currently, I&amp;rsquo;m having a blast - now that the physics and camera are in place the game already feels like a playable thing.
So I decided to boost this feel and make some graphics so the world won&amp;rsquo;t look too boring to traverse.&lt;/p&gt;
&lt;p&gt;I haven&amp;rsquo;t decided on what the world be like yet, but I&amp;rsquo;m running out of time, and also, I&amp;rsquo;m not that experienced in pixel art.
A few posts ago I wrote how I tried to do pixel art on the phone by using a stylus, and it worked pretty well for me.
So I took out the app again and started thinking about how would I use the colors that are still available to me.&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve briefly considered changing the palette too.
The default TIC-80 palette is a bit weird for my taste, and it doesn&amp;rsquo;t include some colors that I&amp;rsquo;d like to have, e.g. brown.
I don&amp;rsquo;t know how, but every time I see some pixel art that uses this particular palette I swear it has brown, but upon closer inspection it&amp;rsquo;s an illusion caused by interplay with the other colors.
Unable to find a new palette that works, and also that doesn&amp;rsquo;t make every other sprite I drew up to this point use some weird colors, I gave up for now.
Maybe I&amp;rsquo;ll just look at what colors I don&amp;rsquo;t use at all or use too infrequently and replace them with the colors I need for my purposes.&lt;/p&gt;
&lt;p&gt;For now, I drew some grass on stone type of terrain (again, no brown for dirt!), and some construction site-type red bars:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-26-game1-w44-progress/tiles.png&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;Note, these are tiles, e.g. what goes on the map, but there are some things that are not part of the map, for example, the coin, or the slime enemy.
I&amp;rsquo;ll explain why they&amp;rsquo;re here shortly.&lt;/p&gt;
&lt;p&gt;And here are the sprites:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-26-game1-w44-progress/sprites.png&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;As you can see, I&amp;rsquo;m storing these sprites mostly in rows, and tall sprites, like the player character look naturally in the editor.
Except for the ones in the third and fourth rows first half - these are horizontal sprites, but I still store them this way, because of how I do animations.
This reminds me that I haven&amp;rsquo;t explained anything regarding how my game works!
I guess I was too busy implementing it and didn&amp;rsquo;t have any spare time to write a proper post.&lt;/p&gt;
&lt;p&gt;So the animations are implemented in terms of sprites, obviously, but the way I set up them is a bit weird.
And I know, I definitively could save some space and re-use some sprites, because clearly there are doubles or even triples of the same sprite.
But it was easier this way, so I did it anyway.
I have this function, called &lt;code&gt;sprites&lt;/code&gt; that takes an id of the first sprite, the last sprite, and an optional &lt;code&gt;loop?&lt;/code&gt; parameter:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-fennel&#34; data-lang=&#34;fennel&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;(&lt;span style=&#34;font-weight:bold;font-style:italic&#34;&gt;fn &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt; [&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;from&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;to&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;loop?&lt;/span&gt;]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  (&lt;span style=&#34;font-weight:bold&#34;&gt;let &lt;/span&gt;[&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt; (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;fcollect&lt;/span&gt; [&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;id&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;from&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;or &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;to&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;from&lt;/span&gt;)] &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;id&lt;/span&gt;)]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (&lt;span style=&#34;font-weight:bold&#34;&gt;doto &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;font-weight:bold&#34;&gt;tset &lt;/span&gt;&lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:n&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;length &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt;))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;font-weight:bold&#34;&gt;tset &lt;/span&gt;&lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:loop?&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;loop?&lt;/span&gt;))))
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;The result of this function is a table, that simply holds a range of IDs for all the sprites in the animation.
Does the &lt;code&gt;n&lt;/code&gt; key hold the total count of sprites, and &lt;code&gt;loop?&lt;/code&gt;, well, we&amp;rsquo;ll get to it in a moment.&lt;/p&gt;
&lt;p&gt;The other component of animation is how I choose when to change the frame.
I&amp;rsquo;m sure there&amp;rsquo;s a different, and probably more robust way of doing this, but what I&amp;rsquo;ve settled on is this function:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-fennel&#34; data-lang=&#34;fennel&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;(&lt;span style=&#34;font-weight:bold;font-style:italic&#34;&gt;fn &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;next-frame&lt;/span&gt; [&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt;]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  (&lt;span style=&#34;font-weight:bold&#34;&gt;let &lt;/span&gt;[&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;+ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;or &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.last-draw-time&lt;/span&gt; 0))]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (&lt;span style=&#34;font-weight:bold&#34;&gt;if &lt;/span&gt;(&lt;span style=&#34;font-weight:bold&#34;&gt;&amp;gt;= &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt; 60)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        (&lt;span style=&#34;font-weight:bold&#34;&gt;let &lt;/span&gt;[&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt; (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj&lt;/span&gt;&lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:sprites&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;              &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;n&lt;/span&gt; (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;m/floor&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;/ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt; 60))]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;          (&lt;span style=&#34;font-weight:bold&#34;&gt;set &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.last-draw-time&lt;/span&gt; 0)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;          (&lt;span style=&#34;font-weight:bold&#34;&gt;if &lt;/span&gt;(&lt;span style=&#34;font-weight:bold&#34;&gt;= &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.frame&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites.n&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;              (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;case&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites.loop?&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;                &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;n&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;if &lt;/span&gt;(&lt;span style=&#34;font-weight:bold&#34;&gt;= &lt;/span&gt;&lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:number&lt;/span&gt; (&lt;span style=&#34;font-weight:bold;font-style:italic&#34;&gt;type &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;n&lt;/span&gt;))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;                      (&lt;span style=&#34;font-weight:bold&#34;&gt;set &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.frame&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;n&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;                      (&lt;span style=&#34;font-weight:bold&#34;&gt;set &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.frame&lt;/span&gt; 1)))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;              (&lt;span style=&#34;font-weight:bold&#34;&gt;set &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.frame&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;                (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;clamp&lt;/span&gt; 1 (&lt;span style=&#34;font-weight:bold&#34;&gt;+ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;n&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.frame&lt;/span&gt;) (&lt;span style=&#34;font-weight:bold&#34;&gt;length &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt;)))))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        (&lt;span style=&#34;font-weight:bold&#34;&gt;set &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;obj.last-draw-time&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt;))))
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;As you can see, this function receives an object &lt;code&gt;obj&lt;/code&gt; and a delta time &lt;code&gt;dt&lt;/code&gt;.
The object stores its own draw time, and when the sum of &lt;code&gt;dt&lt;/code&gt; and this time is greater than &lt;code&gt;60&lt;/code&gt; I change the frame.
The &lt;code&gt;loop?&lt;/code&gt; field is used in a special way - when the next frame exceeds the total sprite count, we check if the animation should loop.
If the field is &lt;code&gt;true&lt;/code&gt; the animation loops from the first frame.
However, if the field is a number, we restart the animation from that number.
This way the animation can have a set of frames that act as preparation or transition, and then loop only the necessary part.&lt;/p&gt;
&lt;p&gt;Here&amp;rsquo;s how I draw coins:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-fennel&#34; data-lang=&#34;fennel&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;(&lt;span style=&#34;font-weight:bold;font-style:italic&#34;&gt;local &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;coin-sprites&lt;/span&gt; (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt; 330 335 &lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:loop&lt;/span&gt;))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;(&lt;span style=&#34;font-weight:bold;font-style:italic&#34;&gt;local &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;coin-collect-sprites&lt;/span&gt; (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;sprites&lt;/span&gt; 346 351))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;(&lt;span style=&#34;font-weight:bold;font-style:italic&#34;&gt;fn &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;draw-coin&lt;/span&gt; [{&lt;span style=&#34;font-weight:bold&#34;&gt;: &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;x&lt;/span&gt; &lt;span style=&#34;font-weight:bold&#34;&gt;: &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;y&lt;/span&gt; &lt;span style=&#34;font-weight:bold&#34;&gt;: &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;frame&lt;/span&gt; &amp;amp;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;as&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;self&lt;/span&gt;} {&lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:x&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;cam-x&lt;/span&gt; &lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:y&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;cam-y&lt;/span&gt;}]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  (&lt;span style=&#34;font-weight:bold&#34;&gt;match &lt;/span&gt;(&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;self&lt;/span&gt;&lt;span style=&#34;color:#666;font-style:italic&#34;&gt;:sprites&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;coin-sprites&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (&lt;span style=&#34;font-weight:bold&#34;&gt;let &lt;/span&gt;[&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;s&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;or &lt;/span&gt;(&lt;span style=&#34;font-weight:bold&#34;&gt;. &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;coin-sprites&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;frame&lt;/span&gt;) 511)]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;spr&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;s&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;+ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;cam-x&lt;/span&gt; -120 &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;x&lt;/span&gt;) (&lt;span style=&#34;font-weight:bold&#34;&gt;+ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;cam-y&lt;/span&gt; -64 &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;y&lt;/span&gt;) 0 1)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;next-frame&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;self&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;/ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt; 2)))
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;coin-collect-sprites&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    (&lt;span style=&#34;font-weight:bold&#34;&gt;let &lt;/span&gt;[&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;s&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;or &lt;/span&gt;(&lt;span style=&#34;font-weight:bold&#34;&gt;. &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;coin-collect-sprites&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;frame&lt;/span&gt;) 511)]
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;spr&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;s&lt;/span&gt; (&lt;span style=&#34;font-weight:bold&#34;&gt;+ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;cam-x&lt;/span&gt; -120 &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;x&lt;/span&gt;) (&lt;span style=&#34;font-weight:bold&#34;&gt;+ &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;cam-y&lt;/span&gt; -64 &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;y&lt;/span&gt;) 0 1)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;next-frame&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;self&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;dt&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;      (&lt;span style=&#34;font-weight:bold&#34;&gt;when &lt;/span&gt;(&lt;span style=&#34;font-weight:bold&#34;&gt;= &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;frame&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;collect-sprites.n&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        (&lt;span style=&#34;font-weight:bold&#34;&gt;tset &lt;/span&gt;&lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;coins&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;self&lt;/span&gt; &lt;span style=&#34;color:#666;font-weight:bold;font-style:italic&#34;&gt;nil&lt;/span&gt;)))))
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;There are some wonky numbers in here to adjust to the center of the screen and camera position in the world, but the code should be straightforward.
The &lt;code&gt;(self:sprites)&lt;/code&gt; call simply returns the object&amp;rsquo;s current set of sprites, which I change in other functions depending on the situation.
E.g. if the coin was collected, the object&amp;rsquo;s sprite is changed to the &lt;code&gt;coin-collect-sprites&lt;/code&gt; which doesn&amp;rsquo;t loop, and the last sprite of that animation is invisible.
The coin itself is deleted from the world once the last &lt;code&gt;frame&lt;/code&gt; of the animation was played out.&lt;/p&gt;
&lt;p&gt;&lt;video autoplay loop muted class=&#34;pixelart&#34;&gt;&lt;source src=&#34;https://andreyor.st/2023-07-26-game1-w44-progress/coin-animation.mp4&#34; type=&#34;video/mp4&#34;&gt;
Your browser does not support the video tag.&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;This is the basis for all animation in the game.
Each object has it&amp;rsquo;s &lt;code&gt;:draw&lt;/code&gt; method, and each such method calls to &lt;code&gt;next-frame&lt;/code&gt; to understand what to display next time.&lt;/p&gt;
&lt;p&gt;Interaction with entities is done similarly - each entity has an &lt;code&gt;:interact&lt;/code&gt; method that decides what to do when a collision is detected.
For example, for the slime enemy, the method accepts the &lt;code&gt;y&lt;/code&gt; normal of the collision, and if it is not negative 1, which means that the collision happened from the side or from below, the player is damaged.
Otherwise, the slime sprite set is replaced with the stomp animation, and the object is deleted from the world:&lt;/p&gt;
&lt;p&gt;&lt;video autoplay loop muted class=&#34;pixelart&#34;&gt;&lt;source src=&#34;https://andreyor.st/2023-07-26-game1-w44-progress/slime.mp4&#34; type=&#34;video/mp4&#34;&gt;
Your browser does not support the video tag.&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;By the way, I haven&amp;rsquo;t talked about how I structure the world yet.
You may know, that TIC has an inbuilt map editor:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-07-26-game1-w44-progress/map-editor.png&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;This is basically a level designer for me because I&amp;rsquo;ve implemented a small function that upon loading the cart walks through each tile on the map and populates the world based on it.
I still use &lt;code&gt;map&lt;/code&gt; for drawing the level, but before that, all entity tiles are removed from the map, like in the image above coins and slimes, and the player&amp;rsquo;s head, which acts as a spawn point.
This way I can simply put objects in the map editor, and re-run the game, getting an updated world, complete with collectibles, power-ups, enemies, etc.:&lt;/p&gt;
&lt;p&gt;&lt;video autoplay loop muted class=&#34;pixelart&#34;&gt;&lt;source src=&#34;https://andreyor.st/2023-07-26-game1-w44-progress/level.webm&#34; type=&#34;video/webm&#34;&gt;
Your browser does not support the video tag.&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;Here I&amp;rsquo;m obviously testing things out, but the game feels complete enough to actually start designing some actual levels.
I&amp;rsquo;m running out of time though, so perhaps I&amp;rsquo;ll just make a single course to complete, and that&amp;rsquo;s it.
But it&amp;rsquo;s already more than I&amp;rsquo;ve anticipated at the beginning!&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve also started working on the menu, but there&amp;rsquo;s nothing to show yet.&lt;/p&gt;
&lt;p&gt;From now, I&amp;rsquo;ll probably stop doing any in-game stuff, and concentrate on the level itself and I also need some audio to play when the player collects coins, takes damage, jumps, and so on.
Maybe I&amp;rsquo;ll even include some music if I&amp;rsquo;ll manage to compose something not too annoying to listen to.&lt;/p&gt;
&lt;div class=&#34;comment-link&#34;&gt; &lt;a href=&#34;mailto:%61%6e%64%72%65%79%6f%72%73%74%2b%62%6c%6f%67%40%67%6d%61%69%6c%2e%63%6f%6d?subject=Comment: Game1 W4/4 progress&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34;&gt;Comment via email&lt;/a&gt;&lt;/div&gt;</description>
      <pubDate>Wed, 26 Jul 2023 20:09:00 +0300</pubDate>
    </item><item>
      <title>Game1</title>
      <link>https://andreyor.st/posts/2023-06-30-game1/</link>
      <guid>https://andreyor.st/posts/2023-06-30-game1/</guid>
      <description>&lt;p&gt;As I stated a month ago, I&amp;rsquo;m going to force myself into game development with a &lt;em&gt;personal game dev marathon&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/em&gt; that will span over the next five months.
Technically, nothing prevents me from jumping off at any point, so I do want this to go as smoothly as possible, so I won&amp;rsquo;t burn out until I get out at least two games.
Well, we&amp;rsquo;ll see, of course - life often has its own plans for me, so&amp;hellip; yeah.&lt;/p&gt;
&lt;p&gt;The first game on my list is a platformer, which I wanted to be as simple as possible, e.g. basically run and jump.
I have no prior experience in making platformers, so this will be an exciting thing to try!
I&amp;rsquo;ve decided to go with &lt;a href=&#34;https://tic80.com/&#34; target=&#34;_blank&#34;&gt;TIC-80&lt;/a&gt; for this one, to further reduce friction, as this game engine/fantasy console has everything I need to design a game.&lt;/p&gt;
&lt;p&gt;In the previous post, I also mentioned that I was traveling, and while I wasn&amp;rsquo;t able to get to my laptop at all, I&amp;rsquo;ve decided that I will allow myself to draw some sprites for the upcoming game in advance.
The only problem was that I had to do it on my phone, which is a challenge on its own, and I don&amp;rsquo;t know what software to use.&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve tried a bunch of options, and settled with &lt;a href=&#34;https://play.google.com/store/apps/details?id=com.PixelStudio&#34; target=&#34;_blank&#34;&gt;PixelStudio&lt;/a&gt; by &lt;a href=&#34;https://github.com/hippogamesunity&#34; target=&#34;_blank&#34;&gt;hippogamesunity&lt;/a&gt;.
Sadly, it&amp;rsquo;s not open source, but it is common for a lot of software for pixel art, and art in general.
The only open-source free software pixel art app I know is &lt;a href=&#34;https://libresprite.github.io/#!/&#34; target=&#34;_blank&#34;&gt;LibreSprtie&lt;/a&gt;, which itself is a fork of &lt;a href=&#34;https://www.aseprite.org/&#34; target=&#34;_blank&#34;&gt;Aseprite&lt;/a&gt; which changed its license some years ago and is no longer FOSS.
Since I was considering paying for either of those, I decided to go with PixelStudio because my phone has a stylus (S-Pen) that is supported by the app, and drawing on the screen seemed nicer.
I can always bring LibreSprite on my laptop in case I need more, and TIC also has a sprite editor.
TIC is also available on the phone, but unlike TIC, PixelStudio gives me the ability to do animations, which is what I was mainly looking for.
If not for animations, I would probably stick with the phone version of TIC until I&amp;rsquo;ve returned.&lt;/p&gt;
&lt;p&gt;So I went on and started working on characters for my &lt;code&gt;Game1&lt;/code&gt; project.
&lt;code&gt;Game1&lt;/code&gt; is, of course, a work-in-progress title, but it&amp;rsquo;s not far from the truth, as this will probably be the first thing that I will consider something like a real game made by me.
Anyway, this is how the app in which I drew my character looks:&lt;/p&gt;
&lt;figure&gt;&lt;img src=&#34;https://andreyor.st/2023-06-30-game1/pixelstudio.jpg&#34; width=&#34;35%&#34; height=&#34;auto&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;The interface is a bit cluttered, but I find it useful enough if the screen is big enough, which is my case.
But, back on character animations, here&amp;rsquo;s what I&amp;rsquo;ve got so far:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-06-30-game1/moveset.gif&#34; width=&#34;100%&#34; height=&#34;auto&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;This is just a mockup, testing around how animations would look in-game.
The blue fireball was added to show the damage animation, I&amp;rsquo;m not even sure if the projectiles will be in the game.
And starting from tomorrow I will actually start putting things together in the TIC.
I&amp;rsquo;m now realizing that by using too much color in the character sprite, I kinda limited myself on the number of colors that I can use for the background, and terrain because the default palette in TIC is quite limited on colors:&lt;/p&gt;
&lt;figure class=&#34;pixelart&#34;&gt;&lt;img src=&#34;https://andreyor.st/2023-06-30-game1/sweetie-16.png&#34; width=&#34;100%&#34; height=&#34;auto&#34;/&gt;
&lt;/figure&gt;

&lt;p&gt;So I may need to do a bit of redesign on the character part.
Actually, I&amp;rsquo;ve always liked pixel art for its limiting nature - the ability to express a lot of ideas and small details in such a low amount of pixels and colors always fascinated me.
I don&amp;rsquo;t know much about pixel art, and it probably shows, but hey, this marathon is to learn new stuff, so give me some time!
But, right now I&amp;rsquo;m not even sure how do I program such animations, so I&amp;rsquo;ll probably start with just drawing a rectangle for the player, enemies, and platforms.&lt;/p&gt;
&lt;p&gt;I will be posting updates as soon as I get more progress, so expect this as a kind of dev-log, but honestly, it is mostly for me, as I find this kind of activity encouraging to keep on.&lt;/p&gt;
&lt;div class=&#34;footnotes&#34; role=&#34;doc-endnotes&#34;&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id=&#34;fn:1&#34;&gt;
&lt;p&gt;You&amp;rsquo;re welcome to join, of course, but I&amp;rsquo;m not going to organize an actual event&amp;#160;&lt;a href=&#34;#fnref:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div class=&#34;comment-link&#34;&gt; &lt;a href=&#34;mailto:%61%6e%64%72%65%79%6f%72%73%74%2b%62%6c%6f%67%40%67%6d%61%69%6c%2e%63%6f%6d?subject=Comment: Game1&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34;&gt;Comment via email&lt;/a&gt;&lt;/div&gt;</description>
      <pubDate>Fri, 30 Jun 2023 22:46:00 +0300</pubDate>
    </item>
  </channel>
</rss>
