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