Cocos2d-x display Chinese and Subtitle scroll-Game Development "zhao Yun to fight" (14), cocos2d scroll bar

Source: Internet
Author: User
Tags textout

Cocos2d-x display Chinese and Subtitle scroll-Game Development "zhao Yun to fight" (14), cocos2d scroll bar

Here is Lin bingwenEvankakaWelcome to the discussion and exchange ~~~~~~

Reprinted please indicate the sourceHttp://blog.csdn.net/evankaka
This article will solve the problem of garbled characters when displaying Chinese characters in the Cocos2d-x, and implement a subtitle scroll function, this function is achieved through the mask.

Cocos2d-x version: 2.2.5

Project Environment: Windows 7 + VS2010

Open Method: place the project in the project folder under the cocos2d-x installation directory open with

Let's take a look at the effect:


Using visual studio to develop cocos2d-x in a windows environment, because visual studio defaults to the GBK format, while the cocos2d-x engine defaults to the UTF-8, if useful to Chinese, garbled characters may occur during game operation. There are three solutions to this problem:

(1) Save the source code file in UTF-8 format (it is not recommended to fix the symptoms)

(2) write your own encoding and conversion code, and manually convert the Code where the Chinese characters are used.

(3) Save the displayed text as a text file (the file is encoded as UTF-8), which is managed by the unified system module to read and display the text. This method is recommended for later system maintenance, and internationalization. (Not written here)

The first method is very simple. We will introduce 2nd methods below. The 3rd types have not been written yet.

1. Write your own encoding and conversion code, and manually convert the code in Chinese.

The cocos2d-x Development Kit has built-in iconv library for encoding conversion, header file "iconv. h ". The iconv command can convert a known character set file to another known character set file. It is used to convert text internal codes between multiple international encoding formats.

1. directly write the code into the desired place

We recommend that you do this only once.

(1) first, create a new project, and then add the header file # include "iconv/iconv. h"/In HelloWorldScene. cpp "/,

(2) then add global functions in HelloWorldScene. cpp (remember to put them at the top of all functions, or define the function at the top)

bool IConvConvert(const char *from_charset, const char *to_charset, const char *inbuf, int inlen, char *outbuf, int outlen){iconv_t cd = iconv_open(to_charset, from_charset);if (cd == 0) return false;const char **pin = &inbuf;char **pout = &outbuf;memset(outbuf,0,outlen);size_t ret = iconv(cd,pin,(size_t *)&inlen,pout,(size_t *)&outlen);iconv_close(cd);return ret == (size_t)(-1) ? false : true;}std::string IConvConvert_GBKToUTF8(const std::string& str){const char* textIn = str.c_str();char textOut[256];bool ret = IConvConvert("gb2312", "utf-8", textIn, strlen(textIn),textOut, 256);return ret ? std::string(textOut) : std::string();}

An error is reported after running:

Error LNK2019: Unable to parse the external symbol _ libiconv_close

Error LNK2019: Unable to parse the external symbol _ libiconv

Error LNK2019: the external symbol _ libiconv_open that cannot be parsed

Fatal error LNK1120: 3 External commands that cannot be parsed

Solution: because you have not added the libiconv. lib File

Choose Project Properties> Configuration Properties> linker> input> Add libiconv. lib to add additional dependencies.

As follows:


(3) usage:

In use, I add it in init ().

Std: string str = IConvConvert_GBKToUTF8 ("I'm Lin bingwen Evankaka ~~ \ N welcome to my world ~~~ "); CCLabelTTF * pLabel = CCLabelTTF: create (str. c_str (), "Arial", 24); pLabel-> setPosition (ccp (origin. x + visibleSize. width/2, origin. y + visibleSize. height-pLabel-> getContentSize (). height); this-> addChild (pLabel, 1 );

(4) effect:


2. a separate text conversion File

Save it as the. h header file separately and use include in the cpp file for encoding conversion. This method is recommended if it is frequently used.

Remember to add libiconv. lib in Project Properties> Configuration Properties> linker> input> Add dependency

(1) create a file named ChineseString. h In the class folder and add it to the project.

# Ifndef _ ChineseString_H _ # define _ ChineseString_H _ # include "iconv/iconv. h "// remember to add static char g_GBKConvUTF8Buf [5000] = {0}; class ChineseString {public: static const char * GBKToUTF8 (const char * strChar) // convert the string to the UFT-8iconv_t iconvl; iconvl = iconv_open ("UTF-8", "gb2312"); if (iconvl = 0) {return NULL ;} size_t strLength = strlen (strChar); size_t outLength = strLength * 4; size_t copyLength = outLength; memset (g_GBKConvUTF8Buf, 0, 5000); char * outbuf = (char *) malloc (outLength); char * pBuff = outbuf; memset (outbuf, 0, outLength); if (-1 = iconv (iconvl, & strChar, & strLength, & outbuf, & outLength) {iconv_close (iconvl); return NULL;} memcpy (bytes, pBuff, copyLength); free (pBuff); iconv_close (iconvl); return g_GBKConvUTF8Buf ;}}; # endif
(2) usage:

Add the header file ChineseString. h (remember to add it !)

Then

CCLabelTTF * pLabel = CCLabelTTF: create (ChineseString: GBKToUTF8 ("<span style =" font-family: Arial, Helvetica, sans-serif; "> I am Lin bingwen Evankaka ~~ \ N welcome to my world ~~~ </Span> ")," Arial ", 24); <pre name =" code "class =" cpp "> pLabel-> setPosition (ccp (origin. x + visibleSize. width/2, origin. y + visibleSize. height-pLabel-> getContentSize (). height); this-> addChild (pLabel, 1 );

(3) Effect 

Ii. Subtitle scrolling

Subtitle Scrolling should be visible within a specific range, but not within this range. The implementation here is actually very simple, through CCClippingNode. CCClipingNode is a crop node, which is easy to understand:

(1) It is a node that inherits from CCNode, so it can be put into CCLayer, CCScene, and CCNode like a common node.

(2) As a node, it can be used as a container to carry other nodes and genie. I call it the baseboard.

(3) If you want to crop a node, You need to specify the cropping part. This cropping area is called a template.

Therefore, the CCClipingNode cropping node is composed of the Bottom Plate + template, while the display is equal to the bottom plate-template. I don't know if this explanation is better understood.

A class is directly created here, and the newly created Chinese conversion header file is used. This is the header file GameString. h.

# Ifndef _ GameString_SCENE_H __# define _ GameString_SCENE_H __# include "cocos2d. h "# include" cocos-ext.h "# include" ChineseString. h "# include" HelloWorldScene. h "// This is the header file USING_NS_CC; USING_NS_CC_EXT; class GameString: public cocos2d: CCLayer {public: virtual bool init (); static cocos2d: CCScene * scene (); CREATE_FUNC (GameString); // call void RollEnd () after subtitle scrolling is complete; // skip the event void menuCloseCallback (CCObject * pSender );}; # endif/_ GameString_SCENE_H __

This is the implementation file GameString. cpp

# Include "GameString. h "CCScene * GameString: scene () {CCScene * scene = CCScene: create (); GameString * layer = GameString: create (); scene-> addChild (layer); return scene;} bool GameString: init () {if (! CCLayer: init () {return false;} CCSize visibleSize = CCDirector: sharedDirector ()-> getVisibleSize (); CCPoint origin = CCDirector: shareddire () -> getVisibleOrigin (); // Add a button CCMenuItemImage * pCloseItem = parameters: create ("exct.png", "exct.png", this, menu_selector (GameString: menuCloseCallback )); pCloseItem-> setPosition (ccp (visibleSize. width-80, visibleSize. height-60); CCMenu * pMenu = CCMen U: create (pCloseItem, NULL); pMenu-> setPosition (CCPointZero); this-> addChild (pMenu, 1); // Add the background CCSprite * pSprite = CCSprite :: create ("enter.png"); pSprite-> setPosition (ccp (visibleSize. width/2 + origin. x, visibleSize. height/2 + origin. y); this-> addChild (pSprite, 0); // create the text CCLabelTTF * pLabel = CCLabelTTF: create (ChineseString :: GBKToUTF8 ("I'm Lin bingwen Evankaka ~~ \ N this is the game "zhao Yun to fight" \ n welcome to my world ~~~ \ N I am Lin bingwen Evankaka ~~ \ N this is the game "zhao Yun to fight" \ n welcome to my world ~~~ \ N I am Lin bingwen Evankaka ~~ \ N this is the game "zhao Yun to fight" ")," Arial ", 25); pLabel-> setAnchorPoint (CCPointZero); ccColor3B color = ccc3 (255,255, 0 ); pLabel-> setColor (color); pLabel-> setPosition (ccp (50,-200); // note that the Y axis is negative, and the X axis corresponds to 50 of point [4] below, align them // draw the CCDrawNode * shap = CCDrawNode: create (); CCPoint point [4] = {ccp (50, 0), ccp ), ccp (400,200), ccp (50,200)}; // you can modify the shap size according to the text-> drawPolygon (point, 4, ccc4f (255,255,255,255), 0, ccc4f (255,255,255,255); // draw a quadrilateral /// create a mask CCClippingNode * pClip = CCClippingNode: create (); pClip-> setInverted (false ); pClip-> setstencel (shap); // you must have it. If yes, pClip-> addChild (pLabel); this-> addChild (pClip ); // start to scroll the subtitles. CCMoveBy * moveact = CCMoveBy: create (10.0f, CCPointMake (0,400); // move up CCCallFunc * callFunc = CCCallFunc :: create (this, callfunc_selector (GameString: RollEnd); // creates a callback action. After the text is floated, CCActionInterval * act = CCSequence: create (moveact, callFunc, NULL ); // create a continuous action pLabel-> runAction (act); return true;} void GameString: RollEnd () {CCDirector: shareddire()-> replaceScene (HelloWorld :: scene (); // enter the main game interface} void GameString: menuCloseCallback (CCObject * pSender) {RollEnd (); // click to skip to directly enter the main game interface}

Effect:

(1) go to the main game page after subtitle scrolling.


(2) Click to skip and enter the main game page.





Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.