Creative [RELEASED] Panoply: Comics and Splitscreen for Unity

Thanks wetcircuit!

Conditional content within each frame will likely work for what I'm thinking on, but I'll sketch things out some more to be sure.

With the Built-in keyframming in mind along with what I've seen in the doc and youtube tutorial it seems like maybe it's possible to to:
Disable some panel at start
Disable page controls
Enable on click events
Have ClickEventA enable pannel 1224
Have ClickEventB enable pannel 1225
Enable page controls
Transition to appropriate panel

That's probably overcomplicating and oversimplifying some things though.

I'm sure conditional content as you mentioned will fill and of my dynamic interests and I can always, as you mentioned, transion to and from panels if needed.

Panoply’s panel animations are definitely of high interest to me though, so I'll likely just need to pick it up and experiement with things first hand.

Thanks again for the super informative reply!

 

@TomaTantrum It depends on the kind of branching you want to do. If you're talking large-scale branches that make sense to split into separate scenes (which are themselves linear), then Panoply can still work well. If you're talking conversation-level branches, for example, then Panoply wouldn't be as good of a fit because at heart it runs off of a linear timeline and you'd be fighting the design of the tool pretty hard to have every interaction be a branch.

[UPDATE] Posted this before I saw @wetcircuit 's reply—very thoughtful analysis, let me know if you have any additional questions!

 

Thank you, @opertoonist. you and @wetcircuit have been super helpful. I'm just getting started with Panoply, but I'll be back with any progress or questions once I get more comfortable with the tools.

 

Hello again.

I have been working through the documentation and integrating Panoply code with my own.
I am currently having trouble with when a user goes back in the story. I have tried a few different things.
I was able to use DecrementStep in the Core script to log when a user moved back, by only if they used the keyboard.

I saw in the Playmaker section there were a few items, such as this, that look pretty clear.
Am I overlooking something, or are some actions only available through Playmaker?

 

@TomaTantrum You're correct that the mouse/touch input doesn't call DecrementStep. A more reliable way to detect a backwards step would be to add a listener to OnTargetStepChanged and then see if the new target step is lower than the old (see PanoplyEventManager in the docs). Here's an example:

Code (CSharp):

1. void Start () {
2.     PanoplyEventManager.OnTargetStepChanged += HandleTargetStepChanged;
3. }
4.  
5. public void HandleTargetStepChanged( int oldStep, int newStep ) {
6.     if (newStep < oldStep) {
7.         // user stepped backwards
8.     }
9. }

 

I went through a few things but was honestly nowhere near this solution. Thank you very much.

I haven't done too much with Panoply yet, but I'm enjoying working with it so far.

I'll give the backstep tracking a another run this evening with the help of your sample code. That should really get the ball rolling on what I'm looking to do.

Thanks, again!

Edit Update: This worked perfectly!

 

Hi everyone. I'm using Panoply with some video (MP4), but I'm still don't figure out how to implement some code that controls the video player of Unity (play etc) in conjunction with what panel are in the screen from user choice... With someone could help me with a code, for example, I'll be too gladly thankful...

My bests

Seth

 

Hi @unity_fPHZtGC0l2r-sQ, actually if you look a few posts above you'll see the answer—just ignore lines 6-8 and add your own code that controls video playback based on the value of newStep.

 

Thank you Opertoon, I'll try. Seth

 

Hi

Opertoon. I tried what you suggest, but keep giving me errors... Would you mind look at for me? thank you

using Opertoon.Panoply;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

void Start()
{
PanoplyEventManager.OnTargetStepChanged += HandleTargetStepChanged;
}

public void HandleTargetStepChanged(int oldStep, int newStep)
{
if (newStep < oldStep)
{

void Play();


// user stepped backwards
}
}

 

@unity_fPHZtGC0l2r-sQ The play command you posted is incorrect C# syntax—figuring that out is beyond the scope of what I can help you with (it depends on the approach you're using to play video), but the basic form of the code would be something like this:

Code (CSharp):

1. void Start () {
2.     PanoplyEventManager.OnTargetStepChanged += HandleTargetStepChanged;
3. }
4. public void HandleTargetStepChanged( int oldStep, int newStep ) {
5.     if (newStep == videoTriggerStep) {
6.         // start the video playing
7.     }
8. }

 

@unity_fPHZtGC0l2r-sQ Can you post a screenshot of the error? There is no Unity version 7 (maybe 2017?) and the latest version of Panoply requires Unity 5.6.0, so I'm not sure what you're seeing...

 

Just got Panoply and got it up and running in an hour..... great stuff.
Is there an easy way to fade all panels on / off ? I'm using Panoply to tell the story in between levels and need to have a nice transition.
Thanks.

 

Thanks @eyalerezfx — no, there is no global fade, you'll need to do each panel's mask individually (or make one big transparent panel that covers the whole screen and then fade the mask on that).

 

We just purchased your asset Panoply from the Unity Asset store after viewing the Ascent from Akeron motion comic. We are thinking about using Panoply as our main story telling tool in our game and had a few questions about how certain effects where accomplished in Ascent Prologue.

I know of several ways to accomplish these with camera effects but would prefer to know what standard method was used with Panoply in Ascent.

A) A moving rat in panel number 1.

B) There is a rolling fog in several of the shots starting with panel 2. Some of the fog is on the top layer suggesting a camera effect but I see sometimes the fog is behind the subject.

C) The screen shake when the cart hits the object wedged into the ground in panel 3.

D) The moving paper on the ground in panels 16.

E) Sweat Droplets in panel 21.

F) There is rain in several of the shots starting with panel 22.

G) The eye movement in panel 22.

Sorry for all of the questions but knowing how these will work can greatly help us to determine if we can (with our resources) get our story accross using Panoply.

Thank you for your help!

 

Thanks for your purchase @maidengaming — here are answers to your questions:

A, D, E, G: Sprite animation
B: Particle effect
C: PlayMaker effect
F: Texture offset animation

 

Thanks for the verification!

Thanks for the verification!

 

Hi,
thanks for the great asset. I'm trying to add some empty keyframes to the timeline in runtime. Can you tell me if there are any built in functions that may help me with this?
Thanks.

 

Interesting... no, there's nothing officially supported that will help you here. The Panel component has two public methods, SetCurrentState and PushState, that take an enum describing which timeline you want to affect (frame, camera, or passive motion) and the id of a state object contained in the Panel's list of states (a FrameState in the case of a panel frame) and add it to the timeline. However, these methods aren't currently used, so YMMV...

 

Hi. Based in the suggestions from the question of maidengaming (up here), I tried to implement Particle Effect in a artwork in a Panel, but I can't see the particle working... any suggestions?

 

When in Play mode, can you confirm in the Scene view that the particle system is working? If not, then it sounds like an issue unrelated to Panoply. FYI I wouldn't recommend attaching an Artwork component to the particle system, just place it manually so it's visible to the panel camera.

 

I remake the particle in the scene and works Ok. Opertoonist, don't you have any full course of the using of Panoply, like in the Udemy platform, helps a lot for users like me, how knows basics of Unity, but many functions still remain unclear... thanks for the help.

 

Opertoonist, still something not working well... I place the particle system, but it appears in all my panels, and I wish to specify the panel where the particle appears. Please, any suggestion?

 

Each of your panel cameras should be getting automatically placed at a different position in 3D space to prevent each panel camera from seeing the artwork for the other panels. It could be that this is not actually the case and that the cameras are close together, or that the particles are positioned in such a way that more than one camera can see them. Check the scene view to see where exactly the particles are placed in relation to each of the panel cameras, and see if you can troubleshoot that way.

 

Hi Opertoonist. I could make work fine, my particles were very close to others panels, move then out and all works as should be. Excuse me asking one more thing, as you show in the sample video of Panoply, to create the Parallax effect, just moving the Z axis of each artwork it's enough; but I wanna know what is the best size each artwork must have for import, because when I move the Z axis, object appears bigger or smaller than it is, and I don't figure out the best import size for the image to manipulate the Z axis correctly. Thank you

 

There's no one right answer for artwork sizing, but the "maintain scale" feature of the Artwork component will keep sprites the same size no matter where you move them on the Z axis—check page 13 of the documentation for more details: http://opertoon.com/downloads/panoply/PanoplyManual.pdf

 

Hi Opertoonist.
First of all thank you for this asset!
The possibilities are endless.
But i Seem to have some problems with making Panels on top of each other like the example here.

In the Manual it says


BUT I'm a HUGE noob in Unity and I'm fiddling with the Z position of the pannel

But it's not having any effect when i press play.

And nothing i do seems to be doing any effect. Except when I try to go back and forth and it kinda glitches in front.
(Oh and the pannel itself insists on having the blue background..)

So basicly that's my question. How do i fix this? To be able to put images on top of the pannels, be them speech baloons, objects or whatever.

BIG thank you for the asset and your patience with noobs like me!

Cheers

 

@GRMworks OK, so there's two issues going on here. Since a panel is really a Unity camera, it's always going to have a rectangular border that crops its contents. If you simply want to have one panel appear on top of another, then that's where you'd set the Depth value like it says in the docs. You can find this in the Camera component (it'll be above the Panel component in the inspector, and may be collapsed). That Camera component is also where you can set the color of the background, or tell the camera to render with no background at all (by setting Clear Flags to Depth).

Looking at your example, though, you'll need a different solution, because you actually want to create the illusion that the artwork from the panel is busting out of the panel borders (which, because of the camera cropping mentioned above, is technically "impossible").

If you don't need parallax, the simplest solution would be to create a panel with a transparent background and just put the entire piece of flattened artwork—character, background, and dialogue bubbles—inside it, and just let it overlap the other panels. Again, you'd need to put that panel on top of the others by increasing its Depth value, and make its background transparent by setting its Clear Flags to Depth.

If you do need parallax, then the more complex solution would be to compose the original panel as you have, but containing only the elements which should be cropped by the panel borders. Then, create a second panel on top of the first, with a transparent background, and put in it only the elements that need to overlap the panel borders.

Hopefully this is helpful, let me know if you have further questions!

 

Yes @opertoonist that was clear.
As soon as i get back from lunch i’m gonna check the camera component that you mentioned!
Huge fan of this, like i said, the opportunities are endles.
(Most probably i’ll have more questions and i’ll come back )

 

@opertoonist I have a question about wwhich way manage the panels to when the user reads no matters the orientation... I don't know if this is something the Unity regulate or there is something need to be done when creating the panels. thanks

Ps.: What I mean is how to make the panels responsive in Panoply???

 

Technically you don't need to do anything, as Panoply will update the layout automatically if the orientation changes. In practice, however, it usually doesn't make sense to try and handle portrait and landscape with the same panel layouts—it often doesn't look very good and you end up making too many compromises. You might consider if this is something that's really worth supporting given the extra work involved. If you do go ahead, I'd recommend making the orientation a preference in your app, creating separate scenes for portrait and landscape, and then loading the appropriate scene based on the preference.

 

Thanks for the help Opertoonist. But, if you don't mind, could you give me some directions about two things you've done in Upgrade Soul app, first the floating menu on top when reading the comic, is this MENU UI only? And second, you implement inside the comic for download the other chapters. Please any hint on this I'll be grateful. I look over the forum and online to create something like this but don't see how to do it... thanks anyway.

 

In Upgrade Soul, the thumbnail menu was done using the legacy UI system—this is currently the only way to superimpose UI over Panoply panels, as Panoply uses the legacy UI system for mattes. I am working on an update to remedy this by rendering Panoply into the current Unity GUI system with render textures, and another update to add a thumbnail menu which can be configured from within Panoply, but I don't have an ETA on those updates as of yet. As for the downloadable chapters, unfortunately I can't help you there—this isn't part of Panoply, and Upgrade Soul was done long enough ago that I believe the preferred method for downloadable assets has changed. That solution was also integrated with Apple's IAP system, and there are more generalized solutions now.

 

Thank you Opertoonist

 

Hello there @opertoonist ! I am having a little bit of a problem when I was working and I have no idea what went wrong and how to fix it. Please bear in mind that I am very new at unity

I was adding new panels and artwork, and every time I added something I always tested it out first before adding a new panel. The parallaxing effect was working fine, until at some point I was adding new panels and when I tested it out, it wasn't working. Not only the new panels were affected, but also the ones from before (that were working fine) stopped having the parallax effect. I must've have accidentally mis-clicked something that caused it that way.

I have already opened the panoply manual for answers but I believe I am stuck. I already made sure that the "passive input" check-box is checked at the panoply inspector, and I checked every single one of my panels for its passive motion inputs and nothing is out of the ordinary. It still won't have that parallax effect when I click play. If anyone has encountered the same problem and knows how to fix it, please tell me
Thank you in advance ! Btw, this asset is great !

 

Hi Opertoonist. I've had I funny question. I build some comic to play in Html (Webgl) and works fine to me, but I realized effects for parallax (like gyroscope, accelerometer) not work when running the page in a mobile - I know webgl still not officially supported, but works fine so far to me - only in Pc from mouse movement. Could you give me some hint on this? thanks a lot.

 

[SOLVED]
Hi @opertoonist . I'm having a similar issue to what @southwestperson is describing in is post. The parallax used to work fine but now just stopped working in any new panel I create. I've tried with different passive motion settings as well as Z coordinates but some of the panels will just not move.

Thanks in advance! Other than that I love Panolply!

Update - I figured what was the difference between the panels with and without passive motion. Apparently the sprite timeline keys affect the motion of the panel, to ensure that the camera is tilting as expected you need to key the artwork at the step when it is being displayed. I'm not sure if this is by design but it seems to be the way panoply manages passive motion.

 

Thanks @unity_vJs_xrx4oihPOw for posting this workaround, I will investigate to see if I can reproduce the issue (and apologies @southwestperson for not getting back to you sooner—for some reason I stopped receiving notifications from this thread).

 

Sorry for taking so long to reply to you, for some reason I stopped receiving notifications from this thread. Accelerometer effects should work on mobile, what OS are you targeting? Check this post for a possible workaround to your issue—I will investigate further.

 

@unity_vJs_xrx4oihPOw I'm able to duplicate the issue you're seeing in the case where the artwork is a child of the panel—which makes sense, since the artwork would be moving along with the panel, nullifying the passive motion effect. Simply moving the artwork so it's not a child of a panel fixes the issue. Let me know if this sheds any light for you (not sure if I'd consider this a bug, but at least worth a mention in the docs). @southwestperson this may be relevant to you as well.

 

Thanks opertoonist, that was it. I've just noticed some other odd behaviour in the nested artwork scenario (camera ignoring a keyed step) which started working fine once I unparented the artwork, so I'll keep it in mind when setting up a scene.

 

Hello @opertoonist

first and foremost: Your asset looks great. I am leaning towards an order, but have 2 questions in mind. Right now you either switch the panels via mouse or via keyboard. For my case panoply would be used to handle storytelling, cutscenes and so on.

I support gamepads in my game. Is there an easy way to support gamepads to use them for panelswitching etc?

Since it is able to handle cutscenes,intros can you point me to the place in the docs where the actual logic is explained? Like how to start and end comics, trigger them, move on to next scenes etc.

Thanks in advance!

Best,

Dominik

 

Hi @misanthropowitsch, thanks—in order to support gamepads you'd most likely want to call PanoplyCore.IncrementStep() (see page 39 in the docs) on your button presses, this will cause Panoply to lerp towards the next step. If you want more fine-grained control, you could also call PanoplyCore.SetInterpolatedStep() every frame, probably in LateUpdate to override Panoply's own interpolation. Hope this helps—let me know if you have more questions.

 

Hi @opertoonist. I had some doubt about your playmakeractions script. I try to use the "arrive at step" function to make some animation play, but if I put the step moment to begin the animation "1", doesn't work, because the first panel movement is automatically; the arrive only works when the user interacts to the step... That is a way to make the scene as I wanna? Thanks!!!

 

I'm not sure if there's a way to do this with PlayMaker. You could write a script, however, that watches PanoplyCore.targetStep and triggers the animation when it becomes 1. You can also disable the auto-advance by unchecking "Advance on Start" in the PanoplyScene component of the Panoply prefab. Hope this helps...

 

Thanks for the help, I'll try create a script...

 

Hello there! First of all, I've bought Panoly a couple of days ago and i just LOVE it. It really fits the graphic novel style we are looking for, and we are looking forward to use it in our upcoming game!!

I have two questions, though.

The first one is really simple: when maidengaming asked for some info about the Ascent Prologue features in some panels,you answered:

When you refer to sprite animation, do you mean "using unity's built-in Animator + animations" or another completely different thing? If it is the animator, how do you "trigger" the animations? With custom scripts inside the sprites that listens to the panoply steps and trigger parameters in the animator, or a simpler way? We are trying to achieve the same effect and would love to be efficient about that

The second one: I've trying to instantiate panoply GameObjects at runtime to no avail. I am using 2018.3.2f1 (new prefab system).

The problem is this:
1 - Created a panoply comic and tested it working.
2- Create a "container GameObject" with all the comic inside (panels, artwork...).
3 - Create a prefab for that container.
4 - Try to instantiate the prefab at runtime.

I always get this error for every artwork in the scene:

[Exception] [UnityEngine.Material.] [ctor] [5.503] ArgumentNullException: Value cannot be null.
Parameter name: source

In Artwork.cs in line 61, which is line 8 of the following code, in which the code try to create a new material from the sharedMaterial of the Renderer, but the sharedMaterial is NULL whenever it reaches it:

Code (CSharp):

1.  
2. private ArtworkState lastScaledState;
3.  
4.     public void Start()
5.     {
6.       spriteRenderer = gameObject.GetComponent<SpriteRenderer>();
7.  
8.       tempMaterial = new Material(transform.GetComponent<Renderer>().sharedMaterial);
9.       GetComponent<Renderer>().sharedMaterial = tempMaterial;
10.  
11.       if (maintainScale)
12.       {
13.         MaintainScaleForZ();
14.       }
15.  
16.     }

The result is that I get the "pink shader" effect in every artwork

If I try to Instantiate a GameObject that is INSIDE the current scene it doesn't trigger the error (ie duplicate a working comic). But whenever I create a prefab and try to instantiate it, there is that error.

What can I do? How can I instantiate a pre-saved Comic?

I really need this because we are building a roguelike and the rooms and the events (which trigger these comics) are randomly generated.

Thanks a lot!!!

 

Well, let me answer myself.

For now, the problem I see is that (don't know why) the SpriteRenderer component in the GameObject that also had the Artwork script was NULLED when created the prefab... weirdly enough.

The workaround was simple: check at start if the SpriteRenderer.sharedMaterial was null, and applying the default sprite material:

Artwork.cs
Line 57:

Code (CSharp):

1. public void Start()
2.     {
3.       spriteRenderer = gameObject.GetComponent<SpriteRenderer>();
4.  
5.       if (spriteRenderer.sharedMaterial == null)
6.       {
7.         spriteRenderer.sharedMaterial = new Material(Shader.Find("Sprites/Default"));
8.       }
9.  
10.       tempMaterial = new Material(transform.GetComponent<Renderer>().sharedMaterial);
11.  
12.       GetComponent<Renderer>().sharedMaterial = tempMaterial;
13.  
14.       if (maintainScale)
15.       {
16.         MaintainScaleForZ();
17.       }
18.  
19.     }

Dunno if anyone has got the same error, but I wanted to share my 'solution'

Still needing the first answer

 

Glad you found a solution! To answer your first question, yes, I was referring to Unity animations, and yes, you would need to listen for Panoply steps and then trigger your animations accordingly.

 

Maybe I'm missing this, but is there a way to duplicate or copy a keyframe? If I want to change the values of the very first keyframe (e.g., for captions) to match a setting/adjustment I made for later one, the only solution I've found so far is to go into each parameter, copy it, and paste it in the same box in the first keyframe's parameters. Seems there should be a faster way to do this.

For example, on Mac, right-click on a keyframe and copy all its values and the paste them into the values of a different keyframe. Or option-drag a keyframe to make a duplicate of it. Any suggestions?