Creative [RELEASED] Panoply: Comics and Splitscreen for Unity

As of this morning Panoply has been submitted to the Asset Store! Support and I still haven't been able to figure out the Unity 4 package submission problem, so I followed @hopeful 's advice and submitted under Unity 5 only. I'll keep you posted...

 

Great! I have a couple of happy girls here!

 

Can I get your Asset to use ? Thanks !

 

Hi @jogswu8, Unity is currently reviewing the asset—with any luck, it'll be on the store soon.

 

Looking forward to that! I'm currently working with a digital comic project and will likely to use your asset when it's available. I was very impressed with Upgrade soul. Beautiful work.

 

Thanks very much @eevameltio!

 

Hi all—nothing to report this week, the asset is still in review. I understand it usually takes about two weeks, so all is as expected. More soon...

 

Well I didn't think it'd be THAT soon—Panoply has been approved and is now live in the Asset Store! Woo hoo!

 

Congratulations, this looks awesome, will definitely grab a copy to play with it!

Can you customize the appearance of captions, e.g. make speech bubbles oval?

 

Thanks @Alex Chouls ! Yes, captions are done with GUISkins so they can be customized. BTW people seem to find the PlayMaker integration quite useful, I've already seen a few projects using it... glad I was able to include it!

 

Cool! Thanks for including PlayMaker actions. I love it when tools work together to empower creative people

 

My daughter loves it, btw. She is not very familiar with Unity but she picked it up very quickly. Nice to see a product that is not too complex for an artist.

 

Awesome, that's great to hear, @Teila!

 

@opertoonist I read through the manual and didn't notice anything about adding screen space camera effects to the panel cameras...

Would I be able to add Unity's Cinematic Image Effects to these cameras? Like DOF, AO, tonemapping etc.

 

@Licarell Yes, definitely—Panoply cameras are just regular Unity cameras with an extra script on them.

 

Fantastic, feeling better about my purchase everyday!

 

Do you have a example with 3d content?

 

@Devision4 See below for a video showing 3D content.

And here's an interactive WebGL version of the same: http://opertoon.com/pnply/panelpoems/

 

Hi all—if you've had a good experience with Panoply, please consider leaving a review in the asset store! And if you're having any issues, please let me know and I'd be happy to help. Thx!

 

I will one day find a reason to use this in a project. This looks amazing.

 

opertoonist, I purchased Panoply but I won't have time to study or start using it for several weeks. I love how easy it makes using panels to tell a story. In an upcoming project, I will have hundreds of panels. On many of the panels, I want to use some VERY heavy image processing like volumetric shadows, atmospheric scattering, ray traced reflections, etc... Many of the story panels will need to adapt (not in real time) to the reader's choices and actions, but they only need to be rendered once to 'build' the panel.

Let's say I have a panel that looks out over a forrest or city. I may have rain, puddles, mist, motion blur, hazy lights, etc... I'd like to render the thousands of objects to an image and free up those thousands of objects once that panel is 'built'. I also don't need the panel to render thirty frames per second. A static image built over several seconds from the complex 3d camera view is enough for the Panoply panel. Basically it could just snapshot the 3d camera view and then show the panel as a static 2d image rendered by that panel's camera.

If your system could snapshot a camera view that takes several seconds to render one frame and then use that static snapshot image as the panel contents, that would be a huge optimization for speed and memory in an adaptive content story.

If your system currently won't do this snapshotting complex / time consuming renders to a simple image panel, do you think it could be added any time soon?

I understand if it's too specialized for anyone but me. I already have snapshotting code that I can use to render to texture or file. I can use my own storyboard placeholder images while building the Panoply project. Then, I can have my slow rendering 3d camera render and replace those placeholder images as needed. Any high level advice you have on how I could do it myself would be a huge help. I don't want my changes to cause too many problems when you make updates.

Thanks for making such a great tool and tutorials!

 

@opertoonist I looked through the documentation... I didn't notice panel borders... are there any? Also instead of black can we put an image in the background or maybe gradients?

Thanks, and I'll try and put up a review soon!

Kent

 

Thanks for the purchase @RD—this is an interesting approach you're describing! I think it's probably too unique a case for me to pursue adding right now, but I'm very curious to see how you get along with it. Generally, I think the workflow you describe makes sense, and I don't see it causing issues going forward since you're not actually messing with Panoply's mechanics. To me it seems like the toughest things will be scheduling the renders so they don't slow overall performance down, and figuring out what aspect ratio to render at (though I guess if you've got placeholders you could just use those as reference). Let me know if more questions crop up.

 

You're correct @Licarell that panel borders aren't built in. It's something I'm looking at adding in a future update, but in the meantime it's a pretty easy thing to do for individual panels with Unity's legacy GUI routines (with some searching you can probably find a script out there that adds borders to a Unity camera--this could be added to panels as needed, though you might run into some depth sorting issues if you have multiple bordered panels overlapping each other).

To customize the background for a panel, you could just create a sprite with the image you want to use and drop it behind all of your other artwork. Let me know if you've got more questions!

 

Thanks for the quick reply. I figured my type of projects would be pretty rare. I've decided to use high quality generic pre-renders as placeholder images without any of the reader's customizations. That way, I can get the panel aspect ratios, placement, and transitions looking good. As the reader studies the panels of earlier pages, I think I can have a low priority thread render the complex custom images for the later pages. Panoply will be a great tool for these projects once I get the workflow and tool integrations nailed down.

 

@Licarell Here's the script (C#) that was occasionally to used to add panel borders in Ascent from Akeron (had to check and make sure it was OK to distribute). This gets added directly to a panel/camera. It's not perfect, but may help. What I ultimately plan to do is make this a native Panoply feature that takes the depth of each panel camera into account so that each panel's borders are properly masked by the others.

----

using UnityEngine;
using System.Collections;
[ExecuteInEditMode]

public class CamBorder : MonoBehaviour {

public Color color;
public int borderFactor = 1;
public float borderFineControl = 0.015f;
public GUISkin BorderSkin;
private Camera cam;
private Texture2D texture;

void Start() {

cam = transform.GetComponent<Camera>();​

}

void OnGUI() {

GUI.skin = BorderSkin;
if ((cam.pixelWidth > 2) && cam.enabled) {

float borderWidth = Screen.width * borderFineControl * borderFactor;
if (cam.pixelWidth < (2 * borderWidth)) {

borderWidth = cam.pixelWidth / 2;​

}
GUI.Box(new Rect(cam.pixelRect.x, (Screen.height - cam.pixelRect.yMax), cam.pixelWidth, borderWidth), "") ;
GUI.Box(new Rect(cam.pixelRect.x, (Screen.height - cam.pixelRect.yMax), borderWidth, cam.pixelHeight), "") ;
GUI.Box(new Rect(cam.pixelRect.x, (Screen.height - cam.pixelRect.yMin - borderWidth), cam.pixelWidth, borderWidth), "") ;
GUI.Box(new Rect(cam.pixelRect.x + cam.pixelWidth - borderWidth, (Screen.height - cam.pixelRect.yMax), borderWidth, cam.pixelHeight), "") ;​

}​

}​

}

 

Makes sense @RD, would love to see how it shapes up!

 

Thank you for this and I look forward to the update...

 

Hi,
This looks very interesting. Just bought it.

Did a quick OSX standalone build with the included sample rocket comic scene.
It is 48.5 megs.
Any tips on reducing that size?

webgl size is 8.1 megs.

thanks.

 

You may be building in 'development' mode which will not strip out large amounts of debugging info. On OSX make sure you have NOT checked 'Development Build'. Try going into File > Build Settings... > 'PC, Mac & Linux Standalone' and make sure that 'Development Build' is NOT checked.

When building for iOS, IL2CPP is great but Development and Debug builds will have many megs of extra info. Try going into File > Build Settings... > iOS and make sure that 'run in xcode as' is set to 'release' build and that 'Development Build' is NOT checked.
Hope this fixes your problem.

 

Thanks for the purchase @shwa (and for the suggestions, @RD) — to the question at hand, I didn't make any effort to optimize the assets in the sample scene, so that's part of what is contributing to the size of the build. When I make sure the dimensions of all the visual assets are multiples of 4, it brings the OS X build size for me down to 38.3 MB. A build with a completely empty scene ends up being 36.7 MB, so I don't think it can get much smaller!

 

Thanks, OP (opertoonist).
I'll be digging down hard into this app in the coming days and weeks.
Very stoked about it!

Wondering if it's relatively straightforward to do the following:

The user moves thru a few pages of the story.

At page 5, there's some text about the story, and there's a 3d scene behind where the user can user their arrow or wasd keys and mouse (for camera rotation) to wander around that scene. At some point, the user chooses to return to the "front" of page 5 where that text was first seen, and then resumes using the page changing approach you have in the rocket example scene.

Are there some built in prefabs or scripts to do this?
I'm not a seasoned coder.

thanks,

shwa

 

Yes @shwa this is possible. If you're using PlayMaker, you could use the DisableNavigation and EnableNavigation actions together with the ArriveAtStep action to turn the swipe navigation off and on when needed (the actions are covered in the docs). For example, you could set up the ArriveAtStep action to trigger DisableNavigation when the user arrives at step 5. Then, based on some action the user performs, you could trigger EnableNavigation when you want to allow them to move on from that step.

If you don't have or don't want to use PlayMaker, you can do the same things in code pretty easily using the PanoplyCore.scene.disableNavigation flag and the OnTargetStepChanged event. Let me know if you've got further questions.

 

Hi OP,

That's great news.
You made my day!

Since i'm not much of a coder, do you recommend i learn PlayMaker, if i want to do a number of custom things?
How much extra functionality would one have if they used PlayMaker with Panoply?

thanks,

shwa

 

@shwa If you check out the PlayMaker section of the docs you can see what the integration allows you to do. I've seen other folks who don't have coding expertise do well with Panoply and PlayMaker together. Of course, it all depends on the needs of your specific project!

 

Ok, i'll check that out.

Imo, including a demo scene that uses the various functions will allow some people to get up and running faster.

cheers

 

@shwa Do you mean specifically for the PlayMaker features? I hadn't thought to include them in the existing demo scene because it would cause compile errors until people installed PlayMaker. I suppose there could be a separately downloadable demo scene that focused on PlayMaker...

 

HI OP,

Not playmaker. Either 1 or more standard demos that show the breadth of what's possible.

E.g., the switch i mentioned earlier, where the viewer can go into a 3d scene, and then pop back into the comic.
A percentage of unity developers won't need this kind of thing, cause they are code savvy or very code savvy.

There's a certain kind of designer/content creator developer that may not have these skills, and may bring a very strong creative sense into your asset, if some demos are included, where the tech implementation can be easily replicated.

In my case, i'm juggling 25 different things right now, and the easier it is for me to hack away at Panoply, the faster my creative happens. Imo, it has the potential to create a wider and faster adoption of your tool.

Either way, i'm going to learning curve it, cause i think what you've built is extremely compelling, with potent and important application for various things i'm moving forward.

'nuf said.

 

I think that is more a question of game design, not Panoply or any other specific asset or method of coding….

I think probably the standard solution would be to create scenes. A "chapter" of the comic would be a scene, the last frame would trigger the next scene, which is either another chapter or maybe a game scene. The comic would function as a cutscene between game tasks.

 

Thanks for the suggestion @shwa I can see the utility of what you're talking about, and it's on my list of tasks to consider for future updates.

 

Thanks OP! Much appreciated.

Hi Wetcircuit,
Your 'standard' solution would be useful in alot of scenarios, but possibly not all.

There was part of a story in one of OP's demos, where you could see a '3D' scene in the background of a particular point in that story (can't remember which story). I felt immediately drawn to wanting to enter into that scene, as it was part of the feel of the narrative. Imo, this kind of seamless movement between various modalities would be very exciting for certain kinds of stories or 'games'.

cheers!

 

I have thought about that very transition, too. I did not mean to be rude by speaking up. If the author has ideas to transition in/out of a comic that way, I am certainly not trying to shut that down….

 

I didn't find your comment rude at all. if people speak freely about what they think may improve a tool, i'm all for it. I'm digging further into Panoply. It's really very interesting, and i'm just scratching the surface. This whole layering of 2d/3d, etc, is a new paradigm for me, though one i've wanted to get a handle on since i used Macromedia Director in the 20th century.

 

Spent some time this morning playing with the 2D/3D transition as described by @shwa (or at least as I understood it). It's definitely doable, but requires a slight modification to Panoply. I needed to add a switch to disable a panel's control of its own camera so that the FPS controller can take over when needed. Once I got it working it was pretty cool! The switch will be rolled into the next update of Panoply, which I'm full steam ahead on now.

 

@shwa Regarding your question on the new forums... that frustum warning you've seen is harmless (though annoying). I'll see if I can stamp it out in the next update.

 

Hey all, if you're curious about what Panoply can do, next week you'll get five new examples in the form of VISIONS_1, an anthology of short horror comics created by students of The Animation Workshop in Denmark under direction of Ezra Claytan Daniels, and all built using Panoply. Visit opertoon.com this Monday August 15 for the launch, with a new comic added each weekday!

 

// VISIONS_1 // Born digital short horror comics from students in Denmark, made with Panoply—today's comic: An elderly woman is plagued by painful memories as she succumbs to dementia in “Stage 6”.

 

// VISIONS_1 // Born digital short horror comics from students in Denmark, made with Panoply—today's comic: A young woman’s struggles with depression are embodied by a strange plant in “Mother of Thousands”.

 

// VISIONS_1 // Born digital short horror comics from students in Denmark, made with Panoply—today's comic: A brother and sister become separated while on a treacherous journey through the tundra in “Hypothermia”.

 

This one was a great use of layered(?) panels, and also the conceptual descent with the dropping thermometer… Is this all Panoply, the background and everything? Very cool.