在之前的游戏功能上，我们的策划再次给我添加了皮肤的功能。关于设计皮肤这项我也是似懂非懂的样子。由于需要使用到公司内部的封装代码，这里就不发详细的代码了。
皮肤，顾名思义就是更改它的SpriteFrame属性就可以了，关键就是怎么判断当前的图片或者说皮肤已经被我们购买了，我这里使用了公司的保存数据的封装方法，所以轻易就能使用，由于是第一次使用这种封装的方法所以我也不太熟。有问题就自己想吧。我这里只提供思路。当玩家点击该款皮肤时，首先获取判断当前皮肤是否已经购买了，如果被购买了就可以直接穿戴就行了，如果没有购买的话就弹出购买皮肤的窗口，之后的窗口会显示是否确认购买按钮，如果玩家点击确认购买，则是进入方法判断玩家的金币余额比该皮肤的标价金币是否要多，如果小于标价金币则是直接弹出警告提示，提示玩家金币余额不足，不能购买。这里有点需要说明的是，我把篮球直接做成了Button，当玩家点击该篮球皮肤时会直接把该金币的价格传入方法中，并保存。这里的皮肤图片的命名也是使用的价格。比如第三款皮肤的价格是200，而在资源图片中的命名方式是“Ball_200.png”这样命名的方式的好处在于，你之前保存了这个价格，而在你获取并判断时，就需要根据价格或者说是tag来判断你买的是那款皮肤（皮肤价格就是tag）。
这里首先说明啊，皮肤这里的代码不提供源码，只提供思路。由于之前如公司之前签约过保密协议。
下面就直接粘贴自己的代码了，公司的封装代码就不展示了：
//Skin_Window.js
cc.Class({
extends: cc.Component,
properties: {
skin_ball:{
type:cc.Node,
default:[]
},
Gold_Label:{
type:cc.Label,
default:null
},
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
this.Con = cc.find("Canvas/Popup");
this.initSkin();
this.balance = Userdefault.getIntForKey(lieyou.Key_Gold,0);
//this.child_1 = node.removeChildByTag(1001);
},
update (dt) {
this.Gold_Label.string = ' ' + this.balance;
},
start () {
},
/* 判断皮肤是否拥有，拥有就可以穿戴 */
initSkin:function(){
this.tags=[0,50,200,500,1000,1500,2000,3000,5000];
var len = this.skin_ball;
for (let index = 0; index < len.length; index++) {
var element = this.skin_ball[index];
var tag=this.tags[index];
element.getChildByName("ball").tag=tag;
if(tag != 0&&!Have_Skin.Get_Buy(tag))
continue;
if(tag == 0){
}
var mon = element.getChildByName("money_"+tag);
var lab = element.getChildByName("Label_"+tag);
if(mon){
mon.destroy();
}
if(Have_Skin.GetCurrSkin()==tag){
lab.active = false;
element.getChildByName("Dressed").active=true;
// //穿戴
// Have_Skin.SetWearState("Ball_"+tag, tag)
}else{
element.getChildByName("Dressed").active=false;
lab.active = true;
lab.getComponent(cc.Label).string = "已拥有";
}
}
},
// update (dt) {},
/*=========================按钮事件=========================*/
ClickEvent(event, type) {
this.Decide_Buy(type);
this.initSkin();
},
Click_Close(){
this.Con.active = false;
},
Decide_Buy:function(type){
if(type == 0||Have_Skin.Get_Buy(type)){//已购买
Have_Skin.SetCurrSkin(type);
this.initSkin();
console.log("已购买");
//return;
}else{//未购买
console.log("未购买");
this.Con.active = true;
this.pice = type;
// this.Con.tag=type;
}
},
Click_Confir:function(){
//Userdefault.setDataForKey(lieyou.Key_Gold,Userdefault.getIntForKey(lieyou.Key_Gold,0)+ 1);//保存金币值
this.balance = Userdefault.getIntForKey(lieyou.Key_Gold,0);
console.log("余额："+this.balance);
if (this.balance > this.pice) {
//金币数大于标价，且金币数为正数
this.Click_Close();
Userdefault.setDataForKey(lieyou.Key_Gold,Userdefault.getIntForKey(lieyou.Key_Gold,0) - this.pice);//保存金币值
console.log("余额: ", this.balance);
var tag = this.pice;
Have_Skin.Set_Buy(tag);
var goldimg=cc.find("Canvas/Skin_background/Layout/Grid_"+this.pice+"/money_"+this.pice);
var Label=cc.find("Canvas/Skin_background/Layout/Grid_"+this.pice+"/Label_"+this.pice);
if(goldimg)
{
Label.getComponent(cc.Label).string = "已拥有"
goldimg.destroy();
}
}
else
{
console.log("余额不足");
this.Balance_Tips();
}
},
Balance_Tips:function(){
var mark = cc.find("Canvas/Popup/Mark");
mark.active = true;
this.scheduleOnce(function() {
mark.active = false;
}.bind(this), 1);
console.log("余额不足！");
},
Click_Share_Close:function(){
//返回主界面
SdkManager.share({ name:GameName,source:2 ,success:function(type){
cc.director.preloadScene("Start");
cc.director.loadScene("Start");
}});
},
Click_Close_Button:function(){
cc.director.preloadScene("Start");
cc.director.loadScene("Start");
},
});
//SkinData.js
window.Have_Skin = {
skinSpriteframes:"resources/Texture/BasketBallSkin/Ball_",
GetCurrSkin:function(){
return Userdefault.getIntForKey("Skin_0",0);
},
SetCurrSkin:function(type){
return Userdefault.setDataForKey("Skin_0",type);
},
Get_Buy:function(type){
var key="key_qiu"+ type;
return Userdefault.getBoolForKey(key,false)
//未购买
},
Set_Buy:function(type){
var key="key_qiu"+ type;
return Userdefault.setBoolForKey(key,true);
},
////穿戴的情况
SetWearState:function(type){
return Userdefault.setDataForKey("Skin_name",type);
},
////穿戴的情况
GetWearState:function(){
// var elves_path =Have_Skin.skinSpriteframes + Have_Skin.GetCurrSkin() + ".png";
var elves_path =Have_Skin.skinSpriteframes + Have_Skin.GetCurrSkin() + ".png";
var spfame= new cc.SpriteFrame(cc.url.raw(elves_path));
return spfame;
},
}
皮肤选择好了之后就是在游戏界面里引用它就可以了。我这里有两处引用，一处是游戏中的篮球，一处是篮球的重影，也就是粒子特效，由于粒子特效比较难看，所以我这里直接用代码创建重影（重影创建在Updata）。
