First we need to modify the appdelegate. CPP file and set the resolution to the image size. The image background of our resource file is 480*800, so we need to set it

#include "AppDelegate.h"
#include "HelloWorldScene.h"

USING_NS_CC;

// Set designResolutionSize to 480 × 800
static cocos2d::Size designResolutionSize = cocos2d::Size(480.800);
static cocos2d::Size smallResolutionSize = cocos2d::Size(480.320);
static cocos2d::Size mediumResolutionSize = cocos2d::Size(1024.768);
static cocos2d::Size largeResolutionSize = cocos2d::Size(2048.1536);

AppDelegate::AppDelegate() {

}

AppDelegate::~AppDelegate() 
{
}

void AppDelegate::initGLContextAttrs()
{
    GLContextAttrs glContextAttrs = {8.8.8.8.24.8};

    GLView::setGLContextAttrs(glContextAttrs);
}

static int register_all_packages(a)
{
    return 0;
}

bool AppDelegate::applicationDidFinishLaunching() {
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(! glview) {#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)
        glview = GLViewImpl::createWithRect("Plane", Rect(0.0, designResolutionSize.width, designResolutionSize.height));
#else
        glview = GLViewImpl::create("Plane");
#endif
        director->setOpenGLView(glview);
    }

    // This code displays the FPS information in the lower left corner of the window, no need to display, give false
    director->setDisplayStats(false);
    director->setAnimationInterval(1.0 / 60);

    glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
    
	// This code is for screen adaptation, temporarily can comment out do not
	//Size frameSize = glview->getFrameSize();
    //// if the frame's height is larger than the height of medium size.
    //if (frameSize.height > mediumResolutionSize.height)
    / / {
    // director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
    / /}
    //// if the frame's height is larger than the height of small size.
    //else if (frameSize.height > smallResolutionSize.height)
    / / {
    // director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));
    / /}
    //// if the frame's height is smaller than the height of medium size.
    //else
    / / {
    // director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));
    / /}

    //register_all_packages();

    auto scene = HelloWorld::createScene();

    director->runWithScene(scene);

    return true;
}

void AppDelegate::applicationDidEnterBackground() {
    Director::getInstance()->stopAnimation();
}

void AppDelegate::applicationWillEnterForeground() {
    Director::getInstance()->startAnimation();
}

Copy the code

To implement background scrolling, I created a background class Bg here.

Bg.h

#pragma once
#include "cocos2d.h"
using namespace cocos2d;
// Background is a moveable Sprite
class Bg : public Sprite {
private:
	float speed;
public:
	static Bg* create(a);// Create a method
	bool init(a) override;// The initialization method
	void update(float dt);
	Bg();
	~Bg();
};
Copy the code

Bg.cpp

#include "Bg.h"

Bg::Bg() :speed(100) {
}

Bg::~Bg() {

}

Bg* Bg::create() {
	//1. Apply for Bg memory
	Bg* ret = new(std::nothrow) Bg();
	//2. Check that ret is not empty and initialization succeeds
	if (ret && ret->init()) {
		//3. Add to the automatic release pool
		ret->autorelease();
		return ret;
	}

	delete ret;
	ret = nullptr;
	return ret;
}

bool Bg::init() {
	// Call the parent Sprite's initWithFile method
	if(! Sprite::initWithFile("image/bg/bg1.jpg")) {
		return false;
	}
	// Set your own anchor points
	setAnchorPoint(Vec2(0.0));
	// Enable the default scheduler
	scheduleUpdate();
	return true;
}

void Bg::update(float dt) {
	// Background scroll down
	float y = getPositionY();
	y = y - speed * dt;
	// The current background y<= the height of the image
	float h = getContentSize().height;

	if (y <= -h) {
		// To avoid gaps, we need to make a judgment on the Y-axis
		y = y + h * 2;
	}
	setPositionY(y);
}

Copy the code

In the bg.h file I overwrote the default scheduler method because background scrolling is an operation that needs to be performed all the time and is best placed in the scheduler. The idea behind background scrolling is that the image will keep moving down, and when the image is out of the screen, move it to the top of the screen, and then move it down.

Write the logic to create the background in helloWorldScene.cpp

#include "HelloWorldScene.h"
#include "Bg.h"

USING_NS_CC;

Scene* HelloWorld::createScene() {
	auto scene = Scene::create();
	auto layer = HelloWorld::create();
	scene->addChild(layer);

	return scene;
}

bool HelloWorld::init() {
	if(! Layer::init()) {return false;
	}

	Size visibleSize = Director::getInstance()->getVisibleSize();
	Vec2 origin = Director::getInstance()->getVisibleOrigin();

	// Create background
	for (int i = 0; i < 2; i++) {
		Bg* bg = Bg::create();
		float h = bg->getContentSize().height;
		bg->setPositionY(i * h);
		this->addChild(bg, 0);
	}

	return true;
}
Copy the code

Since background scrolling can’t be done with one image, we need two, with the second image set to the height of the first image. The moment the first image moves off the screen, the second image moves down, and then the first image moves above the second image, thus achieving the effect of background scrolling