Creative [RELEASED] Panoply: Comics and Splitscreen for Unity

Unfortunately there's no easy way around this at the moment, but it's a good suggestion and the option-drag approach would probably be the best way to tackle it... I'll take a look.

 

Thanks! Maybe this is what I'm used to in other timeline-based programs... being able to duplicate a keyframe and then make whatever adjustments to it rather than having to go through all the parameters to make it the same.

 

I'm seeing an issue with the word balloons we're using. It seems you must be calculating word wrap on a frame-by-frame basis, so while a balloon is moving around, or the frame is resizing, the text starts jittering and some words momentarily jump to a different line. I have a workaround, using hard returns where I want the text to break. That seems to fix it.

I'm not seeing this problem within the Unity editor... only when I make a build, and then only on certain window/resolution sizes.

Known problem? Is there a better solution other than going through all the captions and adding the carriage returns?

I'm still on version 1.1.5.

 

Some of this seems to be tweening between keyframes. For example, if I inadvertently had the angle of the word balloon's stem different in consecutive keyframes, then it's taking a while to settle down.

The other issue tied to this is that the word wrap shown in the Unity editor is different than the wrap when it renders in an executable build.

 

Hmm, I haven't seen this before. What platform are you building for? Can you send a video showing the problem?

 

This is on Mac. I'll email you with a link. At least two of the instances are caused by the tail moving between keyframes.

 

Hi! First of all, congrats for your asset, looks prety interesting. I bought it last week and been playing a bit with it and is great.
My main goal with this is to make interactive comics, nothing related with games, so, here is my question: how can I change the font for the texts? I've touching here and there but got nothing.
I'm absolutely noob with unity so maybe I'm asking nonsense (I hope no).
Thanks in advance.

 

Thank you and thanks for the purchase! To change the caption font, you'll want to edit the Label settings of the GUI Skin which the caption refers to (The GUI Skin is listed right below the caption's keyframes in the inspector). Panoply includes a default skin called CenteredRoundRectCaption which you can edit (you can change many settings with it, not just the font), or you can create your own. Make sure you're editing the settings for the skin's Label, or otherwise you won't see any effect. Hope this helps...

 

Wow! You're my savior! I tried and it worked. I've also been touching many other things to test more possibilities and it's cool.
Thank you!

 

Oh! and thanks for the quick response.

 

Hi! Following up on mosito's question: How could I change the color/font of a caption's text within each speech bubble itself? (i.e. I have a line of text that I want to start out in the color blue, but then a few words in should change to red). Is that possible?
And is it possible to change the font size within the caption itself? Or do we need to make and apply a new guiskin for each font size change?
Thanks in advance!

 

You should be able to include multiple sizes by turning on the Rich Text setting for the skin: https://docs.unity3d.com/Manual/StyledText.html

 

Ah ok, thank you!
And now for a more Panoply-specific question: When I attach an image to a panel via the artwork component, for some reason the attached image seems to duplicate itself, so that even when the panel itself is off-screen, its duplicate image is visible and blocks other panels. Then when the panel moves on screen, the doubled image moves off and the actual image I want visible moves on. Does this explanation lend itself to any visualization? The whole situation is a weird doppelgänger conundrum that I find hard to describe. This problem didn't pop up until after I had worked in Panoply for a while, and now it just won't go away. Any help would be much appreciated!

 

It sounds like the artwork for your various panels is too close together. You can use the Home Position field in the Panel component to set the base position for each panel's camera and artwork so one panel's camera can't "see" another panel's art. By default, each new panel should automatically set its home position to be 50 units to the right of the last, but sometimes other factors can prevent this (or perhaps the artwork is very large!).

 

Have you used Panoply in a project?

I've got a lead on a potential gig for someone with solid Panoply experience—if that might be you, contact me at http://opertoon.com/contact/ with your portfolio and examples of your Panoply work. Thanks!

 

Oh my god, that was exactly it! Thank you so much!! This was a lifesaver.

 

Hi Opertoonist. Please, could you give a hint how to do this? I see in the manual, put has a script to turn on Rich Text, and I don't know where or how to put this...

Thanks.

 

Once you check the Rich Text box on the GUISkin you're using for captions, then you can use markup in the text of the caption as described in the documentation to change its style.

 

Thanks again!!!

 

@opertoonist forget to ask another thing... When use particle effects and 3d assets, doesn't need to use the option artwork of Panoply prefab, but how to use this objects then?? I see for example in the Ascent From Akeron a scene with rain, but the rain effect appears only on specifc panels... I try to create rain with particle effect, but appears in more panels that I wish. Thanks for the help.

 

Basically you want to control the range of your particle system so that it doesn't fall in view of panels that shouldn't see it. By default Panoply places panels 50 units apart on the x axis (the "home position"). You can change this manually if you need more space. If you look at your whole project in the scene view you should be able to tell what's going on.

 

Is there zoom in / out functionality ???

 

Yes, you can set the field of view of each panel's camera in each step.

 

Hi @opertoonist, have I doubt about how to use correctly panels in Panoply. My main target is the mobile, but what is the better way to configure panels, if I wanna put some panels to open in horizontal view of the device and others panels in vertical orientation??? In few lines, my question is if I could implement some panels vertically and others horizontally in the same scene??? thanks

 

It depends on the specific effect you're going for, but in general I'd recommend locking the orientation to whichever mode users will be in most often, and then using artwork rotated 90 degrees for the sections where you want the user to switch orientations. The reason you want to lock orientations is because Panoply's layout engine will base itself on the aspect ratio of the current screen, so when the device goes from landscape to portrait (for example), the layout will change, which probably isn't what you want. Locking the orientation and then using rotated artwork lets you get around that.

 

Hi again,

Does anyone here have experience with exporting to WebGL problems? My project exports to Mac just fine, but when I attempt WebGL, the resultant "run" shows only a grey screen. The corresponding folder also only includes an "index.html" file and "Build" and "TemplateData" folders — no "WebGL" at all. Anybody know why this is happening?

 

Hi @opertoonist,
I have been using Panoply and enjoying it very much. Is there any way to make the graphic novel go back to the beginning after you have passed the last step?

 

Can I make panel of other shapes, no just square?
Like in game Danganronpa

 

You'd need to write a script or use one of the PlayMaker actions to jump back to the beginning once the user reached the last step. If you're familiar with scripting, this example may help.

 

Panoply panels have to be rectangles since they are cameras, but you can cheat a bit by setting a panel camera to have a transparent background and using artwork that's non-rectangular. Obviously there'll be limitations with this (no parallax within the artwork, for example), but depending on your needs it can work.

 

Hi I'm looking to purchase panoply to make a comic that uses a lot of video and wanted to ask a few questions before I get started.

- I will be using a unitys built in video player. To use it you chose to render to the camera near or far clipping plane or a render texture. As a panel is a camera, would I set the video to render to the panel or would a render texture work better?

- I want to use a video for all panels. When a video finishes, I want the next panel to show. I guess this will have to be hooked up manually, how would I do this, call "Panoply Core.IncrementStep()" ? Or something else?

- Also if the user taps during the video playback, I want to video to go and stop on its last frame. Would I set up a listener for "OnTargetStepChanged" or something like that?

- Finally, after several panels, I want to have an intermission to show a pop up or something, what would the best way to do this be? Just load another screen when the global timeline reaches the end?

Thanks!

 

I'd say just render it directly to the camera, that's probably easiest.

That's correct, just call IncrementStep when the video finishes.

That's right, here's an example of how to set up the listener.

You could have the pop up be a separate Unity scene, and just load it automatically when you reach the end of the timeline with the "Next Scene Name" property on the PanoplyScene component. Or, you use the listener above to wait for the final step of the scene and then display the popup (you might also want to turn on the Intercept Interactions flag for all the visible panels so the user can't navigate away).

HTH!

 

Ah cool thanks for all that. I'll give it a go!

 

hi, i recently bought panoply, and after a few experiments it seems pretty much perfect for our project, it's going to save me a load of time, and the results are much nicer than what i would have come up with myself!

i have a few questions about adapting panoply to our needs:

0. first of all, is this the best place to ask questions?

1. is there a way to adjust the gesture rate of Panoply controller on a per frame basis?( i want to have some transitions faster and others slower, in particular, i want both instant image swaps, and slow scrolling)

2. i only want the swipe gesture to work in the horizontal direction, since i need to use the up down gesture for something else what would be the best way to do this.( Could i just comment out a few lines in PanoplyController to make sure lastGesture never gets set to PanoplyGesture.SwipeDown or SwipeUp?)


3. How can i check if an audiotrack is still playing( i want to block gestures untill an audio clip in an audiotrack has finished playing, )


4. what is the recommended way of detecting input events on Captions? (add an input event handler to Caption?)


5.if i want to build my own custom keyframe based event sequencer, like AudioTrack but for my own custom events,(for example setting the gesture rate per frame) where do you recommend i start? ( i could just write a script with a big switch case on PanoplyCore.targetStep and a load of cases for each frame i want a custom event on, but that seems a bit hacky, )


thanks!

 

Thanks for the purchase! To your questions:

Yes!

Yes, by manipulating the gestureRate property of PanoplyController directly in code.

Yes, commenting out those lines should stop the detection of vertical swipes.

Check source.isPlaying on the AudioTrack in question.

Haven’t had to do this before, but I’d suggest modifying/extending the Caption component and checking input event positions against the rect being used to draw the caption label (captions are currently drawn using the old GUI system).

You could go the switch statement route if you don’t have a lot of conditions to trap for, but if you’re wanting a more general purpose editor then you’ll probably want to create a class containing all the state information you want to track for each frame, and then use an array of those classes to drive a custom editor. For Panoply’s keyframe editors there’s an additional layer of abstraction—an array of states and then an array of indexes to those states. You may not need to get that intricate depending on what you’re trying to achieve.

 

thanks for your quick reply! we're making our prototypes at the moment so i need to move pretty fast.

unfortunately it only kinda works, the target step isn't updated but the timeline still moves towards the next step when i drag,
Where are you setting PanoplyCore.interpolatedStep before the gesture is completed??

ok, i'll try that, Using the old deprecated GUI system worries me a bit going forward though, are you planning on using the Canvas based GUI in the future?(what would that look like? attach a Canvas to every panel?)

i think i'll have to start with an ugly switch based solution, untill i'm sure what features i need, then make something better. this seems like it would be a common request for people customising panoply: would you consider providing an example of a custom keyframe based editor in the future?

 

Try moving PanoplyCore.interpolatedStep = Mathf.Lerp... inside the conditional that checks for horizontal movement just above it.

Yes, this is in the works, most likely it'll be a single canvas used to draw all mattes and captions, taking sorting cues from the depth values of each panel. Using Canvas to draw captions also gets you some extra features like specifying the size of rounded corners.

You're actually the first! At the moment I don't see this as a future addition, because (if I'm understanding the request correctly) you'd then have to provide a way to generalize every type of action you might want to trigger on a keyframe, and then you're basically building PlayMaker all over again. Let me know if I'm missing something, though...

 

i surprised i'm the first, i would have expected a lot of people to be working on things like digital comics with puzzle games in them.

Basically what i want to do is use your keyframeManager with its Insert and remove keyframes, and add unity events to be called on specific keyframes like Unity's Event Trigger component.

personally i don't use playmaker, i'm sure its great, but i'd only be using the "Arrive At Step" action. so it seems overkill

i already got this mostly working but i can't insert or remove keyframes, have you got any hints as to how i can reuse your keyframe manager?

attatched is a mockup of the editor gui.

 

Sorry @ewanuno, but I'm afraid I'm not going to be able to help you with this—the keyframe system is fairly complex and wasn't designed to be used by others... you're welcome to give it a shot, but it's not something I'm prepared to support.

 

No problem, i'll work something out.

we've got about 200 scenes in this project, so every workflow refinement helps.

one thing that i could see being useful is the ability to select which properties use keyframe values and which don't (especialy in the artwork caption and artwork components), i'm sure you know what i mean from NLE video editors.

it's also a shame that captions have to be on the Panel object, this makes organising captions difficult when there are many. if i could put them on gameObjects like artwork that would make keeping track of them easier.

i have a question about Matte color for panels: if i want to crossfade from one panel to the next what do i need to do? crossfading from one artwork to the next is no problem, but panels only seems to let me fade to black.


the other stuff is working out ok though:

ignoring vertical swipes is done, i had to filter gestureDelta to remove the vertical swipes.

disabling navigation while audio is playing is done too, i have a script that disables navigation while any audiotrack whose name ends with "WAIT" is playing.

next i will look at adding OnClick to the Captions.



thanks.

 

Glad it's working out for you—I know what you mean about workflow, I'm working on a large Panoply project myself right now. Thanks for the suggestions.

There isn't any real way to fade from one panel to another, is there something preventing you from just fading to new artwork within a panel?

 

that's what i'm doing now, it works , but it's getting messy when i have a scene with just 1 panel full of dozens of captions and audio tracks, some artworks have multiple captions and audiotracks. (see what i mean about wanting to put captions on artwork instead of the panel?) the default transition for this project is crossfade.

i suppose i could create my own scripts that change the properties of a caption or audio component on the panel. and keep them on the artwork object.

 

Gotcha. I wonder if a shader-based solution might work... build in separate panels and modify camera transparency via shader depending on the step?

 

what about Render textures and UI canvas?
Render the camera for each panel into a render texture, put each panel in a UI raw image in a UI canvas and fade them with a canvas group.

 

It's a good idea, but when I tried it the performance hit was too great for lots of panels.

 

Hi, I have a suggestion for Panoply 2.0…
Would be amazing to be able to send a panel to a position top/left and size width/height.

I have an idea for a comic that is navigated left/right (as locations) instead of linear time… The problem is transitioning out of a linear Panoply scene, for example: on panel 6 (of 10) the player can navigate "up" a ladder by transitioning to another Panoply scene. I could make the transition almost seamless by sending the current panel "below" the screen, then load the new scene at an arbitrary panel (3 of 7) by moving the new scene's panel down from "above" the screen… sort of infinite canvas style.

Being able to control panel position/width at runtime would solve probably all branching narrative issues.

 

Thanks for the suggestion—I think you're on the right track. FYI I recently prototyped a way to do branching in the current version by using a script to jump instantaneously from from one point on the timeline to another in response to user input. The jump points were identical in terms of layout, but in the subsequent step the panels might move in different directions. This could potentially work for your idea if you temporarily disabled Panoply's default navigation and then waited for a frame after the user gesture begins to see which direction they were moving, then instantaneously jumped to the correct matching frame depending on whether they were swiping up or left. Complex structures would get labor-intensive, but for simple things it might be doable. Fully programmatic layout is the next step, definitely...

 

Oh wow! I'll try that now.

I was trying to transition in the gutter – it didn't occur to me to transition with the frame(s) showing. That might actually be seamless.

 

Hmmm. @opertoonist
Is there a way to open a scene on a specific frame?

 

You'd have to do it by script. In my test everything was in the same scene, so wasn't an issue...