Game Developer

Slotty Core

Guideline

1. Clone git repository and create new project

1. CREATE NEW PROJECT GAME SLOTTY

Step 1: Clone repository at  http://git.mecury.com.vn:7990/projects/COCCOR, using software SourceTree

• Then, the browser will direct to open SourceTrees software. Set name folder project follow name folder of repository Example: “coc-roma-legacy”

  ---

Step 2: Create an empty Cocos project. Set location to any path beside the one from repository (since Cocos doesn’t allow creating project on a non-empty folder)

• Then, move all files in that empty project to the repository folder, EXCEPT file .gitignore and folder packages

Step 3:  Add core slotty and template game slotty

• To add submodules, open SourceTree Terminal and type these commands to add submodules.

Core game consists of many submodules:

• Use these following commands to clone main submodules :

• git submodule add -f ../../coccor/hyper-editor-package.git packages
• git submodule add -f ../../coccor/game-core-template.git assets/core-assets/game-core
• git submodule add -f ../../coccor/hyper-slot-template.git assets/core-assets/hyper-core
• git submodule add -f ../../coccor/base-slot-template.git assets/core-assets/slotty-core

• Hyper games have 2 styles: chinese theme and international theme.

These are commands for submodules of sound, dialog, coin shower for game chinese style:

• git submodule add -f ../../coccor/hyper-wintune-chinese.git assets/core-assets/hyper-wintune-chinese
• git submodule add -f ../../coccor/hyper-coin-shower-chinese.git assets/core-assets/hyper-coin-shower-chinese
• git submodule add -f ../../coccor/hyper-dialog-chinese.git assets/core-assets/hyper-dialog-chinese

These are commands for submodules of sound, dialog, coin shower for game international style:

• git submodule add -f ../../coccor/hyper-wintune-international.git assets/core-assets/hyper-wintune-international
• git submodule add -f ../../coccor/hyper-coin-shower-international.git assets/core-assets/hyper-coin-shower-international
• git submodule add -f ../../coccor/hyper-dialog-international.git assets/core-assets/hyper-dialog-international

• These are commands for submodules of landing sound, effect win border and border tension, hyper jackpot. Depends on game design, some modules are not needed:

• git submodule add -f ../../coccor/hyper-jackpot-package.git assets/core-assets/hyper-jackpot
• git submodule add -f ../../coccor/hyper-win-border-and-tension.git assets/core-assets/hyper-win-border-and-tension
• git submodule add -f ../../coccor/hyper-scatter-landing-sound.git assets/core-assets/hyper-scatter-landing-sound

• All submodules need to use master branch to be stable and safe for development. Use these git command to fetch all master branch for all submodules:

• git submodule foreach git checkout master
• git submodule foreach git pull
  

• After adding submodules, commit and push all submodules just cloned. SourceTree look like:1

Step 4: Set up custom Cocos engine for new project

• Clone custom engine repository from this link.
• Open the project. To configure custom engine for Cocos, select menu Project > Project Settings

• Choose Custom Engine and set path to the custom engine. Click Save and restart Cocos.

Step 5: Set up game-assets folder

• Create folder game-assets includes many folders: editor, fonts, messages, prefabs, scenes, scripts, sounds, textures
  
• Copy all scenes from assets/core-assets/hyper-core/scenes to assets/game-assets/scenes. And remove ‘template’ in name of all scenes
  

  ---

• Create script custom-scale-data.js in assets/game-assets/scripts/custom-scaler. The script save values scale of atlas, they are used to calculate original size after developer optimize asset by scaling down atlas.
  

  ---

2. ASSETS

1. File naming convention

• Sound:

• Sound sfx: sfx-[name]
• Song background: bgm-[name]

• Font:

• All font bitmap and ttf: fnt-[name]

• Image:

• Name of image put in the following form: abc-def-..... Can add more ‘-’ for clear meaning
• Name of animation put in the following form: anim-[name animation]_[xx]. [xx] is ordinal numbers

        Some special case must follow 

• Image for symbol: [name symbol] depends on server game

• sym-[name symbol] : file name for symbol
  
• sym-mini-[name symbol]: use to show win line on notification
  
• anim-sym-[name symbol]_xx: usually for naming  animation symbol when show win line
  
• anim-landing-[name symbol]_xx: usually for naming animation symbol scatter, bonus appear when stop spin
  

2. Folder structure  of raw assets

• Create folder raw-assets at C:\Projects\coc-name-project.
• Folder raw-assets contains  fonts, textures, tps folders.
  

• Folder fonts contain raw images to create fonts.
• Folder textures contain raw images to pack into atlases:

• Basic structure for normal game assets
  

• Folder tps contain file .tps of software Texture Packer. Tree folder can same as tree folder of texture

  ---

1. Asset folder path

• Format: …\assets\game-assets\textures\[platform]\[type download]\[Scene name or feature group]

• Platform : mobile or desktop
• Type download:
          preload: the necessary assets of that scene/feature, they need to be downloaded before we load scene/feature
  
  
          postload: the other assets of that scene/feature, it will be downloaded after the scene/feature is loaded.
  
• Scene name or feature group: some basic name: loading, main-game, free-game, gamble, pickup, bonus

2. Custom scale

• We need to take the game platform into consideration, which is desktop and mobile. We need to have separate scaling for each platform.   Texture Packer Scaling Variants feature can help us setup asset scaling more easily.

• The scaling values are set as following:

• Normal Scale use for assets that need to be displayed as clearly as possible. For example:  text image, static image of animation, symbols… NOTE: If atlas uses Normal Scale, asset folder path need to change:  …\assets\game-assets\textures\[platform]\[type download]\ [Scene name or feature group]\custom-scale\<atlas-name>
• Optimized Scale use for big assets: background, reel frame, animation… Most of them don’t need to be displayed clearly to every tiny detail, thus are scaled down more to reduce game size

3. Pack asset

• Software: Texture Packer 4.8.0
• There are several steps to pack assets into an atlas. Take this symbol asset as an example

• Step 1: Put raw assets into folder raw-assets/textures

• Step 2: Open Texture Packer, create file .tps to pack atlas in folder raw-assets/tps
  Scaling variants: Assets of symbols need to be cleared, so we set the scaling variant to normal scale.
  Data file:  Specified in asset folder path. Variant name similar folder platform, so it can be replaced into {v} . Example: C:\ProjectCocos2022\coc-roma-legacy\ assets\game-assets\textures\desktop\preloads\main-game\custom-scale
  Algorithm : MaxRects.
  Max size : 2048.
  Trim mode: Trim

• Step 3: Pack atlas

Press button Publish sprite sheet to begin packing process. When it is done, the dialog should notify that the process is completed. There should be a plist and a png appear in the folder according to the Data file path described above        

NOTE: After packing ALL assets into atlases, we open the project to config data for new assets to use in-game.

_ Custom scale data: Choose menu P4FEditor > asset-manager > Generate Custom Scale

_ Merge Json Files: Choose menu P4FEditor > asset-manager > Merge Json Files

_ Remove Packable Texture: Choose menu P4FEditor > asset-manager > Remove Packable Texture

_Compress Texture: Choose menu P4FEditor > asset-manager > Compress Texture Format

3. SCENES: 

1. Preview scene

• This scene is only used during game development. It supports setting up connection to specified Environment: LOCAL, SAT, DEMO.

• LOCAL:
• DEMO: This is the environment similar to  https://gaming-world.joker88.club/ . Game will run using a demo account. In this environment, game outcomes can be selected to force the game server to return certain results for testing purposes. Some features will not be available such as: history, jackpot, etc…
• SAT: This is the environment similar to  http://fns.joker88.club/. Game will run using a specified account available on SAT. All server features are available with the exception of setting outcome.

  ---

2. Preload scene

• This scene contains data to be used to load game assets. The loading assets process can be divided into 2 phases: preload and postload. Based on the selected platform (desktop or mobile) and locale settings, the game may load different assets.

• After packing a new atlas, we must update data for scene preload. Choose menu P4F Editor > preload-hyper > Load All Above

3. Loading scene

• The scene is shown when the game starts and downloads assets of the main game.
• Here are the steps to create the loading scene:

• Step 1: Prepare raw assets. Copy raw assets to ...\raw-assets\textures\loading and divide into 4 folders: animation, loading-background, loading, loading-extra

• animation: contains all animations in the loading scene. File name of a frame is “image1_xx”. Example: image1_00.

• loading: includes assets for loading bar, button, check box

\

• loading-extra: includes asset logo, image static of description

• loading-background: includes image background for desktop and mobile

• Step 2: Set up file .tps and pack atlas

_ File image1.tps:

• Data file: …./assets/game-assets/textures/{v}/preloads/loading/image1_{n}.plist
• Scaling variants: Optimized Scale

_ File loading-background.tps: If all asset dont have transparent, we should pack atlas with type JPG, and quality = 100

• Data file: …./assets/game-assets/textures/{v}/preloads/loading/background.plist
• Texture format: JPG
• Scaling variants: Optimized Scale

_ File loading.tps: includes assets in folder loading and loading-extra

• Data file: …./assets/game-assets/textures/{v}/preloads/loading/loading.plist
• Scaling variants: Optimized Scale

• Step 3: Set up scene loading

After packing assets, we open scene loading. Choose menu P4F Editor > loading-hyper >  Create Loading 2 / 3 Items For New Games

• Step4: Check scene loading and Save scene

4. Normal spin on  MAIN SCENE

• The scene has many game objects enough to implement a game slotty.
• Handle  popup panel

• Step 1: Prepare raw assets of popup panel

• Step 2: Pack atlas of popup panel

_ File pop-up-panel.tps:

+Data file:
        …./assets/game-assets/textures/{v}/preloads/main-game/custom-scale/pop-up-panel.plist

+Scaling variants: normal scale. Popup panel only displays on desktop, so we only pack for desktop:

• Step 3:

_ Set up popup panel.

_And then deactivate node content in node popup-panel/hyper-confirm-dialog

• Handle background game

• Step 1: Prepare raw assets background game. Background game have 2 images for landscape and portrait scene

• Step 2: Pack atlas background

_ File background.tps for desktop:

+Sprites: only image background use for desktop

+Data file:
        …./assets/game-assets/textures/{v}/preloads/main-game/background-main-game.plist

+Scaling variants: optimized scale. Atlas  only displays on desktop, so we only pack for desktop:

_ File background-mobile.tps for mobile:

+Sprites: include 2 images background use for landscape and portrait scene

+Data file:
        …./assets/game-assets/textures/{v}/preloads/main-game/background-main-game.plist

+Scaling variants: optimized scale. Atlas  only displays on mobile, so we only pack for mobile:

• Step 3: Drag sprite background to component sprite frame

_ Use sprite background of desktop for 2 node background-container/background and gamble-loader/background-container/gamble-background-landscape

_ Use sprite background-portrait of mobile for 2 node mobile-background-portrait/node/ background and gamble-loader/background-container/ gamble-background-portrait

• Handle spin panel

• Set up background of spin panel: node reels-frame and spin-panel-frame

_ Prepare raw asset and pack atlas

+ Raw asset: Path ….\raw-assets\textures\main-game-ui\spin-panel

+ Pack atlas

Data file: …./assets/game-assets/textures/{v}/preloads/main-game/spin-panel.plist

Scaling variants: Optimized Scale

_ Drag sprite frame spin-panel-frame in atlas spin-panel.plist to node Canvas/main-view/game-view/spin-panel-frame/frame

• Set up spin panel

_ Step 1: Add script config for spin-panel

+ Create script slotty-item.js in folder assets/game-assets/scripts/slotty-data. Add code to init enum items. NOTE: SlottyItem.Wild and SlottyItem.Scatter was registered in core, so we don’t register again.

+Create script extend-slotty-setting.js in folder assets/game-assets/scripts/slotty-settings. Add code to config type pay line , and pattern not win

var DIContainer = p4fcore.require('di-container');

var BaseSlottySetting = p4fslot.require('slotty-setting');

var SlottyItem = require('slotty-item');

var SlottyParameter = p4fslot.require('slotty-parameter');

BaseSlottySetting.prototype._getDefaultTypePayline = function () {

    return SlottyParameter.TypePayline.Line;

};

BaseSlottySetting.prototype._getPatternNotWin = function () {

    return [

        [SlottyItem.Pic5, SlottyItem.Pic3, SlottyItem.Pic5, SlottyItem.Pic1, SlottyItem.Pic5,

        SlottyItem.Bonus, SlottyItem.Pic6, SlottyItem.Pic5, SlottyItem.Pic1, SlottyItem.Pic5,

        SlottyItem.Pic2, SlottyItem.Pic6, SlottyItem.Pic2, SlottyItem.Pic1, SlottyItem.Pic2

        ],

        [SlottyItem.Pic4, SlottyItem.Pic7, SlottyItem.Pic2, SlottyItem.Pic5, SlottyItem.Pic7,

        SlottyItem.Pic4, SlottyItem.Pic7, SlottyItem.Pic6, SlottyItem.Pic5, SlottyItem.Pic7,

        SlottyItem.Pic7, SlottyItem.Pic3, SlottyItem.Bonus, SlottyItem.Pic2, SlottyItem.Pic3

        ],

        [SlottyItem.Pic1, SlottyItem.Pic2, SlottyItem.Pic3, SlottyItem.Pic7, SlottyItem.Pic3,

        SlottyItem.Pic2, SlottyItem.Pic7, SlottyItem.Pic4, SlottyItem.Pic3, SlottyItem.Pic2,

        SlottyItem.Pic1, SlottyItem.Pic7, SlottyItem.Pic4, SlottyItem.Pic3, SlottyItem.Bonus

        ]

    ];

};

_ Step 2: Set sprite of symbols in Canvas/system/sprite-frame-provider by drag sprite frame of all symbols to array Sprite Frames

_ Step 3: Config reel-scroller-helper:

+ At node Canvas/main-view/game-view/spin-panel, set value for component reel-scroller-helper

+Cell Item Script Name: script attach for node cell-item

+ Scroller Script Name: script attach for node reel-scroller

+ Reel count and Row count: amount reel and row of spin panel

+ Cell Size: size of cell item

+ Cell Dim Color: color of image symbol on lose cell when show win line

+ Top Count, Bot Count: amount cell on top and bottom to fake scoll

_Step 4: Click checkbox Generate Panel to generate spin panel

_Step 5: Then, we will generate all other panels of spin panels: landing-panel, present-win-cell-panel, present-win-border-panel, tension-panel

+ landing-panel

+ present-win-cell-panel

+ present-win-border-panel

+tension-panel

Frame: Sprite frame of animation tension.

Size: Often equal size of a reel. Canvas/main-view/game-view/spin-panel/content/ reel-scroller-0

• Set up bottom bar desktop

_ Prepare raw asset

+ Raw asset includes 2 parts: static image and text image. Path ….\raw-assets\textures\bottom-ui-desktop

_ Pack atlas

+ Data file: …./assets/game-assets/textures/{v}/preloads/main-game/spin-panel.plist

+ Scaling variants: Optimized Scale

• àdsfsdaf

4. Scripting

1. Config slotty setting, slotty item, server-handler
2. Preview normal game