K-ON! Clubroom – Parts 6 & 7

The next two builds were a lot of fun to develop.

K-ON! - 16 - Blackboard

Plenty of extra decorations were added to the blackboard. There’s some flowers, some animals, an Azu-nyan sketch and Yui’s evaluation of said sketch.

Hardcore K-ON! fans take note: Azusa’s “nyaan!” and Yui’s face are drawn in their respective theme colours.

K-ON! - 17 - Whiteboard

And the whiteboard makes its first appearance.

All the sketches on the whiteboard were traced from screen captures, except for the “Welcome!” message. Fans should recognise the character portraits from the opening of the K-ON! film (as well as Yui’s frolicking rabbit).

K-ON! - 18 - Badges 1

Scattered around the whiteboard are little stickers representing all the characters.

K-ON! - 19 - Badges 2

Each one is matched to an outfit from the Listen!! music video, except for the red and orange star sticker (which comes from Yui’s sticker hobby in season 2 episode 16).

For reference: Ritsu is the green sticker with blue spots, Mio is the purple sticker with red and yellow triangles, Mugi is the striped sticker with a heart, Yui is the lightning bolt with lips and Azusa is the sticker with red polka dots.

K-ON! - 20 - Projector Shadow

If you look closely, you can see some subtle ambient shadowing behind the whiteboard. I’m using Unity projectors to do simple shadows like this. Lots of furniture ends up using this technique in later builds.

K-ON! - 21 - Upgraded Blackboard

After creating the whiteboard, I went back and improved the texture on the blackboard. The music lines are now sharper, and there’s some extra detail on the surface.

These two builds were a lot of fun to develop; I think I stayed up past midnight drawing all the sketches! They’re also the first builds to feature background music. Right now, it’s just a single looping track (“Have Some Tea”), but the music will get a significant upgrade later.


Until next time, see you on Venus (I’ve been playing Destiny on PS4).


K-ON! Clubroom – Parts 4 & 5

A double update today. In the next two builds, I started adding furnishings to the clubroom, and a bit of personality (also I fixed mouse support).

K-ON! - 12 - Windows

The window frames are in, and are casting wonderful shadows into the room.

But what’s that over there?

K-ON! - 13 - Cardboard

Ton-chan is finally safe from the Sun. It seems weird, but this little thing made a big difference in making the room feel less sterile.

The cardboard is a simple mesh that wraps around the wall and windowsill. It uses a “Transparent/Diffuse” material. There’s just one slight problem: “Transparent/Diffuse” materials don’t cast or receive shadows (and that’s kinda the whole point of this particular piece of cardboard).

My solution was to put a standard Unity cube in the window frame to cast the necessary shadow. The cardboard also ignores all light from the Sun (it gets lighting from ambient sources instead).

I should also note that the cardboard is actually 1mm above the surface it’s “attached” to. This is to prevent z-fighting.

K-ON! - 13 - Shadows

Check out those awesome shadows. At this point in the development, there’s a few extra light sources in the scene to simulate bloom. You can see the effect if you look at where the light is hitting the whiteboard. Eventually, it became necessary to remove the bloom lights (but I’ll explain why later).

There’s actually quite a few lighting tricks that were added in the previous builds. For example: several “ambient” directional lights are aimed at the ceiling and walls to pick out extra detail in the geometry.

This is a double update, so let’s take a look at what was added after the windows:

K-ON! - 14 - Blackboard

The blackboard! It’s pretty bare-bones in this early build.

K-ON! - 15 - Photos

But it has it’s own charm.

Next time will be another double update I think. The blackboard will get some more love and be joined by its partner in crime the whiteboard. Also: I hear K-ON! has something to do with music?


Swing by on a comet next week!

K-ON! Clubroom – Part 3

The main focus of this build was to fix the room’s dimensions.

K-ON! - 08 - Smaller Room

It’s smaller! Ton-chan’s tank now gets hit by Sunlight exactly as it does in the show. I’ll have to put the shade up on the window soon.

This build also includes controller support. Players can use an Xbox 360 controller to move/look around. I broke mouse support in the process, but that will be fixed in the next build.

K-ON! - 09 - Different Sizes

A lot of work went into altering the dimensions. I used Inkscape to prototype a number of different layouts. The stairwell and the storage room are included in the designs so they would fit later on.

Unfortunately, I couldn’t get the adjacent music room to fit. The K-ON! school (Sakuragaoka High School) is based on a real place in Japan (Toyosato Elementary School), but the real-life clubroom is not actually L-shaped, so the music room fits neatly next to it. The show version isn’t as simple. Oh well, I wasn’t planning on modelling the whole thing anyway.

K-ON! - 10 - Final Dimensions

So here are the final room dimensions. All the corner pieces are identical (inside and out), and line up with the wood panels on the rest of the walls, except in two places. Those two places are hidden behind Ton-chan’s cupboard in the corner (so no peeking!).

K-ON! - 11 - External Windows

A big part of getting the dimensions right was matching the external view as much as possible (funnily enough, I never knew where the clubroom was located until working on this project).

As you can see in the picture above, there are five identically-sized windows. The one on the right opens into the stairwell, and the other four into the clubroom itself.

Whew! A lot of work went into this build, and the end result is just a slightly smaller room!


Until next time, safe travels through the Kuiper Belt.

K-ON! Clubroom – Part 2

There’s a lot of improvements in the second build.

K-ON! - 03 - Furniture

Furniture! Sure, it’s all white boxes at the moment, but the room is starting to take shape.

Since this is a VR project, it’s important to get the dimensions correct. In addition to using real-world measurements for doors/walls and so on, I’m also using lots of reference images from the show itself. By adding in the placeholder furniture, I can cross-reference episode screenshots with real-world dimensions (e.g. how wide and tall is a large aquarium) and see if everything is matching up.

So: in episode 11 of the second season, Ton-chan the turtle gets a new aquarium that sits partially in the Sun. The girls create a shade by sticking some cardboard to the window. Since this was a crucial plot point in the show (by K-ON! standards), I needed to make sure the sunlight would hit Ton-chan’s tank in my scene (incidentally, this is why I chose the sunlight angle I did).

K-ON! - 04 - Tank


Unfortunately, it seems the room is a bit too large, and the tank is safely tucked into the corner. Now I know the room needs to shrink.

K-ON! - 05 - Different Angle

Here’s another angle showing off the newly textured doors and the bookshelf (behind what is clearly the whiteboard). The shadows are also a lot deeper and the sunlight warmer in this build.

K-ON! - 06 - Specular

Some lovely specular mapping on the floor, plus the new crouch mode in action. Crouching will allow players to get a better look at objects close to the floor. I also have a “tiptoe” feature that raises the player’s view slightly.

K-ON! - 07 - Textured Door

A closeup of the door. Right now, you can see the sun coming in through the windows, but eventually I’ll model the stairwell outside.

If you look closely at all these screenshots, you’ll also notice some dust motes floating around, which help give the room a bit of volume.

Next up: fixing the room’s size and adding controller support.


Best wishes via the Sub-Etha.