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

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

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

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

ที่เราสามารถ เคลื่อนที่ตัวละครได้จากการแตะหน้าจอ ตามตำแหน่งในแกน Y ของเกม ตัวละครก็จะเลื่อนขึ้นลงได้ใช่ไหมครับ ต่อมาเราจะมาทำฉากหลังซ้อนข้างหลังของตัวละครครับ ผมเลือกไฟล์ภาพฉากหลังคือ ไฟล์ 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

#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];
  }
}

-(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.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;
}

-(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];

1	[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);
         }
     }];
}

- (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;
}

@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];
}