[Demo-HTML5] Pseudo Nearest-Neighbor/AliasParameter Functionality


#1

Note: Chrome does not allow this to run locally. I have not optimized the code for Chrome in this respect.
Tested and works with: Firefox, Safari

Link to Demo: https://www.dropbox.com/s/5w23sewbueak41t/scaling_v1r4.zip

I have modified the cocos2d-html5 library to support a psuedo-alias parameter. :slight_smile:

[CCSprite Left: No Scaling] [CCSprite Right: x8 Psuedo-Alias Scaling]

Both CCSprites at setScale(1)

===================================

Both CCSprites at setScale(8)

===================================

Brief Explanation
* Images in resource.js can be given a scale parameter
e.g.
Default:
{type:"image", src:"res/myImage.png"}
With Pseudo-Alias Scaling:
{type:"image", src:"res/myImage.png", scale:"8"}

Detailed Explanation
When cocos2d launches the resources are preloaded. In the CCLoader.js in the method preload() if an image has the property β€˜scale’ (e.g. {type:"image", src:"res/myImage.png", scale:"8"} ) then it is sent to the instance of CCTextureCache() in the (new) function called addImageAndScale(). This is a modified version of addImage() with functionality similar to addImageAsync(). addImageAndScale() loads the original image then after the original image has loaded it up-scales the image and sets the texture to the new scaled image and sets the size manually. (This is necessary for the first run of the code since it will normally register as 0 width and 0 height) CCSprite.js is given a variable _pixelScalarModifier which defaults to 1. If the the texture has been scaled then CCSprite._pixelScalarModifier is modified to the value of the scale. CCNode.js’s scaling methods (getScale(),setScale(),getScaleX(),setScaleX(),getScaleY(),setScaleY()) are modified to make the node by default, the size of the original image.
Therefore, the image can be scaled larger and still retain a nearest-neighbor like appeareance.


#2

Thank you for you sharing!