Black lines on top and bottom of exported gif

Hi Wick-team!

Just a quick bug to report: if you export a animated GIF with tweens, you get black lines on the top and bottom of the GiF. @Hamzah_Alani experimented a bit, and found out the zoom-level seems to have something to do with it:

Is this indeed a bug, or did I do something wrong?

regards,

Paul

1 Like

I’ll review this today! It may have to do with some updates we made to the image renderer. Would you be able to check if this happens on your devices when you export an image sequence?

Thanks!

1 Like

Hi @Luxapodular,

yeah, sure, I’d love to test. I’m working on an animation in wick as we, huh, speak? :slight_smile:

regards, and thanks for your efforts,

Paul

2 Likes

Hello.
I’m still having these problems with annoying lines around exported gifs.
Is there a way to avoid this issue or a work around?

Thanks in advance.

1 Like

Hi,

I have not found a way around this :-(
I’ve been trying to for some time now. It has to do (I think) with something Wick writes in the canvas behind the actual animation. If I strech the canvas heigher. it will be all black behind the actual animation. @Hamzah_Alani of @Luxapodular: can you confirm this? Is there something/color behind on the canvas?
If this could be the background-color of the animation, for instance, I think this problem is solved?

regards,

Paul

well why does my animation has no black lines

Hi @Youyou,

I’m not certain either, but sometimes they do, sometimes they do not.
If I export the wick as HTML and then play it in a iFrame, I can see that “a background” in the canvas it black. I was just stating that this might be the same problem. (Ie: something is black behind the actual background of the animation.)

regards,

Paul

Hi everybody,

I feel I’m only scratching the surface of wick; I’m (still) not using it fully. I’ve been trying to search all the documentation about vcam, but I\m still not certain what I can do with it.

The reason I write that, is that I have fount a solution for the black bars. As I stated before, when you play a Wick in a iFrame (using exported as HTML) you get black rectangles/bars when the iFrame not exactly matches the size of the wick. That is very anoying. And I think those are the same black as you see with the exported GIFs.

I felt I should be able to at least find where that black is being written in the sourcecode of Wick - and I did :smiley: (GTW: the code of Wick is very well written - compliments to the authors!)
In the JS code there is this passage:

_deserialize(data) {
super._deserialize(data);

this.name = data.name;
this.width = data.width;
this.height = data.height;
this.framerate = data.framerate;
this.backgroundColor = new Wick.Color(data.backgroundColor);
this._focus = data.focus;
this._hideCursor = false;
this._muted = false;
this._renderBlackBars = true;
this._hitTestOptions = this.getDefaultHitTestOptions(); 

this.rotation = 0;
} 

If you change the line this._renderBlackBars = true; to this._renderBlackBars = false; the problem is gone!
I’ve changed this code in my local copy I use to play Wicks, and this indeed removes the black bars. Black lines/rectangles are gone!

I’m not certain, though, what this is for / how I could achieve this from within Wick. Also, I don’t know how to throw this switch to prevent the black bars in the GIFS, but I am quite certain this is the same problem!

Can any author of wick chime in (@Hamzah_Alani / @Luxapodular ), and let me know if I am right / how to do this properly?

regards,

Paul

3 Likes

Not sure what you mean (I’m not an author of Wick, but rather just a member of the forums) but I’ll see what I can do to help

The black bars are meant to help with resizing the project in html version. Example:

Try placing this code in the default script:

this.project.renderBlackBars=false;

Then export your project as html to notice the difference

You can run code in gif’s (but code that has to do with timeline, for example, “stop();” or “gotoAndPlay(),” doesn’t work).

However, this code (this.project.renderBlackBars=false) doesn’t seem to work either. Maybe because “this.project.renderBlackBars” is already set by Wick

So, I dived in the code to see where this is already set by Wick. It might have to do with the generating image sequence function (but I’m not sure)


renderBlackBars is set to true when generating the image sequence… meanwhile the comment next to it says “Turn off black bars (removes black lines).” Off means false, but it’s set to true. Is this what’s causing this bug? Or am I reading something wrong?

Hi @Hamzah_Alani,

thank you for replying. I thought you where one of the authors too; you seem to know a great deal more than me, anyway :slight_smile:

I think this is causing this bug, indeed.
The main point, however, is that I am not getting the point of the black bars at all.
I know they show up when you resize the project in HTML - but I think it is very ugly. It would be more logical, I think, to fill the screen with the backgroundcolor of the project, wouldn’t you agree?
I tried this.project.renderBlackBars=false; did not work.
For now, as I said, I just hacked the wick-engine I use in my own project, and that works. So my immediate problem is solved, although not in a sustainable way :smiley:

As I said, I’m quite certain that these bars are the same as the bars showing up when you export a GIF, but I don’t know how to change it.

regards,

Paul

i think it’s these… (this is a screenshot of a 20x20 single-frame gif so you can see it)

hmmm. these are gray. Sure this is not anti-aliasing here?

not sure, but there are definitely bars of some sort.

I’ve seen that “gray” before in the editor.

That gray color is behind the canvas when the background is transparent

You can see this by running this code: this.project.view.canvasBGColor='transparent';
(you might have to click the timeline before the color actually changes)

Results: Same color