2016-08-11 05:52



Hello dear people of internet,

I have an idea for interesting script, but I'm trying to find the best way to accomplish what I want.

Idea is simple. Have pixels colors replaced, to achieve custom color for character every time. I have this guy, I will be using php canvas and maybe svg to generate these images: source image

enter image description here

And what I basically need is via script turn it into this: final result

enter image description here

I considered few ways to do it:

1) Have alpha only pixels and color it from behind and place alpha image on top to achieve shading and depth

2) Draw each pixel individually (but this option isn't what I really want to do)

3) Use some thing like hue/saturation, but that is beyond my knowledge.

maybe there is something I can do to achieve it.

Thank you.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • duanming7833 duanming7833 5年前

    It's past 2am so here's a brief answer.

    Best option: Create a spritesheet with all your character variations and cut out desired sprites from your spritesheet like this: drawImage(spritesheet, spriteX, spriteY, spriteWidth, spriteHeight, canvasX, canvasY, spriteWidth, spriteHeight)

    Next best option: Create a spritesheet with your full character and then have multiple sets of replacement pants (just pants--not the full character), replacement shirts, replacement weapons, etc. First draw the full character and then draw the desired pants on top of the character -- overwriting the original pants with desired pants. This way you're effectively "dressing" the character in replaceable pants, shirts, weapons, etc.

    If you need runtime recoloring, use compositing to dynamically recolor a cutout of just the pants:

    • Create a full character on the main canvas
    • On a second canvas, create just the pants.
    • Set `secondContext.globalCompositeOperation='source-in'
    • Set a desired fillStyle.
    • Fill a rectangle on the entire second canvas: secondContext.fillRect(0,0,secondCanvas.width,secondCanvas.height)

    About your #2: Expensive to manipulate pixels -- avoid if possible.

    About your #3: If you're just replacing a single RGB color, you don't need to mess with saturation & lightness.

    点赞 评论 复制链接分享