Cocos2d combined with Coregraphics to realize the inhalation effect of RPG characters hollow black hole

Panda Pig • Patty original or translated works. Welcome reprint, Reprint please indicate the source.
If you feel that the writing is not good please more advice, if you feel good please support a lot of praise. Thank you! Hopy;)

In the previous blog post we realized the retro effect of RPG characters.

Now that we're done with the high, we're going to do something like this:

The character starts from the center point to form an empty hole, the edge of which produces an inhalation deformation effect.

With the foreshadowing of the last article, we can fix it quickly.

First look at Apple's description of its ciholedistortion filter:

Creates a circular area thatPushes theImage pixels outward, distorting those pixels closest to  theCircle theMost. Localized Display namehole distortioninputimage A ciimage ObjectwhoseDisplayname  isImage.inputcenter A Civector ObjectwhoseAttribute type isCiattributetypeposition and whoseDisplayname  isCenter.default value: [ Max  Max]inputradius an NSNumber objectwhoseAttribute type isCiattributetypedistance and whoseDisplayname  isRadius.default Value:150.00

These are the 3 parameters for the filter, which is simple:

The first one is the input image, the second is the center point of the black hole, and the last is the radius of the black hole.

The official website also gives the effect that should be shown:

Well, let's put it in the game:

//convert cgimage to ciimage ciimage *ciimage = [Ciimage imagewithcgimage:_image. Cgimage]; Generate a new ciimage cifilter *filter = [cifilter filterwithname:@] ; Civector *vector = [civector vectorwithx:sz.width*_image.scale/2  Y:sz.height*_image.scale/2 ]; [Filter set  value:ciimage for  key:@ "Inputimage" ]; [Filter set  value:vector for  key:@" Inputcenter "]; [Filter set  value:@ (10.0 ) for  Key:@ "Inputradius" ]; Ciimage *outputimage = [Filter outputimage]; 

Above we select the center point of the RPG character as the center of the black hole, and the radius of the black hole is 10.

Compile and run the game with the following effects:

Zoom in a bit to see the effect:

You can see a small flower on the background grass in the dog's belly.

In general, to achieve this effect, you need to write your own OpenGL ES endpoint and fragment shader, but we have the filter provided by cocoa to avoid the lower-level method, and implementation is very simple.

Cocos2d combined with Coregraphics to realize the inhalation effect of RPG characters hollow black hole