Skip to content

Commit

Permalink
Phonetica: Pivot back to Rust
Browse files Browse the repository at this point in the history
  • Loading branch information
awhillas committed Aug 18, 2023
1 parent 044eb95 commit aab2f61
Show file tree
Hide file tree
Showing 8 changed files with 112 additions and 78 deletions.
24 changes: 20 additions & 4 deletions content/alphabetica.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ Title: Phonetica Game Dev Log
slug: reading-video-game-dev-log
summary: A new game I'm working on to help kids learn to read by sounding out words.
date: 2023-06-11
Modified: 2023-08-13
Modified: 2023-08-18
Category: Rust, Software Engineering, Game Development, Linguistics
---

## TODOs:

- [ ] BLocks use Pastel colours and selected to be Bright Red
- [ ] Port to Android
- [ ] Port to iOS
- [ ] Splash screen?
Expand All @@ -19,7 +20,6 @@ Category: Rust, Software Engineering, Game Development, Linguistics
- [ ] the countdown time is updated.
- [ ] word changes.
- [X] background?

- [X] Have the word written somewhere, top right.
- [X] Full screen
- [X] Update the letter asset images.
Expand All @@ -31,6 +31,22 @@ Category: Rust, Software Engineering, Game Development, Linguistics
- [X] Update the syllabus file, checking phonemes against OED.
- [x] Empty scene transition between word.


## 18 August, 2023 - Pivot back to Rust

So porting to Android and iOS is not going to be trivial. For vanilla `pygame` its ok but the `pymunk` is making it a nightmare with long lists of C++ errors. There is a fairly comprehensive guide but I'm not interested it learning all the ins and outs of porting python to Android let alone doing it all again for iOS (I'd need a Mac with enough space to install Xcode on which isn't readily available.). I could port to Kivy, which might make things better but again fighting to export to different platforms.

### Deploy to the Web!

I'm thinking of going back to Rust + Bevy (CMS game engine) + Rapier (physics) with the WASM target output so I can just deploy it to an S3 bucket and any platform can use it. Will mean that I can also share with my son when I'm in Sydney for extended an period. It will also mean no App store(s) to deal with and it will be really easy to share with anyone for testing, it just a link.

I knew this wisdom from my web-dev days but somehow have forgotten it: _The web is the best distribution medium for digital anything._

### Bye-bye Python

Prototyping in Python was great as its fast which means iteration time is short, which is what you want when building a throw away prototype. Too much effort and you get attached to the code.


## 12 August, 2023 - more play testing

Got an hour to work on the game today, Saturday. Added all the two word content. The three letter words is going to be _a lot_ of work.
Expand Down Expand Up @@ -101,8 +117,8 @@ I think that games could be that space for me.

So I have a basic concept for the game. Its going to involve blocks dropping and using a physics engine to simulate that. I found a simple 2D physics engine called [pymunk](http://www.pymunk.org/) which is an interface to the C library [Chipmunk2D](http://chipmunk-physics.net/). pymunk is under active development while Chipmunk2D seems to be feature complete. There is heaps of tutorials with pygame and pymunk so getting up-to-speed is quite easy and fun! There was a lot of low hanging fruit! To list what I went through:

- [Python Physics Simulation. Galton Board. Pymunk Tutorial](https://www.youtube.com/watch?v=-q_Vje2a6eY&t=15s&ab_channel=CoderSpace) I watched this and used the code as a starting point. Great template for getting pygame and pymunk talking to each other.
- [Using mouse and keyboard](https://pymunk-tutorial.readthedocs.io/en/latest/mouse/mouse.html) helped me create the touch/click interaction I need for interacting with the blocks.
- [Python Physics Simulation. Galton Board. Pymunk Tutorial](https://www.youtube.com/watch?v=-q_Vje2a6eY&t=15s&ab_channel=CoderSpace) I watched this and used the code as a starting point. Great template for getting pygame and pymunk talking to each other.
- [Using mouse and keyboard](https://pymunk-tutorial.readthedocs.io/en/latest/mouse/mouse.html) helped me create the touch/click interaction I need for interacting with the blocks.

I did give up on trying to rotate the images to the same angle as the physics block.

Expand Down
29 changes: 16 additions & 13 deletions docs/feeds/atom.xml

Large diffs are not rendered by default.

27 changes: 15 additions & 12 deletions docs/feeds/game-development.atom.xml
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>Alexander Whillas - Game Development</title><link href="http://alexander.whillas.com/" rel="alternate"></link><link href="http://alexander.whillas.com/feeds/game-development.atom.xml" rel="self"></link><id>http://alexander.whillas.com/</id><updated>2023-08-13T00:00:00+12:00</updated><entry><title>Phonetica Game Dev Log</title><link href="http://alexander.whillas.com/reading-video-game-dev-log.html" rel="alternate"></link><published>2023-06-11T00:00:00+12:00</published><updated>2023-08-13T00:00:00+12:00</updated><author><name>Alexander Whillas</name></author><id>tag:alexander.whillas.com,2023-06-11:/reading-video-game-dev-log.html</id><summary type="html">&lt;p&gt;A new game I&amp;rsquo;m working on to help kids learn to read by sounding out words.&lt;/p&gt;</summary><content type="html">&lt;h2&gt;TODOs:&lt;/h2&gt;
<feed xmlns="http://www.w3.org/2005/Atom"><title>Alexander Whillas - Game Development</title><link href="http://alexander.whillas.com/" rel="alternate"></link><link href="http://alexander.whillas.com/feeds/game-development.atom.xml" rel="self"></link><id>http://alexander.whillas.com/</id><updated>2023-08-18T00:00:00+12:00</updated><entry><title>Phonetica Game Dev Log</title><link href="http://alexander.whillas.com/reading-video-game-dev-log.html" rel="alternate"></link><published>2023-06-11T00:00:00+12:00</published><updated>2023-08-18T00:00:00+12:00</updated><author><name>Alexander Whillas</name></author><id>tag:alexander.whillas.com,2023-06-11:/reading-video-game-dev-log.html</id><summary type="html">&lt;p&gt;A new game I&amp;rsquo;m working on to help kids learn to read by sounding out words.&lt;/p&gt;</summary><content type="html">&lt;h2&gt;TODOs:&lt;/h2&gt;
&lt;ul class="task-list"&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; BLocks use Pastel colours and selected to be Bright Red&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; Port to Android&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; Port to iOS&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; Splash screen?&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; Announce the number of words left to explode.&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; Should track what has been played and what took a long time vs what was easy and took less time.&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; Make the selection more obvious i.e. rotate colour of selected?&lt;/li&gt;
&lt;li class="task-list-item"&gt;
&lt;p&gt;&lt;input type="checkbox" disabled/&gt; Bling Effects when:&lt;/p&gt;
&lt;ul class="task-list"&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; Bling Effects when:&lt;ul class="task-list"&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; the countdown time is updated.&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled/&gt; word changes.&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled checked/&gt; background?&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li class="task-list-item"&gt;
&lt;p&gt;&lt;input type="checkbox" disabled checked/&gt; Have the word written somewhere, top right.&lt;/p&gt;
&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled checked/&gt; Have the word written somewhere, top right.&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled checked/&gt; Full screen&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled checked/&gt; Update the letter asset images.&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled checked/&gt; Change background with word.&lt;/li&gt;
Expand All @@ -30,6 +27,13 @@
&lt;/li&gt;
&lt;li class="task-list-item"&gt;&lt;input type="checkbox" disabled checked/&gt; Empty scene transition between word.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;18 August, 2023 - Pivot back to Rust&lt;/h2&gt;
&lt;p&gt;So porting to Android and iOS is not going to be trivial. For vanilla &lt;code&gt;pygame&lt;/code&gt; its ok but the &lt;code&gt;pymunk&lt;/code&gt; is making it a nightmare with long lists of C++ errors. There is a fairly comprehensive guide but I&amp;rsquo;m not interested it learning all the ins and outs of porting python to Android let alone doing it all again for iOS (I&amp;rsquo;d need a Mac with enough space to install Xcode on which isn&amp;rsquo;t readily available.). I could port to Kivy, which might make things better but again fighting to export to different platforms.&lt;/p&gt;
&lt;h3&gt;Deploy to the Web!&lt;/h3&gt;
&lt;p&gt;I&amp;rsquo;m thinking of going back to Rust + Bevy (CMS game engine) + Rapier (physics) with the WASM target output so I can just deploy it to an S3 bucket and any platform can use it. Will mean that I can also share with my son when I&amp;rsquo;m in Sydney for extended an period. It will also mean no App store(s) to deal with and it will be really easy to share with anyone for testing, it just a link.&lt;/p&gt;
&lt;p&gt;I knew this wisdom from my web-dev days but somehow have forgotten it: &lt;em&gt;The web is the best distribution medium for digital anything.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;Bye-bye Python&lt;/h3&gt;
&lt;p&gt;Prototyping in Python was great as its fast which means iteration time is short, which is what you want when building a throw away prototype. Too much effort and you get attached to the code.&lt;/p&gt;
&lt;h2&gt;12 August, 2023 - more play testing&lt;/h2&gt;
&lt;p&gt;Got an hour to work on the game today, Saturday. Added all the two word content. The three letter words is going to be &lt;em&gt;a lot&lt;/em&gt; of work.&lt;/p&gt;
&lt;p&gt;I wrote a script to download the word audio from Google search page results when you proceed the word with &amp;ldquo;define&amp;rdquo;. Worked really well and got most of the missing two and three letter words.&lt;/p&gt;
Expand Down Expand Up @@ -74,11 +78,10 @@
&lt;h2&gt;23 July, 2023 - Physics is fun&lt;/h2&gt;
&lt;p&gt;&lt;img alt="pymunk demp / animated logo" src="http://alexander.whillas.com/images/pymunk_logo_animation.gif" /&gt;&lt;/p&gt;
&lt;p&gt;So I have a basic concept for the game. Its going to involve blocks dropping and using a physics engine to simulate that. I found a simple 2D physics engine called &lt;a href="http://www.pymunk.org/"&gt;pymunk&lt;/a&gt; which is an interface to the C library &lt;a href="http://chipmunk-physics.net/"&gt;Chipmunk2D&lt;/a&gt;. pymunk is under active development while Chipmunk2D seems to be feature complete. There is heaps of tutorials with pygame and pymunk so getting up-to-speed is quite easy and fun! There was a lot of low hanging fruit! To list what I went through:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;table class="highlighttable"&gt;&lt;tr&gt;&lt;td class="linenos"&gt;&lt;div class="linenodiv"&gt;&lt;pre&gt;&lt;span class="normal"&gt;1&lt;/span&gt;
&lt;span class="normal"&gt;2&lt;/span&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/td&gt;&lt;td class="code"&gt;&lt;div&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;[&lt;span class="nv"&gt;Python&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;Physics&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;Simulation&lt;/span&gt;.&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;Galton&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;Board&lt;/span&gt;.&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;Pymunk&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;Tutorial&lt;/span&gt;]&lt;span class="ss"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;https&lt;/span&gt;:&lt;span class="o"&gt;//&lt;/span&gt;&lt;span class="nv"&gt;www&lt;/span&gt;.&lt;span class="nv"&gt;youtube&lt;/span&gt;.&lt;span class="nv"&gt;com&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nv"&gt;watch&lt;/span&gt;?&lt;span class="nv"&gt;v&lt;/span&gt;&lt;span class="o"&gt;=-&lt;/span&gt;&lt;span class="nv"&gt;q_Vje2a6eY&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nv"&gt;t&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;15&lt;/span&gt;&lt;span class="nv"&gt;s&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nv"&gt;ab_channel&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nv"&gt;CoderSpace&lt;/span&gt;&lt;span class="ss"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;I&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;watched&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;this&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;and&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;used&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;the&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;code&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;as&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;a&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;starting&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;point&lt;/span&gt;.&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;Great&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;template&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;getting&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;pygame&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;and&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;pymunk&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;talking&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;to&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;each&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;other&lt;/span&gt;.
&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;[&lt;span class="nv"&gt;Using&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;mouse&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;and&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;keyboard&lt;/span&gt;]&lt;span class="ss"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;https&lt;/span&gt;:&lt;span class="o"&gt;//&lt;/span&gt;&lt;span class="nv"&gt;pymunk&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nv"&gt;tutorial&lt;/span&gt;.&lt;span class="nv"&gt;readthedocs&lt;/span&gt;.&lt;span class="nv"&gt;io&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nv"&gt;en&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nv"&gt;latest&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nv"&gt;mouse&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nv"&gt;mouse&lt;/span&gt;.&lt;span class="nv"&gt;html&lt;/span&gt;&lt;span class="ss"&gt;)&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;helped&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;me&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;create&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;the&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;touch&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nv"&gt;click&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;interaction&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;I&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;need&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;interacting&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;with&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;the&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;blocks&lt;/span&gt;.
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=-q_Vje2a6eY&amp;amp;t=15s&amp;amp;ab_channel=CoderSpace"&gt;Python Physics Simulation. Galton Board. Pymunk Tutorial&lt;/a&gt; I watched this and used the code as a starting point. Great template for getting pygame and pymunk talking to each other.&lt;/li&gt;
&lt;li&gt;&lt;a href="https://pymunk-tutorial.readthedocs.io/en/latest/mouse/mouse.html"&gt;Using mouse and keyboard&lt;/a&gt; helped me create the touch/click interaction I need for interacting with the blocks.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;I did give up on trying to rotate the images to the same angle as the physics block.&lt;/p&gt;
&lt;h2&gt;14th July, 2023 - Just graphemes to phonemes&lt;/h2&gt;
&lt;p&gt;Phonetics is quite the rabbit hole. I just need English spellings, or graphemes, and their related phonemes. I found this chart for Australian English (I think)&lt;/p&gt;
Expand Down
Loading

0 comments on commit aab2f61

Please sign in to comment.