projects/youbeat.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="UTF-8" />
   5     <title>Youbeat</title>
   6     <meta property="og:title" content="Youbeat" />
   7     <meta name="twitter:title" content="Youbeat" />
   8     <meta
   9       name="description"
  10       content="A while ago, I wanted to adapt arcade game Jubeat for home play,
  11                 using a device called a launchpad."
  12     />
  13     <meta
  14       property="og:description"
  15       content="A while ago, I wanted to adapt arcade game Jubeat for home play,
  16                 using a device called a launchpad."
  17     />
  18     <meta
  19       name="twitter:description"
  20       content="A while ago, I wanted to adapt arcade game Jubeat for home play,
  21                 using a device called a launchpad."
  22     />
  23     <link rel="stylesheet" href="../main.css" />
  24   </head>
  25   <body class="whole-site">
  26     <div>
  27       <iframe class="embed-title" src="../shared/title.html"> </iframe>
  28       <div class="main-container">
  29         <div class="main">
  30           <div class="entry">
  31             <a href="../index.html">Home</a>
  32             <div class="title-block">
  33               <a class="blog-title" href="https://github.com/gnargle/YouBeat">
  34                 <h3>Youbeat</h3>
  35               </a>
  36               <h3 class="datestamp">2022</h3>
  37             </div>
  38             <div class="content">
  39               <p>
  40                 A while ago, I wanted to adapt arcade game Jubeat for home play,
  41                 using a device called a launchpad. So I bought one. It looks
  42                 like this:
  43               </p>
  44               <a href="../img/projects/launchpad.png">
  45                 <img
  46                   class="blog-img"
  47                   src="../img/projects/launchpad.png"
  48                   alt="a
  49               product photo of the novation launchpad mini mk3. It's a
  50               keyboard-like device made up of a grid of translucent RGB
  51               squares."
  52                 />
  53               </a>
  54               <p>
  55                 Jubeat is a rhythm arcade game by Konami in their Bemani line.
  56                 It looks like this:
  57               </p>
  58               <a href="../img/projects/jubeat.png">
  59                 <img
  60                   class="blog-img"
  61                   src="../img/projects/jubeat.png"
  62                   alt="a
  63               product photo of the konami's jubeat arcade cabinet. It's a
  64               big box with speakers, a small wide screen, and a 4x4 grid of large buttons."
  65                 />
  66               </a>
  67               <p>
  68                 The grid of buttons are each separate note inputs, and the
  69                 screen above it actually extends below the buttons. The notes
  70                 for the beatmaps are shown beneath each button you need to
  71                 press. it looks pretty cool, but naturally it's hard to play at
  72                 home (ignoring that it's 'illegal' to play at home because
  73                 piracy, but like, who gives a fuck on that front).
  74               </p>
  75               <p>
  76                 Now, with a bit of RGB magic, you can kinda get an approximation
  77                 of the inputs for Jubeat on a launchpad. So... why not do that?
  78               </p>
  79               <p>
  80                 Thing is, it ended up pretty involved. Like projects tend to do.
  81                 First port of call was talking to the launchpad from my language
  82                 of choice, C#. The launchpad is controlled over MIDI, with
  83                 regular input messages used when you hit a button, and output
  84                 used to tell the launchpad what colours to light up. There's
  85                 also a few sysex messages for stuff like changing mode, how
  86                 quickly the LEDs pulse, etc.
  87               </p>
  88               <p>
  89                 As I always do, I checked Nuget and found - well, nothing. So
  90                 <i>then</i> I searched github and found a perfect[ish] package
  91                 called launchpad-dot-net, from a user called iUltimateLP.
  92                 Unfortunately, it didn't support my model of launchpad, only
  93                 earlier ones, so before I could write the game, I had to rewrite
  94                 the library to support my launchpad. That's right, baby! It's a
  95                 project within a project!
  96               </p>
  97             </div>
  98           </div>
  99           <div class="entry">
 100             <div class="title-block">
 101               <a
 102                 class="blog-title"
 103                 href="https://www.nuget.org/packages/launchpad-dot-net"
 104               >
 105                 <h3>launchpad-dot-net fork</h3>
 106               </a>
 107               <h3 class="datestamp">2022, 2024</h3>
 108             </div>
 109             <div class="content">
 110               <p>
 111                 So I bought a midi device called a launchpad - it looks like
 112                 this.
 113               </p>
 114               <p class="blog-img">
 115                 <i>Image removed. That's enough of that - Ed.</i>
 116               </p>
 117               <p>
 118                 OK so I've done my funny joke but honestly there wasn't much to
 119                 this other than adding branches in the code for the new model of
 120                 launchpad. The previously supported models also didn't do full
 121                 RGB so I added the commands to fully control the LEDs
 122                 specifically for the mini mk3.
 123               </p>
 124               <p>
 125                 Forking this actually turned out to be really useful for my
 126                 future work on <a href="dalamudplugins.html">LPHotbars</a> so
 127                 I'm glad I did it, and I even did my due diligence of PRing my
 128                 changes to the original repo. Still pending, that one. After a
 129                 week-ish of no response from the original dev, I packaged it up
 130                 to Nuget and shipped it for future use. Since the original dev
 131                 never stuck the library on nuget, I felt that was... ok? I did
 132                 worry about it at the time, but the original library is
 133                 abandoned, so probably fair game.
 134               </p>
 135               <p>
 136                 Then, later, as mentioned, I picked this up again for LPHotbars.
 137                 In the meantime, a very kind person called pstaszko had ported
 138                 the library to dotnet standard 2. Which was pretty damn
 139                 convenient, because over the course of 2024, Dalamud - the
 140                 modding framework for Final Fantasy XIV - started targeting
 141                 dotnet standard instead of some old version of dotnet framework.
 142               </p>
 143               <p>
 144                 Since I was in the code, I also added a testbed app, which
 145                 allowed me to discover a bug - the CC keys (all the labelled
 146                 keys in the image above, the ones around the edge) and the SYSEX
 147                 calls stopped working, so I had to fix those up.
 148               </p>
 149               <p>
 150                 I also experimented with replacing the midi library, in an
 151                 attempt to support linux. It wasn't successful, honestly -
 152                 doesn't seem like any underlying midi libraries for c# actually
 153                 properly support device comms on linux.
 154               </p>
 155               <p>
 156                 Going one deeper and forking an actual midi library to add this
 157                 support was out of scope for what I was working on and would
 158                 have ballooned the project, so instead I just abandoned the
 159                 cause. Maybe one for the future, it would be nice to offer linux
 160                 support for LPHotbars considering how nice XIV works on
 161                 Linux/Steam Deck.
 162               </p>
 163               <p>OK, back to the main project.</p>
 164             </div>
 165           </div>
 166           <div class="entry">
 167             <div class="title-block">
 168               <a class="blog-title" href="https://github.com/gnargle/YouBeat">
 169                 <h3>Youbeat, again</h3>
 170               </a>
 171               <h3 class="datestamp">2022</h3>
 172             </div>
 173             <div class="content">
 174               <a
 175                 href="https://raw.githubusercontent.com/gnargle/YouBeat/refs/heads/master/Images/youbeat_game2.jpg"
 176               >
 177                 <img
 178                   class="blog-img"
 179                   src="https://raw.githubusercontent.com/gnargle/YouBeat/refs/heads/master/Images/youbeat_game2.jpg"
 180                   alt="an in-game photo of youbeat, showing the game screen and the launchpad in action.
 181                   buttons on the launchpad are lit with different colours to demonstrate how close a note is."
 182                 />
 183               </a>
 184               <p>
 185                 So once I'd rewritten the launchpad library I could actually
 186                 make the game. I have never really got on with game engines -
 187                 I'm largely a pure programmer, and my experiments with unity in
 188                 the past have massively frustrated me. (Unity is a fucking
 189                 nightmare. Has anyone else said this? JK I know they have)
 190               </p>
 191               <p>
 192                 So instead I looked for a minimal library that would do the
 193                 video-gamey-relevant stuff (directx instance, drawing, etc) and
 194                 then just get out of my way.
 195               </p>
 196               <p>
 197                 To that end, I found
 198                 <a href="https://github.com/kylepulver/Otter">Otter2D,</a> now
 199                 sadly discontinued. It was written by kyle pulver, who has
 200                 worked on a bunch of things you may have heard of including
 201                 super meat boy forever. Otter2D is exaclty what I wanted and so
 202                 naturally it crashed and burned to the ground like Icarus, a
 203                 library to perfect to exist.
 204               </p>
 205               <p>
 206                 But <i>before</i> that happened, I used it for Youbeat. And it
 207                 was really, really nice! Drawing stuff to the screen was a
 208                 one-line affair, transitions and tweens were simple to add and
 209                 there was reasonable variety to them, and the library itself was
 210                 flexible enough that I could build a game that primarily
 211                 functioned on an external device without it complaining.
 212               </p>
 213               <p>
 214                 This has always traditionally been my problem with game dev.
 215                 With otter, I could just write code, like I always do. I'm
 216                 pretty good at writing code, and I'm pretty rapid too. My
 217                 experience with engines has largely been them slowing me down
 218                 and getting me away from the stuff that makes most sense to me.
 219                 They're like wading through a bog.
 220               </p>
 221               <p>
 222                 As a result, this is the first time I've ever really
 223                 <i>completed</i> a game. This was admittedly helped by me not
 224                 really doing any level design or such, and while I did make some
 225                 art assets for the menus there was no extensive art necessary,
 226                 something I have always got stuck on. I know that's what
 227                 programmer art is for but my ambitions for games tend to extend
 228                 past prototypes and so it presents something of a psyche
 229                 barrier.
 230               </p>
 231               <p>
 232                 I also built a very barebones mapper! Partly so I could make my
 233                 own beatmaps to test the game with, but also because I firmly
 234                 believe that a good rhythm game always provides a mapper. The
 235                 rhythm games community is pretty tight-knit and thrives on the
 236                 free exchange of ideas and code, and so you will find that all
 237                 the best rhythm games either ship with a mapper or release one
 238                 shortly after they come out. It's extra work but it's good for
 239                 the health of the game!
 240               </p>
 241               <p>
 242                 I will admit that the mapper does kind of suck, though. It's a
 243                 horrible archaic winforms app, but it does the job. I think if I
 244                 wanted to dedicate more time to the project this is where I'd
 245                 start. Ultimately though I am a firm believer in Zack Freedman's
 246                 <a href="https://www.youtube.com/watch?v=L1j93RnIxEo"
 247                   ><i>Finish More Projects</i></a
 248                 >
 249                 mantra. When it comes to stuff you're doing for yourself, done
 250                 is <i>always</i> better than perfect.
 251               </p>
 252               <p>
 253                 Anyway. While it may look a bit ramshackle now to my more senior
 254                 eye, this project taught me a lot about designing for weird
 255                 hardware, a lot about how games work when you don't have an
 256                 engine choking you, and a few nice tidbits about nuget and such.
 257                 Worthwhile! And hey, if you have a launchpad, you should check
 258                 this and LPHotbars out. I'm really proud of both.
 259               </p>
 260             </div>
 261           </div>
 262         </div>
 263       </div>
 264       <iframe class="embed-links" src="../shared/links.html"> </iframe>
 265       <iframe class="embed-footer" src="../shared/footer.html"> </iframe>
 266     </div>
 267   </body>
 268 </html>