Categories
News

Big big Papervision3D project for small people

Big and Small Living room comp

You may have noticed that I’ve been a little quieter than usual over the past few months. And for that, I’m sorry. But there’s a very good reason for that! Me and the my very talented colleagues at Plug-in Media have been hugely busy working on the biggest and most ambitious Papervision3D project we’ve ever attempted; Big and Small.

Big and Small is a comedy TV show for kids (3 to 6) about a big character (called Big) and a small character (called Small) who, despite their differences, are the very best of friends.

There are so many details that I want to share, I’m not sure where to start! There’s the close collaboration with the BBC and Kindle (the TV show’s production company). And then there’s the studio sessions with Lenny Henry (famous UK comedian) who provided the voices, and the recording of Dom’s (Plug-in’s creative director) band for the music game. Not to mention all the incredible artists, coders and producers at Plug-in who all did an amazing job of bringing it all together.

But as the head geek at Plug-in I’ll concentrate on the technology. 🙂

Big and Small website living room Small central

The first hurdle was to recreate the Big and Small house in Papervision3D; tricky, given the cluttered, busy and warm look that Dom came up with (our creative director). We spent about a month just getting the model for the living room to look right.

Many things in the living room are point sprites; a 2D image of an object that looks the same no matter which way you look at it (like the flowers). We built our own PointSprite object that uses Papervision particles to render this.

Big and Small website, Big in Living room

Big looks 3D and changes as you move the camera around, but he’s also a 2D point sprite. Our animator Ben rendered him on the timeline spinning around, so we work out the angle of the camera and jump to the relevant frame.

We really wanted to make sure that any 2D graphics seamlessly fit in with the 3D world, not only stylistically but also technically. We created custom 3D mesh animation to make the bed spring up and down in reaction to a 2D Small jumping up and down.

Big and Small

There are many clever effects that took ages to program, and although you wouldn’t necessarily notice them, we like to think they add a certain quality to the project :

The mobile in the bedroom with a custom built verlet physics system:
Big and Small

A custom mesh animation system for the radio in the living room, allowing our designers to animate in 2D and apply it to a 3D mesh in real time.

The mirror in the bathroom with realtime reflections.

The toothpaste particles that collide with the walls and furniture.

Big and Small

The lighting that changes in the bedroom when the blind is closed.

It was a massive project, and phase one alone was over 200 days of coding, not to mention the artwork, 3D modelling, sound design and music.

Big and Small phase 2

And brilliantly, the BBC were so pleased that they’ve also commissioned phase 2 and we’re well underway with it. Phase 1 brought you into the house, but phase 2 takes you out into the garden, with magical plants, a reflective pond, and a Doom-style mysterious woods to explore!

You can see a little more in this (very rough cut) of a behind the scenes video, exploring the less geeky aspects of the project, including collaboration, concepting, and user testing.

It’s been a brilliant experience, Rebecca at the BBC has been a joy to work with, and it’s been really exciting to stretch what is possible in Flash and Papervision3D. I’ll let you know when phase 2 is released.

And I really would like to give major kudos to everyone on the Plug-in team that worked on this, I’m very proud to work with such talented people :

Juliet Tzabar : Production Director
Dominic Minns : Creative Director
Alan Owen : Senior programmer
Jack Lang : Programmer
Sarah Bird : 3D Modeller
Ben Mantle : Artist / Animator
Cath Lloyd : Animator (lip synching)
Lee Needham-Park : Project Manager
Kate Fowler : Sound design / production assistant
Kirsty, Ellie, Bruce (and Dom!) : Musicians

(Well done guys, you all rock!) And this project will be finished in a few weeks so we’ll be open for more projects! Can you use some Plug-in magic for your project? Need some Papervision3D expertise? Drop me a mail. seb@pluginmedia.net.

PS There’s an easter egg somewhere in the Big and Small website… can you find it?

44 replies on “Big big Papervision3D project for small people”

[…] the team at Plug-in Media have been working really hard on this for a few months. There’s a full write up about it on my blog along, you can see the walkthrough below, or visit the site […]

My daughter’s a big fan of Big and Small, so I’ll be showing this to her later on 🙂

WOW, absolutely fantastic use of papervision3d and flash! I haven’t been following papervision in a while and didn’t realize how far it has come. The 3d work looks flawless, no clipping or seams. Truly some talented people at Plug-in Media!

Wow! Congratulations! My kids (3 & 6) have actually been playing this for a while now, and I was already very impressed. I actually wondered whether you’d had a hand in it 🙂 Even my 3 yr old boy has had no trouble finding his way round almost all of the features you mentioned here, while I was admiring the lighting and shadows, and the way the 2d characters blend in with the 3d. I love the way the view height changes based on which character you’re playing as. And they are playing it on a lowly old pentium 1.4ghz system. Fantastic!

I watched the demo in Amsterdam, excellent use of PV3D and Flash; you guys rock! I can’t wait to show this off to the little one (2.5 yrs).

Simply incredible. How on earth did you keep the framerate up to high?! Stunning work.

Thats pretty damn outstanding man! Sorry to hear you couldn’t make it to Flash on Tap – but yeah this work really blows my mind in terms of how you mixed 3D and vector animations so beautifully. It performs damn well on that video!

@Ben Pitt (Duck) thanks Ben, that means a lot coming from you! I hope you’re doing well. A big part of the aim of the show and website is to teach kids about different perspectives, so we’re glad that comes across.

@Robin Parker thank you! @Mike thank you too! It’s quite difficult to get any Flash 3D to look good and work fast, but hopefully we’ve proved it can be done now?

@Seb the trick is to keep the triangles down. Every scene in this project has less than 1000 triangles.

@Clemente Gomez – kreativeKING Mostly they’re DAEs from Maya, although a lot is 2D animation and some is code generated 3D meshes.

@Fabianv thank you! And sorry I couldn’t make Flash on Tap (this project is why!)

Amazing work. I’ve been playing this big/little movie. I wish I were a kid again. I remember one game for kids, It was quite similar to this one. It was “Peter and Wolf” from 1996 or something like that. Now I can’t even find any info about it.
Really great work!

[…] blog along with Plug-in Media has been working for few months now, on website for BBC. There is a full write up on Seb’s blog also you can see the site presentation on the video below, or visit the site […]

Great stuff, especially liked the reactions from the children during the user testing you did. Must’ve been the best bit of the project actually watching kids interacting with the world especially after the hours everyone on the team must’ve put in.

Kudos to the BBC as well for continuing to allow designers and developers to push the boundaries.

Back in Flash MX times, my (ex)employer asked me if we could switch a relative project to 3D..
Of course I told him not. A few years later we get this from you..
This..
It has something from Pixar but.. its INTERACTIVE!
Beautiful sound, beautiful shadows, colors, animations,
2D, 3D, unbelievable framerates and all these through Flash Player.
Facts:
BBC got an outstanding project.
Kids got an amazing toy for playing and having fun.
You guys got pride (I hope so!!) for such work and the Flash Platform got a really big shake on whats possible.

So thank you.

Cant wait to see the Phase 2.
CONGRATULATIONS to every single one of your team!

Wow ! pretty impressive ! I love the idea to use particles to save FPS.
You say each scene is lower than 1000 triangles, thats crazy ! How do you handle clipping and z-sorting problems with very low polys ? Probably layers ? but how do you handle screen borders clipping issues ?

Great job anyway !

[…] これに関する記事が私のブログにも書いてあります。 […]

@Savvas Malamas it was quite a big decision for us whether to attempt to do this in Papervision3D or just use prerendered 3D. We just weren’t sure that we could recreate this sort of environment. In the end I’m very glad we went the realtime route, although it was a LOT of work!

@Jason Langdon Yes seeing the kids get into it was definitely really rewarding. Especially when this kinda content can seem quite annoying to adults! Very reassuring to see the kids getting to grips with the various games and toys.

@babeuf Yes there is heavy use of ViewportLayers to fix depth sorting, along with careful modelling to avoid overlapping surfaces. It’s the fastest way.

@ everyone else : THANK YOU! Very very pleased to get such good feedback. 😀

BBC is by far the best client to work for if you’re a Flash developer. They push the project to the limit both technically and creatively without breaking your balls. Not to mention the footages and sound FX you get at your disposal, plus they pay good and regularly 🙂

Secuoyas Blog » Archivo del weblog » Desarrolladores Flash y ActionScript, esos grandes desconocidos… Seb Lee-Delislesays:

[…] Un proyecto que me ha llamado la atención, que adelanta Seb en su blog, es el creado en colaboración con BBC y Kindle – Big and Small… ¡sencillamente increíble! Un ambicioso proyecto interactivo realizado en Flash y Papervision 3D (programación, personajes y animaciones 2D/3D), para niños de 3-6 años, y en el que el usuario puede interactuar con muchos de los elementos que van apareciendo en escena. Podéis informaros en profundidad en el post que Seb a dedicado a éste proyecto. […]

[…] 私はまた、FLARToolkitやRenderLayersその他多くの使用方法について説明する予定です。素晴らしいBig and Small projectからの、ちょっとしたヒントやコツを紹介するかもしれません。Papervision3D training course at Flash on the Beachから全ての詳細をどうぞ。 […]

Great work! Gongrats to all at plugin. Out of interest, how did you avoid the texture warp? did you use precise materials?

Thanks everyone for the massively kind comments!

@Dave we didn’t do anything especially, and there is texture warp, particularly on some of the floors. Although there are some things you can do to help. For example, you can add a vertex at the point where the armchair leg touches the floor to ensure that the leg doesn’t slide around.

Hi, Here in my job, enjoy to much the site. the games are amazing.

we notice, when u change a section and come back, the control doesn’t work anymore.

Ok, congratulations, very nice project.

Hi,

I am using papervision3d library and i wanted one help in it…..for my application i want to load my webcam on the 3d plane so can anyone provide me any help related to it….so i can progress in developing my application.

Thanx in advance…

Jay

Comments are closed.