You can install plugin directrly from the Cocos Store https://store.cocos.com/app/en/detail/5341
After downloading the plugin, open your project in Cocos Creator or create a new one. In the upper panel, hover over Extension and select Extension Manager.
Next, hover over Import Extension File(.zip) and select the plugin you downloaded previously from the pop-up menu.
You will most likely see messages like the ones below after installing the plugin. That’s because Yandex Games requires Yandex Games SDK to be imported directly in files like index.html, which appear after compilation.
To solve this problem, visit the new Yandex Games SDK section and select the option to generate templates so the plugin generates the necessary templates by itself. You can also write them yourself.
If the templates are compiled successfully, the plugin should output a message like the one below to the console. It means everything is fine and you can get to work.
For more detail: customization of build templates, customization of Cocos Creator web preview
After installing the plugin, you’ll find the ysdk object, which is a typed equivalent of the eponymous object from the Yandex Games SDK. It lets you access all the SDK methods.
Here’s an example of how to use environment variables from the Yandex Games SDK.
import { Component } from "cc";
import { ysdk } from "db://yandex-games-sdk/ysdk";
const { ccclass, property } = _decorator;
@ccclass("YourGameComponent")
export class YourGameComponent extends Component {
start() {
console.debug(`App ID: ${ysdk.environment.app.id}`);
console.debug(`User Language: ${ysdk.environment.i18n.lang}`);
console.debug(`URL Payload: ${ysdk.environment.payload}`);
}
update(deltaTime: number) {}
}For example, let's write a component for a button that plays a rewarded ad.
We’ll also add the OnReward method and pass it as a callback for the add.adv.showRewardedVideo() method to add logic to the reward event.
import { _decorator, Button, Component } from "cc";
import { ysdk } from "db://yandex-games-sdk/ysdk";
const { ccclass, property, requireComponent } = _decorator;
@ccclass("RewardADButton")
@requireComponent(Button)
export class RewardADButton extends Component {
start() {
this.node.on("click", this.onClick.bind(this));
}
onClick() {
const callbacks = {
onRewarded: this.onReward.bind(this),
};
ysdk.adv.showRewardedVideo({ callbacks });
}
onReward() {
// Reward user
}
}When you click the button with this component on the Yandex platform, you’ll now see an ad. You can read through the Testing section for simplified testing.
Translations are stored in the JSON format inside the project, and we strongly recommend using it to edit them.
After you install the plugin in the Yandex Games SDK section, click the Localization Editor option.
The editor will look pretty empty at first. That’s because you need to create your first localization, which you can do by clicking the New button in the upper left corner.
You’ll see a modal window that lets you select a language. When you’re done, click Create JSON file!
For example, let's choose English (en) and enter the following in the editor.
{
"title": "best game in the world 2"
}Click the Save button to save your localization and check it out in the game.
Localization can be applied in two ways: through the l10n.t() method or through a smart localization component.
Let's try using the l10n.t() method first. Create a new component and enter the following inside it:
import { _decorator, Component, Label } from "cc";
import { l10n } from "db://yandex-games-sdk/ysdk";
const { ccclass, requireComponent } = _decorator;
@ccclass("ButtonLozalizationTest") // Component name
@requireComponent(Label) // Dependency on the Label component
export class ButtonLozalizationTest extends Component {
onLoad() {
const label = this.getComponent(Label); // Getting the Label component
label.string = l10n.t("title"); // We set the Label to the text that we received from the previously declared key.
}
}Once you create a node with a Label component on the stage, you can localize it by dragging and dropping the component into the node.
If you don’t want to reinvent the wheel, there’s a ready-made component in the plugin that renders the key directly in the editor. You don't have to compile the project to see how it looks since it’s automatically updated when changes are made in the translation editor.
Click the Add Component button for the node you‘re interested in, scroll to the YandexGamesSDK group, and select L10nLabel.
You can now enter your key in the Key field and admire the result. No matter how you modify the localization, it will change right there in front of you.
Games can be run on the platform from a local server to simplify development and testing for SDK-related functionality.
Please note that you’ll need to add a draft of the game using the Yandex Games console.
The first thing to do is configure the project build in the Project → Build panel.
In the window that appears, click New Build Task to create a new configuration for the build.
Configure the settings. You’ll generally want to include the Source Maps and Debug items to make debugging easier.
Once setup is complete, click the Build button to build the project.
Next, go to the folder where your project is located. You’ll find a folder structured like this:
Project name/
└── build/
└── debug/
├── ...
└── index.html
The next step is to configure a local server. Here’s one way to do that:
- Install npm by following the instructions on Node.JS. Use
npmto installhttp-server:
> npm install -g http-server
-
Go to the build folder and use openssl to create a certificate and a private key:
> cd PATH_DO_PROJECT/build/ > openssl genrsa 2048 > key.pem > openssl req -x509 -days 365 -new -key key.pem -out cert.pem # fill in the required information -
Start the local server:
> npx http-server -S -C ../cert.pem -K ../key.pem -o --port 6577 Starting up http-server, serving ./ through https ... Available on: https://127.0.0.1:6577 Hit CTRL-C to stop the server
With your local server running, you can test your game using this link, where XXXXXX is your draft’s code:
https://yandex.ru/games/app/XXXXXX?draft=true&game_url=https://localhost:6577
If you want to test a newer version, you can just reassemble the project in the **Build** panel without changing anything and reload the page at the end of the build.
