AdvanceAndroid DeveloperArticle for GamerBeginningDeveloperFacebook DeveloperFeaturedGame DevelopmentGame DevelopmentiOS DeveloperJust UserNewbieObject Oriented TechnologyObjective COpen OfficeOpen Source GameProgramming Language

เขียนเกมบน iPhone ด้วย Sprite Kit การสร้างฉาก Background ให้เลื่อนได้

ขั้นตอนการพัฒนาแอพพลิเคชันเกมบน iPhone ด้วย Sprite Kit สำหรับการเคลื่อนฉาก Background ของเกมให้เคลื่อนไปมาจากตำแหน่งขวาไปซ้ายของฉากในเกมประกอบกับซ้อนตัวละคร 

บทความนี้จะต่อเนื่องจากบทความที่แล้วครับ คือบทความ เขียนเกมบน iPhone ด้วย Sprite Kit กับวิธีควบคุมตัวละคร

บทความก่อนหน้า https://www.daydev.com/2014/iphone-game-ios-sprite-kit-move-1.html
บทความก่อนหน้า https://www.daydev.com/2014/iphone-game-ios-sprite-kit-move-1.html

ที่เราสามารถ เคลื่อนที่ตัวละครได้จากการแตะหน้าจอ ตามตำแหน่งในแกน Y ของเกม ตัวละครก็จะเลื่อนขึ้นลงได้ใช่ไหมครับ ต่อมาเราจะมาทำฉากหลังซ้อนข้างหลังของตัวละครครับ ผมเลือกไฟล์ภาพฉากหลังคือ ไฟล์ bg.png

ไฟล์ bg.png
ไฟล์ bg.png

เราต้องทำการสร้าง Static Vector สำหรับฉากหลังของเราก่อนครับ ประกาศที่ไฟล์ MyScene.m เลยครับตำแหน่ง Header ของไฟล์ครับ

#import "MyScene.h"

static const uint32_t heroCategory = 0x1 << 0;
static const uint32_t obstacleCategory = 0x1 << 1;

static const float BG_VELOCITY = 100.0;
static inline CGPoint CGPointAdd(const CGPoint a, const CGPoint b)
{
return CGPointMake(a.x + b.x, a.y + b.y);
}

static inline CGPoint CGPointMultiplyScalar(const CGPoint a, const CGFloat b)
{
return CGPointMake(a.x * b, a.y * b);
}

@interface MyScene()<SKPhysicsContactDelegate>

@end

ตรวจสอบความเรียบร้อยของ Code ที่เราเพิ่มเข้าไปครับ ต่อจากนี้ก็จะเป็นส่วนของการ เอากราฟิก bg.png ไปใช้กับเมธอดที่ชื่อ initalizingScrollingBackground() ครับ

-(void)initalizingScrollingBackground
{
  for (int i = 0; i < 2; i++) {
     SKSpriteNode *bg = [SKSpriteNode spriteNodeWithImageNamed:@"bg"];
     bg.position = CGPointMake(i * bg.size.width, 0);
     bg.anchorPoint = CGPointZero;
     bg.name = @"bg";
     [self addChild:bg];
  }
}

เรียก เมธอด initalizingScrollingBackground() ทันทีที่เมธอด -(id)initWithSize:(CGSize)size  โดยแก้ไขจากเดิมคือ

-(id)initWithSize:(CGSize)size {    
    if (self = [super initWithSize:size]) {
        self.backgroundColor = [SKColor whiteColor];

        self.physicsWorld.gravity = CGVectorMake(0,0);
        self.physicsWorld.contactDelegate = self;        

         [self addHero];    // เรียก add Hero
    }
    return self;
}

ให้เราแก้ไขให้เป็น

-(id)initWithSize:(CGSize)size { 
   if (self = [super initWithSize:size]) {
       self.backgroundColor = [SKColor whiteColor];
       [self initalizingScrollingBackground];

       self.physicsWorld.gravity = CGVectorMake(0,0);
       self.physicsWorld.contactDelegate = self;

       [self addHero];
     }
    return self;
}

นั่นคือการเรียก กราฟิก  Background มาปรากฏครับ

[self initalizingScrollingBackground];

เมื่อมีกราฟิก Background มาปรากฏแล้ว ต่อไปก็หนีไม่พ้นการทำให้มันขยับ โดยเลื่อนจากตำแหน่งขวาไปซ้าย และหมุนวนเป็น Palallax ไปเรื่อยให้เหมือนตัวละครเกมของเราเหาะอยู่บนอากาศครับ สร้าง เมธอดใหม่ขึ้นมา moveBG() ครับ

- (void)moveBg
{
    [self enumerateChildNodesWithName:@"bg" usingBlock: ^(SKNode *node, BOOL *stop)
     {
         SKSpriteNode * bg = (SKSpriteNode *) node;
         CGPoint bgVelocity = CGPointMake(-BG_VELOCITY, 0);
         CGPoint amtToMove = CGPointMultiplyScalar(bgVelocity,_dt);
         bg.position = CGPointAdd(bg.position, amtToMove);

         if (bg.position.x <= -bg.size.width)
         {
             bg.position = CGPointMake(bg.position.x + bg.size.width*2, bg.position.y);
         }
     }];
}

ประกาศตัวแปร เวลา สำหรับนับวินาทีเพื่อให้มันทำงานได้ที่ส่วนบนของ Code ครับ

@implementation MyScene
{
    NSTimeInterval _dt;

    NSTimeInterval _lastUpdateTime;
    NSTimeInterval _lastMissileAdded;
}

มีเมธอดในการเคลื่อนที่แล้วต่อไปคือการ วาง Interval นับเวลาให้มันเคลื่อนที่เองแต่ละวินาที ก็ต้องมีการใช้ เมธอด update() ที่ตัว Sprite Kit แถมมาให้เราครับ

-(void)update:(CFTimeInterval)currentTime {  
    if (_lastUpdateTime)
    {
        _dt = currentTime - _lastUpdateTime;
    }
    else
    {
        _dt = 0;
    }
    _lastUpdateTime = currentTime;

    [self moveBg];
}

ทดสอบลอง Run ตัวเกมของเราดูครับ

iOS Simulator Screen shot Mar 18, 2557 BE, 11.35.20 PM

จะเห็น ซุปเปอร์แมนกำลังบินอยู่อย่าง อาจหาญ ขอบคุณกราฟฟิกตัวละครจากเว็บไซต์ http://design.tutsplus.com

Source Code ดาวน์โหลดได้เลยที่นี่ครับ: http://adf.ly/gVFDd

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน