您的位置:首页 > 其它

flash 游戏设计笔记:人物行走一种做法

2009-12-16 18:02 459 查看


目前来讲,我依然还不会做一个小游戏出来。做游戏需要知道很多东西,这个flash 只是一个自娱自乐的东西。要是看了误导就别怪了。

好,制作这个东西之前,其实这篇文章有一些重复了,不过只是一种demo式的演示。通过键盘来控制控制一个人物走动。

上面是一张透明的png位图。有四个不同的方向。可以看到 基本上上下左右都齐全了。现在来。我们就来一起玩一下这个东西。

由于这个东西不涉及很强的面向对象 和重用性。因此看下面的代码的时候需要注意一下。在这里的目的,只是希望一起玩一下这个flash。

好废话少说。有了这张图,笔者就打算通过复制像素的方式来将这种图片切成16份,每一份都代表了一张不同方向的不同步的图片。

首先,先通过一个类,复制这张位图。返回一个二维数组。注意,里面的类是可以进行修改。这里放出一个比较简单的。没有扩展的

package com.game
{
/* 切割位图类,返回一个二维数组*/
// version 1.0 版本
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.*;
public class BitmapSplice
{
private var Step:Array=new Array();//存取步数数组
public function BitmapSplice()
{

}
//进行切割
public function Splice(bitmapdata:BitmapData,titleWidth:uint,titleHeight:uint):Array
{
var iWidth:int=bitmapdata.width /titleWidth;
var iHeight:int=bitmapdata.height /titleHeight;
for (var i:uint=0; i < titleHeight; i++)
{
var array:Array=new Array();
for (var j:uint=0; j < titleWidth; j++)
{
var tempBMP:BitmapData=new BitmapData(iWidth,iHeight,true,0x00000000);
tempBMP.copyPixels(bitmapdata,new Rectangle(j * iWidth,i * iHeight,iWidth,iHeight),new Point(0,0));
array.push(tempBMP);
}
this.Step.push(array);
}
bitmapdata.dispose();

return this.Step;

}
}
}


通过这个类,我们获取到一个二维数组阵列。 下面我们就使用一个键盘来控制一下。

为了展示,只是方便演示一下。可以对其进行更改。后面的 有时间去放出其他的版本,因为不是一个游戏,因此只能当是玩一下,学习里面的填充位图的方法了。

package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.ui.Keyboard;
import com.game.BitmapSplice;
public class Main extends MovieClip
{

private var array:Array;//保存图片序列的
private var bitmap:BitmapSplice;
private var Step:int=0;//步数
private var Direction:uint=0;//方向
private var speed:int=10;

private var Isup:Boolean;
private var Isdown:Boolean;
private var Isleft:Boolean;
private var Isright:Boolean;

private var bitmapdata:BitmapData=new Player(0,0);
private var contain:Sprite=new Sprite();

private var vx:Number;
private var vy:Number;
public function Main()
{
init();
}
//初始化
private function init():void
{
addChild(contain);
bitmap=new BitmapSplice();//切割位图
array=bitmap.Splice(bitmapdata,4,4);//将位图分成很多块
addEventListener(Event.ENTER_FRAME,gameLoop);
keyboardListener();

}
//游戏循环
private function gameLoop(event:Event):void
{
control();
paint();//绘制填充

}
//键盘监听
private function keyboardListener():void
{
stage.addEventListener(KeyboardEvent.KEY_DOWN,KeyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP,KeyUpHandler);
}
private function KeyDownHandler(event:KeyboardEvent):void
{
switch (event.keyCode)
{

case Keyboard.UP :
Isup=true;
break;

case Keyboard.DOWN :
Isdown=true;
break;

case Keyboard.LEFT :
Isleft=true;
break;

case Keyboard.RIGHT :
Isright=true;
break;

}
}
private function KeyUpHandler(event:KeyboardEvent):void
{
switch (event.keyCode)
{

case Keyboard.UP :
Isup=false;
break;

case Keyboard.DOWN :
Isdown=false;
break;

case Keyboard.LEFT :
Isleft=false;
break;

case Keyboard.RIGHT :
Isright=false;
break;

break;
}
}
//填充绘图
private function paint():void
{
contain.graphics.clear();
contain.graphics.beginBitmapFill(array[Direction][Step]);
contain.graphics.drawRect(0,0,array[Direction][Step].width,array[Direction][Step].height);
contain.graphics.endFill();
}
//移动
private function Move(directtion:uint,dx:int,dy:int):void
{
Direction=directtion;
Step++;
vx=dx*speed;
vy=dy*speed;
if (Step>3)
{
Step=0;
}
contain.x+=vx;//产生位移
contain.y+=vy;//产生位移
}
private function control():void
{
if (Isup &&!Isdown && !Isleft &&!Isright)
{
Move(3,0,-1);
}
if (Isdown && !Isup && !Isleft &&!Isright)
{
Move(0,0,1);
}
if (Isleft && !Isup && !Isdown && !Isright)
{
Move(1,-1,0);
}
if (Isright && !Isup && !Isdown && !Isleft)
{
Move(2,1,0);
}
if (!Isup && !Isdown && !Isleft && !Isright)
{
Step=0;
}
}
}
}


代码不是很长,这里和上次切割位图的介绍是一样的(可以到上次文章观看 这里不补充)。但是这次改变了一个方式来显示位图。

介绍一下,位图显示的方法。有几种的方式,上次的一种就是采用Bitmap类显示,通过addChild 加入显示列表进行图像的显示。而这次则通过绘图API的方式来填充位图。后面,会继续探讨flash 10新增的着色器渲染一个位图。这里暂时不讨论。

//填充绘图
private function paint():void
{
contain.graphics.clear();
contain.graphics.beginBitmapFill(array[Direction][Step]);
contain.graphics.drawRect(0,0,array[Direction][Step].width,array[Direction][Step].height);
contain.graphics.endFill();
}


主要使用绘图API来绘制。这样能够显示出一些位图出来了。

最后 贴上一个背景,看起来的效果。你就可以控制一个人物走动了

(装上一个背景,就可以骗人一下了)

这个小程序,并不涉及到很高深的知识,在这里笔者只是希望能够带给一点学习flash 的欢乐而这份欢乐就是我想分享的东西。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: