Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StageGL antialias invalid. If scale!= 1 or rotation!=0.This bug will appear #1082

Open
ajex-china opened this issue Apr 30, 2024 · 5 comments

Comments

@ajex-china
Copy link

ajex-china commented Apr 30, 2024

StageGL antialias invalid. If scale!= 1 or rotation!=0.This bug will appear

var stage = new createjs.StageGL(canvas,{"antialias":true});
bug

@ajex-china ajex-china changed the title use stageGL, StageGL antialias invalid. If scale= 1.This bug will appear Apr 30, 2024
@ajex-china ajex-china changed the title StageGL antialias invalid. If scale= 1.This bug will appear [Bug]StageGL antialias invalid. If scale= 1.This bug will appear Apr 30, 2024
@ajex-china ajex-china changed the title [Bug]StageGL antialias invalid. If scale= 1.This bug will appear StageGL antialias invalid. If scale= 1.This bug will appear Apr 30, 2024
@ajex-china ajex-china changed the title StageGL antialias invalid. If scale= 1.This bug will appear StageGL antialias invalid. If scale!= 1 or rotation!=0.This bug will appear May 6, 2024
@danzen
Copy link
Contributor

danzen commented Sep 10, 2024

Okay - I do not know too much about StageGL - been through it - quite complicated. But can you clarify when or where you are setting scale or rotation? Are you saying

const stage = new createjs.StageGL(canvas,{"antialias":true});
stage.scale = 2;
// or
stage.rotation = 30;

will break the anti-aliasing or cause an error? I could not seem to make that happen.

@ajex-china
Copy link
Author

ajex-china commented Dec 10, 2024

you can try:

let canvas = document.getElementById('canvas')
// let stage = new createjs.Stage(canvas);
let stage = new createjs.StageGL(canvas, {antialias:true});
stage.setClearColor('#d1f1ff')
createjs.Ticker.timingMode = createjs.Ticker.RAF
createjs.Ticker.addEventListener("tick", stage);
let shape1,shape2,container
container = new createjs.Container()
stage.addChild(container)
shape1 = new createjs.Shape()
shape2 = new createjs.Shape()
shape1.graphics.beginFill('#52a3fc').drawCircle(0,0,30).endFill()
shape2.graphics.beginFill('#52a3fc').drawCircle(0,0,30).endFill()
shape1.cache(-30,-30,60,60)
shape2.cache(-30,-30,60,60)
shape1.scaleX = 0.8
shape1.scaleY = 0.8
shape1.x = 100
shape1.y = 100
shape2.x = 200
shape2.y = 100
container.addChild(shape1,shape2)

@danzen
Copy link
Contributor

danzen commented Dec 11, 2024

I am not seeing an error with that code. I tried our version of CreateJS, the CDNjs version and CreateJS CDN - here is my test file: https://zimjs.com/test8/stagegl.html

@DarkMatters
Copy link

the rendering of the scaled shape is definitely pixelated and not anti-aliased

image

@danzen
Copy link
Contributor

danzen commented Dec 11, 2024

Oh - so sorry - misread the post. I thought you were getting an error code.

Yes - I see what you mean. It seems to be fixed when the scale is added to the cache (I switched the scale to 1.8 but setting both to .8 is also good):

shape1.cache(-30,-30,60,60,1.8)
shape2.cache(-30,-30,60,60)
shape1.scaleX = 1.8
shape1.scaleY = 1.8

image

Does anyone know a reason why this would be happening? I do not really know anything about gpu coding.

I actually can't see a difference between {antialias:true} and {antialias:false} can you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants