Creative [RELEASED] Panoply: Comics and Splitscreen for Unity

I think I can see my problem. The captions are not actually floating in at all, they're fixed at their correct screen position. BUT, the screen transiitions behind them, making it appear as if they're floating in (as with the dialogue in the sample scene). And yet, going through some of the links to other comics, I can see some instances where dialogue floats in but also some instances where it clearly sticks to the screen, so there's obviously something I'm missing... But what?

 

Could you make a screen capture of what you're seeing and DM me here with it (or contact me here)?

 

I was setting up a small test scene to demonstrate the issue, so I could take a screen capture, and while I was doing that I think I've discovered what my problem was

Dialogue appears to float in (as in the spaceship example scene) if the dialogue is set to appear on the same frame as when the image first appears. If you let the image appear on one frame, and then make the dialogue appear on the next frame (when the user swipes right), then the dialogue appears on screen already fixed at its correct place

Now that I know that, I'll be able to go back over the chapters I've set up so far and fix them


Sorry, should have probably been able to work that out a lot sooner, but my brain's not as spry as it used to be (and it was never that spry to begin with...)

 

Hi.

Sometime ago, I had some questions with how to use Panoply. I have some new questions :

1) how can I present a panel full screen that goes off the bottom of the device screen and extends to the screen edges. The panel should be anchored to the top center of the device screen with the lower portion of the panel going off screen. Panoply is being used with iOS, Android for phones and tablet devices with the multiple display resolutions and different aspect ratios.

2) then after a delay, the panel pans up to reveal the lower portion of the image. Does this require moving the panel or animating the panoply camera?

Say the image is 4000 x 600
- first you see the top 2000 x 300 portion
- then the image scrolls up to show the lower 2000 x 300

Or would this have to be done using multiple panels?

 

You would move the position of the panel's camera from one keyframe to the next.

 

I see; I did the following which seems to work.

But now, I am having a new issue:

- I set the settings to advance on start



- I am not sure how to set the matte color value to do a fade in.



What we want to see is the panel fade into view after the scene starts up. We are just seeing a black screen. I added code to see what step is being played; it is reporting that Panoply has advanced to step 1.

Code (CSharp):

1.         public void HandleTargetStepChanged(int oldStep, int newStep)
2.         {
3.             // do something in response
4.             Debug.Log($"Panoply step {newStep}");
5.         }

Here is some additional debug from running the scene on an iPhone:

UnloadTime: 0.965458 ms

ArgumentNullException: Value cannot be null.

Parameter name: shader

at Opertoon.Panoply.PanelEffects.Awake () [0x00000] in <00000000000000000000000000000000>:0

Does this require using URP? The project is not currently set up to use a render pipeline.

 

No, URP is not required for a fade in. Have you set the matte to be black with 100% alpha in step 0, and black with 0% alpha in step 1?

 

HI. no I had not set multiple steps with different matte values. That is probably it. The advance on start did start working but I had to rebuild the panels and delete the previous work and start over. Was some internal data corrupt possibly?

 

Not sure; based on what you posted it seems possible that it was working, but didn't seem like it was because the matte hadn't changed.

 

Hello I am a newbie around here. Hope to learn and deploy own Graphic novels shortly.

Some issues with Input System, need to get the Panopoly to work on Mobile devices and browsers, just want to make sure I find my around the code fast.

No issues with advanced C# coding, just the time is limited to ship some samples to our clients.

Thank you

Dara

 

I uncommented some useful code in

public class PanoplyController

so at least captured the keyboard events and possibly some Touch functionality to work for an Android build.

I will add some buttons and see if I could actually run the demo on an Android phone.

 

Stole some code from PanoplyController and attach these methods to buttons for Android. And only the Right click works, Left Click does exactly the right click and up and down do nothing.

So there is a state some place I missed from PanoplyController.



using UnityEngine;



namespace Opertoon.Panoply
{

public class CCNBUTTON : MonoBehaviour



{
// Start is called before the first frame update
void Start()
{

}


public void OnClickleft()
{

Debug.Log("Button Click left!!!!!!");

PanoplyCore.DecrementStep(false);
}


public void OnClickright()
{


Debug.Log("Button Click right !!!!!!");
PanoplyCore.IncrementStep(false);
}

public void OnClickup()
{

Debug.Log("Button Click up!!!!!!");

if (Application.isEditor)
{
PanoplyCore.GoToFirstStep();
}
}

public void OnClickdown()
{

Debug.Log("Button Click down!!!!");

if (Application.isEditor)
{
PanoplyCore.GoToLastStep();
}

}

}

}

 

I think I fixed up a trivial Input System which is based upon the new Unity Input system.

I will build for Android and iOS and test today.

Dara

 

Hey , Thanks for your amazing effort on panoply. its really great tool and I'm enjoying it .after creating my own test scene I wanted to test some internal function of PanoplyCore so what I did was creating 2 button in canvas for swiping right and left base on buttons to see how its going I registered button on click event to
PanoplyCore.IncrementStep(); and PanoplyCore.DecrementStep();
but it didn't work at all.
So I tried another thing
:

Code (CSharp):

1.  
2.     public void Next()
3.     {
4.         var step =PanoplyCore.interpolatedStep;
5.         PanoplyCore.SetInterpolatedStep(Mathf.RoundToInt(step + 1f));
6.     }
7.  
8.     public void Previous()
9.     {
10.         var step =PanoplyCore.interpolatedStep;
11.         PanoplyCore.SetInterpolatedStep(Mathf.RoundToInt(step - 1f));
12.     }

its kina work but the swipe is instant and not interpolated .
I Tried another method :

Code (CSharp):

1.  
2.     public void Next()
3.     {
4.         var step =PanoplyCore.interpolatedStep;
5.         PanoplyCore.SetTargetStep(Mathf.RoundToInt(step + 1f));
6.     }
7.  
8.     public void Previous()
9.     {
10.         var step =PanoplyCore.interpolatedStep;
11.         PanoplyCore.SetTargetStep(Mathf.RoundToInt(step - 1f));
12.     }

Here is interesting part
When I'm in full screen play mode and I'm trying the buttons nothing works .. but when I exit from full screen then select the current panel that is showing by panoply from hierarchy and then selecting button the screen is swiped correctly with interpolation (That's exactly what I wanted) after the swiping I will get this error : RenderTexture.Create failed: width & height must be larger than 0
So What should I Do ?

1-Why PanoplyCore.IncrementStep(); and PanoplyCore.DecrementStep(); Doesnt work?
I Looked at the source code and they should work because they work on keyboard input (Left and Right Arrow)

2-Why I'm getting RenderTexture.Create failed: width & height must be larger than 0 error ?
I Got this error randomly before too so it not because of Those Method I Wrote And I Confirm when I'm trying to drag and clarify the position of panel on frames the top value will be -1 ,
Here is Photo
How can solve these issue?

Thanks for your amazing effort I'm looking to get your opinion
Best regards

 

Hi @Fariborzzn,

1. Panoply handles mouse clicks on panels by default, so you may need to check "Intercept interactions" in the panel settings to get your buttons to work.

2. Where is the render texture error occurring (which script)?

 

I Tried to check "Intercept interactions" but it doesn't make buttons work . I look at the source code and found that that Panoply will handle panel swipe with keyboard here :

Code (CSharp):

1.  
2.    if (keyboardInput) {
3.                     if (Input.GetKeyDown ("left")) {
4.                         PanoplyCore.DecrementStep (ignoreStepCount);
5.                     } else if (Input.GetKeyDown ("right")) {
6.                         PanoplyCore.IncrementStep (ignoreStepCount);
7.                     } else if (Input.GetKeyDown ("up")) {
8.                         if (Application.isEditor) {
9.                             PanoplyCore.GoToFirstStep ();
10.                         }
11.                     } else if (Input.GetKeyDown ("down")) {
12.                         if (Application.isEditor) {
13.                             PanoplyCore.GoToLastStep ();
14.                         }
15.                     }
16.                 }

so I just added 2 button to use PanoplyCore.DecrementStep (); and PanoplyCore.IncrementStep (); but it doesn't work . I Used wrapper class to see if OnClick Event will be called and the answer is Yes they will be called.
I Want to have same functionality as pressing arrow keys on keyboards but with buttons.so how can I achieve that?

and about the error this is all the info printed in console
RenderTexture.Create failed: width & height must be larger than 0 UnityEngine.GUIUtility: ProcessEvent (int,intptr,bool&) from my understanding its all related to Editor and as the image I upload the value is actually negative (I Uploaded the image as attachment).

 

@Fariborzzn I'm able to duplicate the button issue -- funny that this hasn't come up before! I'm currently working on an overhaul to the input system that will address this issue, but in the meantime, if you don't need any mouse navigation at all in Panoply you can use this workaround: comment out lines 251-348 of PanoplyController.cs.

On the render texture issue, the negative value you show in your screenshot is not a problem, that's the correct way to position panels offscreen. I believe it has something to do with the custom shader -- can you let me know what version of Unity you're using, and what render pipeline?

 

I'm targeting IOS so what I really want is that my player can swipe the panels with swipe gesture and be able to swipe the panel by clicking on Next and Previous Button. I Leave a image in attachments.

and on render texture issue I'm using unity 2020.0.3f1 on URP

 

@Fariborzzn OK, I'm thinking the solution here is going to be adding a toggle that allows gestures that occur outside of panels to be ignored. Will be included in the next update. Still investigating the render texture issue.

 

Happy to hear that , Let me know if I could help you in this solution or providing more information
Best regards

 

@Fariborzzn Haven't been able to duplicate the render texture issue -- would you be able to share a simple project that reproduces the problem?

 

Sure I tried Repro Wizard Master to make project compressed but it added more error to handle
so I compressed the whole project with win rar and uploaded it to Google Drive .
for safety of Panoply will send you a link in privet conversation.
Here are steps to reproduce the render texture issue :
1-Make sure the active scene is StarWars Scene . You can find the scene in Assets\Scenes Folder.
2-Make sure Maximize On Play is toggled Off In Game Window.
3-Play the scene.
4-Select the intro panel from hierarchy.
5-Swipe the panel to next panel in Game Window .
Console will be filled with
RenderTexture.Create failed: width & height must be larger than 0
UnityEngine.GUIUtility: ProcessEvent (int,intptr,bool&) error .

Let me know if you need more info on this .
Best regards

 

@opertoonist , Would you by any chance be porting this project to output as Html5? My quest is for universal access to digital comics across platforms/devices (ipad/iphone, android, pc, VR headsets)
With rudimentary skills, I'm seeing it might be possible to create such a framework entirely via Html via Google's free Google Web Designer. However, yeah. after seeing the ease of wysiwyg authoring via Panoply, it would be neat to have it all compile to Html (rather than Unity webgl which is iffy on ios devices... so I've heard).

Also on post #403 above by @HCrowley (If you let the image appear on one frame, and then make the dialogue appear on the next frame (when the user swipes right), then the dialogue appears on screen already fixed at its correct place..)

Is it true you can't have dialog bubbles "glued" to a panel when a panel first appears? This rather limits the traditional "comic panel" feel, if it can't be done.

 

Actually it might be an idea, to look at exporting as AFrame which then gets hosted on a simple webserver https://github.com/primaryobjects/unity-to-aframe

 

I have another project called Stepworks that's HTML-based — philosophically it's different from Panoply (2D assets only, no dialogue balloons) but for some use cases it's easier to author with. You can check out the beta here: https://step.works To your question, though, no, I don't have any plans to provide alternate ways of rendering Unity content to a browser.

Dialogue balloons are always positioned with respect to their panel, so I don't believe there's any issue with what you're describing... let me know if you're running into any problems tho.

 

Hello. I buy penoply a day ago and started experimet. Im an Arstist and total noob at Unity. But I figured it out how to use the tool and and im very stisfied with quick results! add panels and make transitions is very easy. Love the tool <3
But I struggle with aditing a custom Button.
How can I make a Button(with custom position) in a panel, that guides the player to specific global timeline frame/number, or to specific scene?(without playmaker)

 

Thanks for the purchase! You'll want to use the "intercept interactions" checkbox for the panel with the button, so that any touches or clicks within the panel will be ignored, instead of being used for navigation. There are different ways to create buttons in Unity depending on what you're wanting to achieve... the UI system is the most obvious one, but if you're wanting the user to click on a specific art asset that can be done as well... I recommend you learn how to create the kind of button you want outside of Panoply first and then try to get it to work in a panel. Check the "Integrating with your own code" section of the manual for details on how to jump to specific steps from a script.

 

Hello Erik!

You say you have support for 3D but I don't see any tutorials covering it? Would my use case even work?

I have a scene in full 3D, I made a city block and I want to have a "comic" set inside that scene, with 3D characters posing around. Each panel would effectively be a different character pose, sometimes in the same background, sometimes a bit away.

Would Panoply work? Or do we have to use a 2D workflow?

 

Yes, this will work. If you're planning to have multiple panels with the same characters you might need to find a solution to have their poses persist. For example, if character A has one pose in panel 1 and another pose in panel 2, and both of those panels are on screen at the same time, you could have two instances of the character in the two poses, one visible only to the panel 1 camera, and another visible only to the panel 2 camera.

 

Apologies if this has been answered, but my search didn't find anything: is it possible to use the captions independent of panels and timeline/steps? I have a 3d scene and I'd like to throw captions and dialogue text onto the screen, but the timing is all controlled externally: is there an easy way for me to get caption/dialogue to display on a regular UI canvas?

I've tried a couple things (dropping the UIText into a canvas, adding the caption script), but it either shows nothing or throws a lot of null pointer exceptions. All help appreciated!

 

Hi @andthenwhat — no, not out of the box. The guts of the UI caption renderer are in UIText.cs, but would need some reworking to be made standalone...

 

Can I ask how I can change the time between frames? It's about making the animation change longer.

 

Hi @ArthurJun , check the Gesture Rate setting in the Panoply Controller component.

 

Panoply 1.7 is out! This version adds support for the new input system, among other things. Get it here...

 

Hi @opertoonist, I just purchased Panolpy and imported into 2020.3, the Panoply prefab seems to be missing a script. I also checked in 2019.4 and am seeing the same thing. Can I just remove that script or is there actually something missing?

 

That's the PlayerInput script — only needed if you're using the new input system. If you leave it as is it shouldn't affect anything, though it is a little inelegant...

 

Hi @opertoonist ! My name is Fernando and I'm hoping to graduate soon using Panoply to make my motion comic. I've gotten pretty far and basically assembled my first page, and I have a decent workflow, but I have a few questions.
1. In my hierarchy of my first page, there's already so many assets (I'm using a fair bit of parrallax scrolling effects) is therea better way to organize my scene? Which leads me to my second question
2. How to I organize scenes utiilizing ponoply? Maybe this is because I'm fresh to unity, but I have zero clue how to go from one scene to the next using panoply.
3. Do I have to worry about the amount of assets/steps I'm using? Is managing scenes a good way to handle it? Does Panoply render all the assets in one scene at once?

 

See what I mean? I'm just worried that trying to make a timeline with what I estimate needs 140 steps (34 pages with about 4-6 panels each) isn't feasible and that I'm pushing Panoply and Unity too far? I figure scenes are a tool to make sure things load right?

 

It's goign well though, I've figured out the little nuances to using Panoply. But if I could just get the answers for scenes and how to export my project I'm positive I can go even faster wtih my workflow with more confidence

 

Hi @unmillondefernandos,

Yes, you should be using scenes to minimize the number of assets in memory at once. The Panoply Scene component on the Panoply prefab lets you set the name of the next and previous scenes. When the user navigates past the end of the last step (or before the first step), the next or previous scene you specify in that component will automatically load.

Hope this helps,
Erik

 

I figured it out! It was a bit difficult to understand what I was doing wrong with the scene manager, but once I figured you can unload scenes and tested it out it was a snap. Thankyou so much!

 

A few more questions, does Panoply have a way of looping a comic? What I want to do is basically have the comic loop, and have a button that gives the option to close the program.

 

@opertoonist Is there a way of ensuring one panel prefab appears above another?

 

It should be possible, but to make it seamless you would need to do some scripting. The basic idea would be to make the first and last two steps identical, and then to use a script to jump from end to beginning and vice versa when the user navigates past the first or last step. You could also try setting the destination scene to be the same as the current scene; haven't tested that myself so I'm not sure if that would work.

You can control panel layering by adjusting the Depth setting of the panel's camera.

 

@opertoonist I've had a issue with some panels breaking and not showing their assets in the player but only when going backwards after having gone through the next scene and going backwards. They work perfectly fine reading straight through going from scene to scene, am I doing something wrong?

 

Hi @unmillionfernandos , haven't seen this issue before — what platform are you building for? Can you share a screen recording? You can reach me via email at http://opertoon.com/contact/

 

Hello @opertoonist and all,
I am in the process of making a game in this style(see video example). I would like to know if it would be possible to do so with this asset? I have tried other splitscreen assets which worked but i was limited by the fact they offered no support from the author.

 

Hi @BurningHeroG , thanks for asking — Panoply includes a lightweight SimplePanel prefab that can be used for dynamic layouts controlled by code, but it supports rectangular panels only.

 

Really awesome asset that is constantly improving over the years.
Is it possible to include video inside of the panels?

 

Thanks. Yes, just use the VideoPlayer component on a plane that's visible to a Panel camera.