移动终端网页游戏移植研发框架【精灵系统-纸娃娃】

这下到了说精灵系统纸娃娃的时候了，在每款RPG游戏中都有类似的实体人物造型在游戏中呈现，当然呈现的方式不同，有可移动的，固定的。一般有两种模式，NPC人物，主角人物等类型，就是精灵系统的衍生，人物主角可移动的情况，和第一人称移动的，在我们这个游戏中，我不探讨人物移动【4方向，8方向】的精灵系统，我们做的是表现形式的NPC人物精灵系统，它拥有的功能就是【左右翻转，动态，说话，战斗】，在canvas android中我们利用到 Bitmap 绘制图像，控制素材的反转效果。

下面先在xml制作布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_height="180dip" android:layout_width="150dip"
android:gravity="center">

<TextView android:layout_height="wrap_content" android:text="npcname"
android:id="@+id/npcname"
style="@style/GameText"
android:gravity="center"
android:textColor="#FFCC00"
android:textSize="11dip"
android:background="@drawable/js_npc_textbd"
android:layout_width="wrap_content" />
<ImageView android:layout_width="150dip" android:id="@+id/npcimg"
android:layout_height="150dip" />
</LinearLayout>
</LinearLayout>

定义好之后就开始将NPC制作成精灵控件！

Timer timer = new Timer();
private int i = 0;
private int cutnum;
private String npcname;
private String npcurl;
private String npcimgrul;
private Context context;
private Bitmap npcbitmap;
private Boolean npcflag=false;
private String monsetid;
public String getMonsetid() {
return monsetid;
}

public void setMonsetid(String monsetid) {
this.monsetid = monsetid;
}
public TextView npcnametext;
private ArrayList<Bitmap> NpcImgResList;
public ImageView npcimg;
NpcBody npcbody = new NpcBody();
public NpcView(Context context) {
super(context);
this.context=context;
}

public NpcView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
}

public NpcView(Context context, AttributeSet attrs,String npcname,String npcimgrul,int cutnum,Boolean npcflag,String monsetid) {
super(context, attrs);
this.context=context;
initMonster(npcname, npcimgrul, cutnum,npcflag,monsetid);
}

private void initMonster(String npcname2, String npcimgrul, int cutnum2,Boolean npcflag,String monsetid) {
// TODO Auto-generated method stub
this.npcname=npcname2;
this.npcimgrul=npcimgrul;
this.cutnum=cutnum2;
this.npcflag= npcflag;
setMonsetid(monsetid);
forceInflate();

}

public void initNpc(String npcname,String npcurl,int cutnum) {
this.npcname=npcname;
this.npcurl=npcurl;
this.cutnum=cutnum;
/*npcbitmap = BitmapFactory.decodeResource(this.getResources(),
npcimgid);*/
NpcImgResList =npcbody.getNpcBody(cutnum, npcurl);
forceInflate();
}

public void forceInflate() {
onFinishInflate();
}

@Override
protected void onFinishInflate() {
super.onFinishInflate();
LayoutInflater li = LayoutInflater.from(getContext());
li.inflate(R.layout.view_npc, this);

if(npcflag!=true)
{
internalOnFienishinflated();
}
else
{
internalOnFienishinflated2();
}
}
public LayoutParams lp ;

private void internalOnFienishinflated() {
npcnametext = (TextView)findViewById(R.id.npcname);
npcimg =(ImageView)findViewById(R.id.npcimg);
npcnametext.setText(npcname);

onplay();
}
private void internalOnFienishinflated2() {
npcnametext = (TextView)findViewById(R.id.npcname);
npcimg =(ImageView)findViewById(R.id.npcimg);
npcnametext.setText(npcname);
if(npcimgrul.length()>0)
{
setMonsterImage(npcimgrul);
}
}

private void setMonsterImage(String faceUrl) {
LocalCache.getInstance(CacheValue.GameDataPack).useDownloadResource(faceUrl, new Action<CacheResult>() {
@Override
public void execute(CacheResult cacheResult) {
if(cacheResult.isCached()) {
String path = cacheResult.getCachedPath();
final Bitmap bm = BitmapCache.Instance.getFileImageOrCache(path);
TApp.getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
BitmapDrawable drwawable = new BitmapDrawable(bm);
npcimg.setBackgroundDrawable(drwawable);

}
});
}
}
});
}

然后利用动画播放的机制，将帧显示出来，这样纸娃娃系统就基本成型了，而且能够动起来了。而且还可以拓展，这个就靠大家发挥了。

下面我贴一下制作成功的精灵系统在地图系统中的显示效果。



这就是我们游戏的城池场景，里面的NPC都是非常精美的。



这个就是我们的练级地图了，这套地图系统是由服务器配置的，怪物的坐标，朝向，动作，对话，都可以在服务器端配置。

游戏群：【45578308】欢迎进群讨论