开发者

Circle shape clipping with opengl-es in cocos2d

开发者 https://www.devze.com 2023-03-25 05:48 出处:网络
I\'m trying to make a circle shape clipping on a CCSprite in cocos2d, after searching a lot, i tried the open gl glScissor method, i achieve an squared clipping over my sprite. But, i need to make it

I'm trying to make a circle shape clipping on a CCSprite in cocos2d, after searching a lot, i tried the open gl glScissor method, i achieve an squared clipping over my sprite. But, i need to make it a circle, and it seems to be impossible to do with the glScissor. I kept trying and I found something about gl stencil, but I haven't found a how to on this and I'm not familiar with opengl.

Also I heard something about calling multiple times to the glScissor wo you can achieve a custom shape but i haven't found anything.

Thanks in advance, any answer is welcome.

this is my actual visit method:

-(void) visit
{
    glPushM开发者_开发知识库atrix();
    glEnable(GL_SCISSOR_TEST);

    glScissor(clippingRegion.origin.x , clippingRegion.origin.y ,
            clippingRegion.size.width, clippingRegion.size.height);

    [super visit];

    glDisable(GL_SCISSOR_TEST);
    glPopMatrix();

}


glScissor won't do what you want. Here is part of some code I wrote a while ago. It draws a rectangle with a grating texture and uses the stencil buffer to only have a disk visible.

Here is the link I used back then: http://www.swiftless.com/tutorials/opengl/basic_reflection.html

(let ((cnt 0d0))
  (defmethod display ((w window))
    ;; the complex number z represents amplitude and direction
    ;; of the grating constant
    ;; r and psi addresses different points in the back focal plane
    ;; r=0 will result in z=w0. the system is aligned to illuminate
    ;; the center of the back focal plane for z=w0.
    (let* ((w0 (* 540d0 (exp (complex 0d0 (/ pi 4d0)))))
           (r 260d0)
           (psi 270d0)
           (w (* r (exp (complex 0d0 (* psi (/ pi 180d0))))))
           (z (+ w w0)))
      (clear-stencil 0)
      (clear :color-buffer-bit :stencil-buffer-bit)
      (load-identity)
      ;; http://www.swiftless.com/tutorials/
      ;;    opengl/basic_reflection.html
      ;; use stencil buffer to cut a disk out of the grating
      (color-mask :false :false :false :false)
      (depth-mask :false)
      (enable :stencil-test)
      (stencil-func :always 1 #xffffff)
      (stencil-op :replace :replace :replace)

      (draw-disk 100d0 (* .5d0 1920) (*  .5d0 1080))
      ;; center on camera 549,365
      ;; 400 pixels on lcos = 276 pixels on camera (with binning 2)
      (color-mask :true :true :true :true)
      (depth-mask :false)
      (stencil-func :equal 1 #xffffff)
      (stencil-op :keep :keep :keep)

      ;; draw the grating
      (disable :depth-test)
      (with-pushed-matrix 
          (translate (* .5 1920) (*  .5 1080) 0)
        (rotate (* (phase z) 180d0 (/ pi)) 0 0 1)
        (translate (* -.5 1920) (* -.5 1080) 0)
        (draw *bild*))
      (disable :stencil-test)
      (enable :depth-test)

      (fill-grating *grating* (abs z))
      (format t "~a~%" cnt)
      (if (< cnt 360d0)
          (incf cnt 30d0)
          (setf cnt 0d0))
      (update *bild*)
      (swap-buffers)
      (sleep (/ 1d0)) ;; 1 frame per second
      (post-redisplay))))


You will probably need to make a for loop, define some angles and offsets, and perform the Scissor cut in a circle around the sprite to get a circularly shaped clipping field. But only if you are unable to create a circle shape to begin with - that would be much faster in opengl-es.

Edit: Lets say you have a square 1x1 centered on 0,0. That would mean that co-ordinates of the square are (-.5,-.5) to (.5, .5). We want to turn this into a circle using clipping. A single gl scissor call will only cut off a box shape from one side, so we will do this using a loop of scissor commands. (Again, if you can just create a circle shaped polygon, that would be faster).

Pseudocode to do a circular cut:

polyX = 0;
polyY = 0;
polyWidth = 1;
rad = pi/180

for (int i = 0; i <360; i++)
{
    x = Math.cos(i*rad)*polyWidth + polyX;
    y = Math.sin(i*rad)*polyWidth + polyY;
    glScissor(x,y,((polyWidth/2)-polyX)-x,.05); 
}
0

精彩评论

暂无评论...
验证码 换一张
取 消