Skip to content

March 5, 2013

7

Game Development : 03වන පාඩම

අද ලිපිය කොටස් 02 කට වෙන් කොට ලියන්න අදහස් කලා. අන්තර්ගතය මෙසේයි.

  • රුප චලනය
  • රුප වල ඇනිමේෂන් සැදීම

 

01) රුප චලනය

ගිය ලිපියේ සදහන් කල පරිදි අපි ඇන්ද රුපය එකතැනකට වෙලා ඉන්න එකක්. අද බලමු එක තිරය මත විවිධ පැති වලට යවන්නේ කොහොමද කියල.

spriteBatch.Begin();

spriteBatch.Draw(<texure_variable_name>,  Vector2.Zero,   Color.White);

spriteBatch.End();

 

ගිය ලිපියේ අපි අදින්න පාවිච්චි කල කෝඩ් එක මේ වගේ එකක්. මේකේ Vector2.Zero  ලෙස තියෙන්නේ 0, 0 දෛය්ශික බවත්  new Vector2(x, y) ලෙස අදාළ අගයන් ලබා දීල තිරයේ අවශ්‍ය තැනක අදින්න පුළුවන් කියලත් කිව්වා. මේකේ x වලින් කියන්නේ හරස් අතට යන දුරයි. y කියන්නේ උඩ සිට පහලට තියන දුරයි.

මම පළමු ලිපියේ කිව්වා game loop වැඩකරන්නේ කොහොමද කියල. ඒ අනුව අපිට පුලුවන්න් නම් x හි අගය අනුක්‍රමිකව වැඩි කරන්න,  අදාල රුපය ඉදිරියට යනවා. x හි අගය අනුක්‍රමිකව අඩු කලොත් රුපය පසුපසට යනවා. y හි අගය අනුක්‍රමිකව වැඩි කලොත් රුපය පහලට යනවා. y හි අගය අනුක්‍රමිකව අඩු කලොත් රුපය ඉහලට යනවා. ඒවගේම මේ දෙකම එක්වර කලොත් රුපය පැත්තට යවන්න පුළුවනි. දැන් ඔබට අදහසක් ඇති මේක වෙන්නේ කොහොමද කියල 🙂

මේක කරන විදිහ මෙහෙමයි.

එදා වගේම Texture2D  වෙරියබල් එකක් හදාගෙන එකට කැමති ඉමේජ් එකක් ලෝඩ් කරගන්න. ( උදාහරණය සදහා මම යොදාගන්නේ techKatha කියන වෙරියබල් එක )

ඊට පස්සේ Texture2D වෙරියබල් එක ලගින් ම මේ විදිහට තව Vector2 වේරියබ්ල් එකක් හදාගන්න.

Vector2  <variable_name>   = Vector2.Zero();      (මෙතැනදී මම කරන්නේ පටන් ගන්න තැන 0, 0 ලක්ෂ්‍ය දෙන එකයි. කැමති නම් new Vector(x, y)  දීල ඔබට කැමති තැනකින් පටන් ගන්නත් පුලුබනි. උද :- vector2 techKathPosition = new Vector2(50, 10);  )

float speed = 2.0f; (මෙය තමා අපේ වේගය සදහන් වෙන වෙරියබල් එක. මෙයට කැමති අගයක් යොදාගන්න පුළුවනි. )

උදාහරණය සදහා මම යොදාගන්නේ techKathaPosition කියන වේරියබ්ල් එක.

දැන් draw මෙතඩ් එක ලියමු,

spriteBatch.Draw(techKatha, techKathaPosition, Color.White);   ( මෙය ලිවිය යුත්තේ Begin සහ  End වාක්‍ය දෙක අතරයි.  පසුගිය ලිපිය බලන්න.)

 

ගියවර අපි කලේ අවශ්‍ය x,y අගයන් මේ පේලියේම දෙන එකයි. මේ පාර අපි කරන්නේ එක තව vector2  වෙරියබල් එකකින් දෙන එකයි. එතකොට අපිට හිතේ හැටියෙන් මේකේ x සහ y අගයන් වෙනස් කරන්න පුළුවනි.

දැන් ප්‍රොජෙක්ට් එක build කරලා බාලුවොත් චලනය නොවෙන රුපයක් පෙනේවි. දැන් තම චලනය කරන කෝඩ් එක ලියන්නේ. යන්න Update function එකට.

එකේ මෙන්න මෙහෙම ලියන්න.

 

techKathaPosition.X += 2;

techkathaPosition.Y += 2;

 

දැන් ප්‍රොජෙක්ට් එක build කරලා බාලුවොත් චලනය  රුපයක් පෙනේවි. මේකෙදි වෙන්නේ මෙහෙමයි. අප්ඩේට් ලුප් එකේදී  අපි හදාගත්තු Vector2 එකේ ස්ථානය වෙනස් කරන එකයි. ඔය දීල speed අගයන් වෙනස් කර වේගයන් අඩුවැඩි කරන්නත්  ඍන ලකුණ දීමෙන් විරුද්ද පත්තට යවන්නත් පුළුවන්. ටෙස්ට් කිරීම ඔබට බාරයි. අව්ලක් අවොත් techkatha වෙතට යොමු කරන්න 🙂

 

දැන්  හරි… ඔබ දන්නවා කොහොමද රුපය චලනය කරන්නේ කොහොමද කියල. දැන් ඔබට ප්‍රශ්නයක් ඇති ඇයි මේ රුපය Viewport එකෙන් එලියට යන්නේ ඇයි කියල. එක නවත්වන්නේ මෙහෙමයි.

 

techKathaPosition.X += speed;

if(techKathaPosition.X > Window.ClientBounds.Width – techKatha.Width || techKathaPosition.X < 0 )

speed *= -1;

techKathaPosition.Y += speed;

if(techKathaPosition.Y > Window.ClientBounds.Height -techKatha.Height || techKathaPosition.Y < 0)

speed *= -1;

Window.ClientBounds.Width  = අපේ ස්ක්‍රීන් එකේ දිග

Window.ClientBounds.Height  = ස්ක්‍රීන් එකේ උස

techKatha.Width  =  යොදා ගන්න රුපයේ දිග

techKath.Height = යොදාගන්න රුපයේ උස

මේකෙදි කෙරෙන්නේ x හෝ y වල අගය ස්ක්‍රීන් එකත් සමග අදාල රුපය සම්පත වන අගය එළබි වෙලාවේ speed  එක ඍන බවට පත් කිරීමයි. එවිට වෙන්නේ අදාල වේගයෙන් අනිත් පැත්තට යන එකයි..

 

02)  රුප වල ඇනිමේෂන් සැදීම.

Super mario වගේ ගේම්ස් ගහනකොට දැකල ඇති ඒකෙ චරිතය එහාට මෙහාට යනකොට කකුල් සෙල වෙනවා ඇත පය සෙලවනවා. අන්න ඒ දේ කරන්න තමයි අපි මේ කොටසින් බලන්නේ.

මේවගේ දෙයක් කරන්න නම් අර කාටුන් වල කෙරෙන දේ තමයි කරන්න ඕනි. එකියන්නේ ඇනිමේෂන් එක වෙන හැටි මොහොතින් මොහොත ඇක්ෂන් වෙනස් කරමින් රුප කිහිපයක් ඇදගන්න ඕනි. එතකොට ඒවා එකදිගට මාරුවෙන් මාරුවට viewport  එකේ වෙගයෙන් ඩිස්ප්ලේ කරනකොට එක ඇනිමේට් වෙනවා වගේ පේනවා.

කරන හැටි මෙහෙමයි…

ඉස්සෙල්ලම ඔයාට ඕනි ඒවගේ රුප සෙට් එකක් හදාගන්න. ඊට පස්සේ පිළිවෙලට ඒ රුප ඔක්කොම එක ලොකු ෂිට් එකකට ඇතුලත් කරගන්න.

උද : – අපි හිතමු අපිට ඕනි අනුමේෂන් එකේ රුප ඇදල තියෙන්නේ 100×250 pixel කොටු 4ක කියල. එහෙනම් ෆොටෝෂොප් හෝ ගිම්ප් වගේ සොෆ්ට්වෙයා එකකින් 200×500 pixel ලොකු ෂිට් එකක් හදාගෙන එකට අර පින්තුර ටික ගන්න. පින්තුර වල බැක්ග්‍රවුන්ඩ් පේන්න ඕනි නැත්නම් transparent sheets එකකට අරගෙන PNG විදිහට සේව් කරගන්න. JPG වල transparency වැඩ කරන්නේ නැ.

උදාහරණය සදහා මම යොදාගන්නේ සාමාන්‍ය පාට 4කින් යුතු ශීට් එකක්. ඔබට කැමති රුප සහිත ශීට් එකක් යොදාගන්න පුළුවනි.

ඊළගට එම රුපය ඔබ කැමති වෙරියබල් එකකට ලෝඩ් කරගනන. ඉන්පසු මෙම ලයින්  class ලෙවෙල් එකේ ඇතුලත් කරන්න.

Point animateframeSize = new Point(100, 250);

Point animatecurrentFrame = new Point(0, 0);

Point animatesheetSize = new Point(2, 2);

මෙම point structs, 2D තලය මත රුපයක ගුණාංග විස්තර කරන්න යොදාගන්න පුළුවනි. මේකේ පළමු පේලියෙන් කියන්නේ  frameSize එක. එකියන්නේ අපේ ෂිට් එකේ රුප ගොඩක් තියෙන නිසා එම එක රුපයක පික්සෙල් ගණන. දෙවැනි එකෙන් කියන්නේ currentFrame එක. මේකෙදි දීල තියෙන්නේ 0, 0 මොකද අපිට අදින්න පටන් ගන්න ඕනි තැන අපේ ෂිට් එකේ වම් කෙලවරේ උඩම කොනේ ඉදන් නිසා, තුන්වන පේලියෙන් කියන්නේ ෂිට් එක පින්තුර ගණන. මම පාවිච්චි කරන්නේ 2 , 2 එකක්. එකියන්නේ  ෂිට් එක හරි  4 ට බෙදල ඇති බවයි. අපි හිතමු ඔයාගේ එක තියෙන්නේ රුප 6ක් එක පේළියකට 3ක් වන ලෙසට කියල. එහෙම උනාම සදහන් කරන්න ඕනි 2, 3 කියන විදිහට.

 

දැන් පොඩ්ඩකට අපගේ පාඩම් මාලාවේ 02වන පාඩම ඇති ලිපිය බලන්න. ඒකෙ overloaded method එක තමා අපි මෙතැනදී පාවිච්චි කරන්න යන්නේ.

එකේ තියෙනවා source rectangle overload එක. එම ලිපියේ මම එක ගැන විස්තර නොකර ආවේ ඒක ඕනි වෙන්නේ මෙතනට නිසා. දැන් අපි දන්නවා අපේ ෂිට් එකේ පින්තුර ගොඩක් තියෙනවා කියල.  එකෙන් එක පින්තුරයක් විතරක් පෙන්නන්න එක වරකට අපිට මෙම rectangle පාවිච්චි කරන්න පුළුවනි.

spriteBatch.Draw(animate, new Vector2(300, 300),

new Rectangle(animatecurrentFrame.X * animateframeSize.X, animatecurrentFrame.Y * animateframeSize.Y, animateframeSize.X, animateframeSize.Y),

Color.White, 0, Vector2.Zero, 1, SpriteEffects.None, 1);

ඒ මෙන්න මේ විදිහට. අපි අර ඉස්සෙල්ල හදාගත්තු Point struct ටික rectangle function overload විදිහට පාස් කරනවා. එතකොට  ෂිට් එකේ frame එකෙන් frame එකට මාරු වෙනවා.

ඉන්පසු මෙම කෝඩ් එක update එකේ යොදා ගන්න.

 

++animatecurrentFrame.X;

if (animatecurrentFrame.X >= animatesheetSize.X)

{

animatecurrentFrame.X = 0;

++animatecurrentFrame.Y;

if (animatecurrentFrame.Y >= animatesheetSize.Y)

animatecurrentFrame.Y = 0;

}

 

මේ කෝඩ් එකෙන් වෙන්නේ Point struct එකේ  frame එකෙන්  frame එක අප්ඩේට් කරන එකයි. මේකේ තියෙන ලොජික් එක ටිකක් කල්පනා කරලා තේරුම් ගණන ටිකක් වෙලා යනවා.  වඩා හොද දේ තමයි කිහිප විටක් මේක කරන එක.

දැන් මේක build කරොත් පෙනේවි ඉතා වේගයෙන් ඇනිමේට් වන අයුරු. සාමාන්‍ය සම්මත වේගය තත්පරෙකට frame 60 ක්. නමුත් එම වේගය වැඩි නම් අඩු කරන්නත් පුලුවන්. එය කරන්නේ මෙහෙමයි.

මෙවිදිහට class level වෙරියබල් 2ක් එකතු කරගන්න.

int interFrameTime = 0;

int timePerFrame = 150;

interFrameTime එකෙන් කියන්නේ  දැන් තියන frame එක එන්න කලින් frame එකේ ඉදල කොච්චර වෙලා ගියද කියල. ආරම්බයේදී එක බින්දුවයි. ඊලග වෙරියබල් එකෙන් කියන්නේ එක frame එකකට තියෙන කාලයයි. එම අගය වැඩි කරලා වේගය අඩු කරන්නත්  ඒම අගය අඩු කිරීමෙන් වේගය වැඩි කරන්නත් පුළුවන්. ඇයි එහෙම වෙන්නේ?

ඔය අගයෙන් අපි ලබාදෙන්නේ millisecond ප්‍රමාණය.

FPS ( Frames Per Second ) =   1 / n

ඔය n අගය මත තම වේගය රදා පවතින්නේ.    ( n = time in milliseconds )

ඊට පස්සේ update එකේ ලියපු frame update කෝඩ් එක  පහල තියන කෝඩ් එක ඇතුලේ enclose කරන්න.

 

interFrameTime += gameTime.ElapsedGameTime.Milliseconds;

if (interFrameTime > timePerFrame)

{

interFrameTime -= timePerFrame;

// frame අප්ඩේට් කෝඩ් එක මෙතනට ඇතුලත් කරන්න

}

එහෙම කලාම මේ විදිහට තියෙන්න ඕනි..

 

interFrameTime += gameTime.ElapsedGameTime.Milliseconds;

if (interFrameTime > timePerFrame)

{

interFrameTime -= timePerFrame;

++animatecurrentFrame.X;

if (animatecurrentFrame.X >= animatesheetSize.X)

{

animatecurrentFrame.X = 0;

++animatecurrentFrame.Y;

if (animatecurrentFrame.Y >= animatesheetSize.Y)

animatecurrentFrame.Y = 0;

}

}

දැන් බලමු මෙම කෝඩ් එකෙන් කියවෙන්නේ මොකක්ද කියල. පළමු පේලියෙන් කියන්නේ අර frame එකේ ඉදලා ඊළග frame එකට යන්න  ගිහිපු කාලය. මේක ගන්නේ library වල තියෙන gameTime  මෙතඩ් එක පාවිච්ච් කරලා.  gameTime.ElapsedGameTime.Milliseconds එකෙන් අපිට ලැබෙන්නේ ගෙවුන මිලි තත්පර ගණන. අපිට ඕනේ නම් මිනිත්තු වලින් උනත් ගන්න පුළුවන්. එතකොට millisecond වෙනුවට minute යොදාගන්න ඕනි. නමුත් මෙතැනදී එහෙම කරන්න එපා.  ඊළගට කරන්නේ එහෙම ගන්න කාලය සාමාන්‍ය frame 2ක් අතර කාලයට වැඩිද කියල බලනව. එහෙමනම් එම කාලය අඩු කර ඊලග frame එක අර ෂිට් එකෙන් ලෝඩ් කරනවා.

අද ලිපියෙන් මේපමණයි. ඊලග ලිපියෙන් input දෙන හැටි බලමු. එතකොට පුළුවන් කීබෝඩ් සහ මවුස් එක පාවිච්චි කරලා අපේ රුප හසුරුවන්න. ඔබ සැමට ජය.. 🙂

(මෙවර වැඩසටහන මෙතනින් ගන්න)

Read more from Articles, Guides, How To
7 Comments Post a comment
  1. KOGA
    Mar 6 2013

    Gret work Machan. Keep it up!

    Reply
  2. KOGA
    Mar 6 2013

    Great Work Machan. Keep it up !

    Reply
  3. Prasad
    Mar 6 2013

    Thanks machn 🙂

    Reply
  4. Sameera
    Mar 9 2013

    මේ පාඩම් මාලාව අවසන් වෙනකන් කරගෙන යන්න අවශ්‍ය ධෛර්ය, ශක්තිය ලැබේවා කියා එක සිතින් ප්‍රර්ථනා කරනවා. පුලුවන් නම් Screen Shots සහ Videos එක්ක කරන්න. එතකොට පාඩමේ ආර්ශනීබ බවත් එකකම බලන අයට තවත් පැහැදිලි බවත් තව වැඩි වෙයි.

    Reply
    • Prasad
      Jun 7 2013

      Dan enne video 🙂

      Reply
  5. kasun
    Mar 11 2013

    meepaadam ekka screenshot tkakuth podiyata demmanum.meegenaawa boodatak nethi ayata godak pahasuwei.

    Reply
  6. Prasad
    May 26 2013

    ඔයාලගේ අදහස් වලට ගොඩක් ස්තුතියි. අපි ඉලග එකෙ ඉදල විඩියො වලට මාරු වෙනවා. එතකොට තවත් ලෙසිනෙ 🙂

    Reply

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

-->