4)ActionFighter's state design_2

4) ActionFighter

previously, I introduce how Image drawing and state working in AF(ActionFighter). and this time I'll explain how AF use state and receive input and process this.

AF need to have various state. in BitmapWorld,using skill by mouse click and drag and each skill constituted by more than one of state. AF use AFskillMap,object, to save these skills.

-      AFskillMap

there are function and variable of SkillMap.
in one SkillMap, it contain owner AF and 6 of initial state of skill.
(continuous next state is created and called by this state's inputSlot function)

addSkill function overlay initiated skill on wanted slot and by getSkill, you can get that slot's reference.

now Let's see ActionFighter's variable.

state  Changed by input is saved in skillMap's slot. but AF need more state change except on input and that kind of state saved in AF directly.

these states initiate when AF created.

CurState: AF's current activating state.

CurSkillMap: AF's current activating skillMap.
AtkSkillMap: skillMap saving attacking skills, activating by leftClick.
DefSkillMap: skillMap saving defencing skills, activating by rightClick.
IdleState: defult State. idleState will be explain lately.
DamagedState: when AF take damage, change to this state.
DeadState: when you die.
PushedState: AF pushed by special situation.
Downstate: down.
EventState: state for eventScene






AF change it's state on various situation.

AFstate's all state changing using changeState(). and changeState usually using in inner AFstate.

it Mean AF change it's state by calling curState's function.

-      damaged

when AF take damage by target, curState's damaged function called and it process it's action in curState.

-      update

when tick event call, curState's Update called.

-      inputSlot

this is BitmapWorld's special inputStyle. by drag mouse to each 6 direction, you can get slot data.
according to slot input, curState's inputSlot data changed. but before that, it need to convert mouse input to slot input.

first, by click mouse, mouse position is initiated and skillMap activated.

row inputProcess in playerController. It will explain later.

this graph attached to tick event' sequence 2.

AF check curSkillMap is activated every time. and when curSkillMap is activated and mouse position' length overrun some distance, it calculate it's degree and sand slot data to curState's inputSlot.

simply ActionFighter perform it's action by curState's function called by damaged,update,inputSlot Event.

by this, ActionFighter's major performance is explained.
next I'll introduce PlayerConteroller that work for player input.

3)ActionFighter's State design

When I first making this, the hardest thing was how Making various character’s action. And the hardest thing in making action is keeping independency on each action.

I’ve searched, and I found state pattern and I use it.

Simply state pattern mean making each character’s state (move, attack, damaged etc.) to object.

I’ll explain state pattern more with BitmapWorld.

- AFstate

In BitmapWorld, all state inheritance AFstate. AFstate do not use itself but it has some functions that all state share.

Let’s see variable.

 

ownerRef: reference of AF having this. When state initiate, it connected.

state: structure having essential variables for expressing AF’s state.

 

And having information about other variable used in functions and reference of nextState.

AFstate has some functions to realize state.

Initiate: called when object created. by this function, state initiate.

Update: called on every tick. by this function, state realize continual action.

• update charge time and atk, next slot image needed to change by charge rate.

• change Stamina according as staminaUse.

• check curSkillMap with Essential SkillMap and if wrong, change state to IdelState.

*SkillMap: Object saving state can called by AF's input. by mouse left or right click, you can call each different skillMap.

Enter: called one time when enter this state.

• if this state cause damage to target, calculate finalDamage by preChargeRate of pre state. target take final damage.

• change AF's sprite to state's motion.

• create slotComponents and draw def, pre slot image.

Leave: like enter, it called one time when leave state.

• reset chargeTime to 0.

• clean slot data.

• return chargeRate to nextState.

InputSlot: called when receive AF's input.

• if state's nextSlot data and input Slot data is same and state have nextState, change state to next state. in this action, when real object of nextState is not exist, create one and if exist object of nextState, use this.

Damaged: called when AF take damage.

• receive causer's finalDamage and check it succeed blocking by damage's atkDirection match with state's defSlot.

• if it fail to block, change Hp and Stamina by damage formula.

*damage formula

BitmapWorld have damage formula related with Hp and Stamina both.

this is Damage structure.

if attackDirection avoid defSlot and succeed attack, damage caused by 3 type of damage.

damage = pureDamage+(normalDamage - stamina / 2) and deal to stamina after deal Hp.

after taking damage, if stamina is 0, AF changeState to down and if Hp is 0, AF dead.

ChangeState: it used for change state. in this function, enter and leave realizate.

All state changing work by this function.

most of state add it's own logic to AFstate's function. some special state change all function but purpose of function call never change.

nextTime, I'll introduce how ActionFighter work including this State.

2)ActionFighter and imageDrawing

first of all, Let's see ActionFighter(AF), the most Important thing in BitmapWorld.

AFis blueprintClass heritaged by PaperCharacter.

AF do many thing, but first let's see How it draw Character.

-      CharacterFlipbook

first, let's see How it change characterFlipbook.

2Dcharacter can't move one model by anim, not like 3Dcharacter. in fact It can use like that, I don't like it. so BitmapWorld's AF have each Flipbook on each motion.

It's okay that drawing Image and making Flipbook. but how we can connect this with AF?

simply, we can set Flipbook of AF's Sprite.

Like This.

but we need to think about it deeply. currently we only have BIT, one character. but we can't make Game with only one Character. there are various characters that have each individual Image. and it will change in various situation.

Rather than making each flipbookSetter one by one, Making new component that work only for changing AF's Flipbook. and by this component's function, AF change it's flipbook by it's own flipbook variable.

we need something to that.

FlipbookMotionGuide

FlipbookMotionGuide is enum about all Motion that AF can have.
each AF have Flipbook matching on this motionEnum.

 

AFflipbookComponent

component to change AF's Flipbook.

it look like messy but by this AF can call it's own var and change flipbook. at least we don't need to make this messy thing over and over again.

eventually AF can make different character by changing it's motionFlipbook var.
surely we still need to draw each resource. :(

-      ActionMap

in this Screen, there are almost Images AF need to draw.

as you see, AF have round interface, ActionMap, surrounding it's character.

actionMap have 6 direction's slot and each slot have to show 4type of image.
and each slot image can overlap and show multiply.








now let's make AF draw slot.

slot drawing's programming is focused in AF. In fact CharacterFlipbookChange also in AF and I find about conponent and divide this on component. I think slot drawing also need to divide... but only think.

anyway, slot's drawing work very dynamically.
slot create new PaperSpriteComponent when it need, and draw slot and destroy again. by this, we can draw various slot limitlessly.

CreateSlot

AF's CreateSlot Function craete and save slot on each type's individual slotArray.

it read slotInfo as parameter and calculate how many PaperSpriteComponent need and create(ex. slotinfo = 123 then it make 3 slot) and attach new component to actionMap. by this, slot can draw on actionMap.

DrawSlot

DrawSlot use same slotInfo that used on creating and by this, match resource on right position.
nextSlot type need to draw chargeRate so it also read chargeRate and match resource.

ClearSlotSet

when slot need to be changed or disappear, each SlotsetData all deleted and clear. it clear all slot type togater.

with this, AF draw Character and actionMap.

next, let's see how AF's gameAction work.

1)About BitmapWorld

Before starting, Let’s see what is BitmapWorld.

BitmapWorld is Story that (easy to drawing) green Box Friend Bit going to save the world by battle against various people.

First of all, I’ll describe about BitmapWorld Combat System design.

BitmapWorld is 2dActionGame based on 1 vs 1 battle.

In BitmapWorld, Fightable character is called as ActionFighter(AF).

This AF fight with some roles.

• There is no jump! They only move left or right. Simple.
• AF can overlap each other.
• AF have ACTIONMAP that have 6 skills in each direction. And you can use skill by drag mouse to specific distance and angle.
• Main attack that can stun target have 3 direction of attack – high, mid, low. And it can be block by matching direction blocking skill.
• Main attack must have ready phase.
• Attack direction, charge time, defense directions are showed to everyone.
• Some skills can move automatic.
• Some skills can spawn object.

• AF have Hp and Stamina.

• AF’s towardDirection can be changed by some input and AF looks at target, can know target’s Hp and Stamina.

• Surly Hp decrease when taken damage and become 0, die. If take damage when low stamina, more Hp decrease.

• If AF do some action, stamina decrease and stamina recover when no action.

• Take damage cause stamina decrease also. If AF’s stamina become 0 by taking damage, cause knockback

// It look like complicate! Well, play BitmapWorld! You can know approximately. Maybe?

I think this is enough design to make CombatSystem.

Next, I’ll post How create that roles step by step.

p.s in fact, It’s first time I summary BitmapWorld. I don’t know I do well. Asdfadfs

p.s.2 truly, yesterday is first time, I posting. @_@ don’t I do some critical and terrible mistake??

BitmapWorld: sorce _ how to make

Hellow? I’m ArtJunkie!

From Now I’ll introduce How to make BitmapWorld that is sidescroll ActionGame in development.

Because I’m still student, my development will have some wrong or inefficient way. Please comment if you have some curiousity or good idea.

BitmapWorld is opensource!

You can download unreal4.11 project on this link

 https://www.dropbox.com/s/st3xxshdqez6umd/BitmapWorld.zip?dl=0

bitmapWorld:Sorce will be keep update when it have basic frame.

p.s I'm not good at english very well. so... maybe some sentence will be awkward. I'll keep studing english but if you think something strange please comment it! ; )