Bitcoin Catcher Box

A box has all you need to get started with our Cocos Creator (BitcoinCatcher) tutorial.

Getting Started

Setting up the development environment

There are a few technical requirements before we start. Please install the following:

• Git

• Cocos Creator

• Visual Studio Code

This project is not always brought up to date with the most recent version of Cocos Creator. Please make sure you are using Cocos Creator v2.1.

Unboxing the dApp

Install Punica CLI.

$ pip3 install punica

Unbox the bitcoin-catcher-box.

$ punica unbox bitcoin-catcher

Install dependency.

$ npm install

Running Cocos Creator

Windows

Run Cocos Creator by double-click the CocosCreator.exe file in the installation target folder or click Cocos Creator from Start menu to start Cocos Creator.

Mac

Run Cocos Creator by double-clicking the CocosCreator.app application icon.

For some Windows operating systems, the following error may be encountered:

This browser does not support WebGL ..

It means the GPU rendering is not supported by the graphics card driver.

If this happens, it is usually only need to ensure the official driver of the corresponding model of the graphics card has been successfully installed.

Opening Project

You can browse and open the project in the local file system by clicking the Open Other Projects button.

For some MAC operating system, the window can not be displayed when open the project, please Drag the CocosCreator.app from the DMG into the application, and then open it.

After initial building finished, please pay attention to the Assets panel, on which all the resource allocation graphs of the project are shown.

Cocos Creator uses a particularly structured folder as legitimate project marking, but it isn't a construction document. You only need to click the project folder when choosing the project.

Previewing Scene

To see a preview of the game scene, please click the Preview button at the top of the editor window.

What's Cocos Creator

Cocos Creator is a script development, entity-component and data-driven game development tool focused on content creation. An easy-to-follow content production workflow and a powerful suite of developer tools for game logic and high-performance game creation. For the more information, you can click here to read Cocos Creator User Manual.

Learning in Action

We have a smart contract in project contracts folder. Therefore, we needn't to write a new contract, only need to compile and deploy it.

Compiling the Smart Contract

We need to compile our Python contract to bytecode for the Neo Virtual Machine (NeoVM) to execute. Think of it as translating our human-readable Python into something the NeoVm understands.

In a terminal, make sure you are in the root of the directory that contains the dapp and type:

$ punica compile

If you encountering problems running this command, please open a issue in here.

You should see output similar to the following:

bitcoin_catcher
---------------
v Preparing to compile
v Compiling bitcoin_catcher.py
v Saving avm file...
---------------------------------------------------------
> Avm file written to bitcoin-catcher-box\build\contracts

Deploying the Smart Contract

Now that we've successfully compiled our contract, it's time to deploy it to the blockchain!

You'll see one JSON file already in the contracts directory config.json. In this file, the following information will be used in deploying process.

"deploy": {
    "name": "bitcoinCatcher",
    "version": "v1.0.0",
    "author": "NashMiao",
    "email": "[e-mail]",
    "desc": "https://github.com/punica-box/bitcoin-catcher-box",
    "needStorage": true,
    "payer": "ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6",
    "gasPrice": 500,
    "gasLimit": 21000000
}

Read more about migrations in the Punica Python documentation.

Back in our terminal, deploy the contract to the blockchain.

$ punica deploy

You should see output similar to the following:

v Sending transaction into network...
v Checking transaction status...

Deploy bitcoin_catcher.avm
---------------------------
> transaction hash:    7f83d9c6415fca1387439ce19b1c21796e0b4b6cd7b89706b420cadcfd9f4cde
> block height:        3024343
> nonce:               1628597378
> gas price:           500
> gas limit:           21000000
> payer:               ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6
> balance:             61 ONT, 91.881807095 ONG

> Saving transaction to chain.

bitcoin_catcher
---------------
> contract address: 90b6e37782ad5a2bfbca291e9ff32c5a5077c1e8
> name:             bitcoinCatcher
> email:            [e-mail]
> author:           NashMiao
> version:          v1.0.0
> description:      https://github.com/punica-box/bitcoin-catcher-box
--------------------------------------
You can invoke it by contract address.

Invoking the Smart Contract

Punica is very easy when it comes to smart contract invoking, in that function can be executed with only provide parameters in JSON file.

In contracts/config.json, the following information will be used in deploying process.

"invoke": {
    "address": "c27751df0927082000cb9cfb3a778da64dffa9c9",
    "defaultPayer": "ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6",
    "defaultSigner": "ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6",
    "sleep": 6,
    "gasPrice": 500,
    "gasLimit": 21000000,
    "functions": [
        {
            "register": [
                "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve",
                "NashMiao"
            ],
            "signers": [
                "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve"
            ],
            "payer": "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve",
            "event": [
                "utf8",
                "address",
                "utf8"
            ]
        }
    ]
}

To invoke register() function, you only need to back in our terminal.

$ punica invoke register

You should see output similar to the following:

Execute register
----------------

v Sending transaction into network...
v Checking transaction status...

> transaction hash:    86282c0fae42b08f12c023225c91595baabc03f2a6a7752a6c1aecf958535324
> block height:        3024378
> nonce:               1255641297
> gas price:           500
> gas limit:           21000000
> payer:               AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve
> balance:             211 ONT, 163.68873089000002 ONG

> Saving transaction to chain.

> Contract emit event:

  {
    "ContractAddress": "c27751df0927082000cb9cfb3a778da64dffa9c9",
    "States": [
      "register",
      "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve",
      "NashMiao"
    ]
  }

Using 'punica info tx 86282c0fae42b08f12c023225c91595baabc03f2a6a7752a6c1aecf958535324' to query all events in transaction.

To test the register() function, we can invoke get_user_nane() function to get the current value store in blockchain.

$ punica invoke get_user_nane

If test success, it should returns the given user_name. Therefore, you should see output similar to the following:

Prepare execute get_user_name
-----------------------------

v Sending transaction into network...
v Parsing result...

> gas:    20000
> state:  1
> result: NashMiao
> notify: []

Interacting with the Smart Contract

Desktop Browser

ontology-dapi is A lightweight Javascript library for interacting with Chrome Plugin which is integrated provider engine.

$ npm install ontology-dapi -S

We can use it as ES6 module in our game scene's script.

import { client } from 'ontology-dapi';

We can also use it as CommonJS/ES6 module in our game scene's script.

var client = require('ontology-dapi').client;

After we regist with Provider successful, we can use it in our project.

client.registerClient({});

Mobile Phone

cyano-bridge is library allows your dApp to interface with mobile wallet which is integrated provider engine.

$ npm install cyanobridge -S

We can use it as ES6 module in our game scene's TypeScript script.

import { client } from 'cyanobridge';

We can also use it as CommonJS/ES6 module in our game scene's script.

var client = require('cyanobridge').client;

After we regist with Provider successful, we can use it in our project.

client.registerClient();