DEV Community: ntop

How I create a Web3 project in 7 days.

ntop — Sun, 14 Nov 2021 07:04:05 +0000

I'm a totally newbie to the crypto world. I think most people in dev.to is same as me. As a web2 developer(they called us), this is the first time I know the term - Web3. What's web3? It confused me for a long time. If you ask me, I'll tell you that web3 is some tech stack from Ethereum, Which you can used to create DApp. (That's may not be right, I'm sure! And what is DApp?...)

Let's just throw away these confusing concept, I just tell what I did, What I learn.

What I did?

The project I created is a tool, which can be used to store money(crypto money) in NFT(What is NFT? 😂). You can play it at: https://redpacket.app/ .

I use react to create the frontend ui, and use web3js to interact with the Ethereum.

What I learn?

Ethereum
Solidity
Web3js

Ethereum is a blockchain, as you known blockchain is just an unchanged database. What Ethereum different from normal database is that Ethereum can run code, the code running on Ethereum called Smart Contract. So if you want to write something like a small program, in Ethereum world, you should write smart contract(like android's apk, or iOS's ipa).

Smart contract use Solidity as it native language. Solidity is a little like javascript, here is some code snippet:

/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 */
contract Storage {

    uint256 number;

    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }

    /**
     * @dev Return value 
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}

These code above store a number in the Ethereum blockchain. When you deployed the Solidity program(or smart contract) to Ethereum, how to use it? When we create an android application, we can install it in our smart phone, and open it/play it. But ethereum has no mobile application, if we want to play the program, we should use some library, one of these libraries is web3js. So you can also see web3js as a library to interact with ethereum.

Web3js provide api to call method of the smart contract. The last thing is to write some ui, then people can use it more friendly. I use react to create the website, at dev.to everyone know react, so I wont talk it more.

Now, you known the architecture of a mini DApp.

End

I always want to try some new tech, and blockchain is my new favor! There are so many concept in the crypto world, I'm sinking and enjoying.

One more thing: If someone know what I'm doing and have a MetaMask wallet, you can play the small project at develop mode: https://redpacket.app/send#dev at dev mode, you can switch to Ropsten testnet.

Sourecode：https://github.com/NFTRedpacket/redpacketv1

Use obj-c method swizzling in GoMobile iOS games

ntop — Tue, 02 Oct 2018 07:34:45 +0000

We have used gomobile to develop games for Android and iOS. But it's not easy to add new features like integrating Ads/Analytics. On Android, we can just unpack the Apk built with gomobile and use the .so directly in a new android project. But on iOS, it's impossible. I have written a post about how to integrate ads SDK weeks ago, you can found it here. In the post, I changed the gomobile's source code and patched with two hook method. These days, I found a new way, need no change of the source code, it's the magic of Object-C, called Method Swizzling.

Method swizzling provide a way to exchange the implementation a method, so, you can use it to add new feature to an existing class. Here is what we do:

@implementation GoAppAppController(AD)

+ (void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        Class class = [self class];

        SEL originalSelector = @selector(viewDidLoad);
        SEL swizzledSelector = @selector(kkViewDidLoad);

        Method originalMethod = class_getInstanceMethod(class, originalSelector);
        Method swizzledMethod = class_getInstanceMethod(class, swizzledSelector);

        BOOL success = class_addMethod(class, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod));
        if (!success) {
            method_exchangeImplementations(originalMethod, swizzledMethod);
        }
    });
}


- (void)kkViewDidLoad {
    [self kkViewDidLoad];

    // Initialize Google Mobile Ads SDK
    [GADMobileAds configureWithApplicationID:@"..."];
}

In the + (void)load method, I use method swizzling to exchange the implementation of GoAppAppController's viewDidLoad method and my kkViewDidLoad method. GoAppAppController is gomobile's implementation of UIViewController, you can found the source code in x/mobile/app/darwin_ios.m. In kkViewDidLoad method, I call [self kkViewDidLoad] to invoke the original viewDidLoad , than, call GADMobileAds to initialize my Admob Ads SDK.

That's all, it's very concise and easy! I also used it in my second game Unstable Tower, but, unfortunately, Apple say it's alike existing game in AppStore, so it did not pass the review. There is also an Android version, if you like it, you can download it in GooglePlay.

Port a Golang game to iOS

ntop — Thu, 06 Sep 2018 13:03:53 +0000

These days, I'm porting our Android game Shoot Stack to iOS. It's a game written in Golang with our own game engine. This article will give some tips and our experiences in poring Golang game to iOS. If you have ever used the GoMobile you know that gomobile build can build .app and install directly to an iOS device. But if you want to integrate third-party SDK, like ads, analytics, it's impossible with gomobile build. We need a way to build library, then we can use it in xcode and gomobile bind just do this.

Here is our project structure:

✗ tree .
.
├── arena.go
├── audio.go
├── build.md
├── color.go
├── file.go
├── flash_message.go
├── gameover.go
├── input_glfw.go
├── input_mob.go
├── main.go
├── particle.go
├── ready.go
└── welcome.go

yeah, it's all in a main package. Using gomobile bind command, we can build .framework file for xcode. But we still need a way to invoke the main method of our lib. All xcode project has a main.h file:

int main(int argc, char * argv[]) {
@autoreleasepool {
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}

So we can invoke our lib's main method here. As I said above, all my code stay in a main package, but GoMobile cann't bind file in main(it's just not supported). So I do have to change a little to my project:

✗ tree .
.
├── ios
│   └── ios.go
└── main
    ├── game
    │   ├── arena.go
    │   ├── audio.go
    │   ├── build.md
    │   ├── color.go
    │   ├── file.go
    │   ├── flash_message.go
    │   ├── gameover.go
    │   ├── input_glfw.go
    │   ├── input_mob.go
    │   ├── main.go
    │   ├── particle.go
    │   ├── ready.go
    │   └── welcome.go
    └── main.go

I put the source code in main/game package, then I can still use gomobile build to build Desktop and Android. Then I created ios/ios.go file, it's not a main file, so I can build it with gomobile bind, the content:

package ios

import (
   "korok.io/korok/gfx/dbg"
   "korok.io/korok"
   "korok.io/korok/math/f32"
   "main/game"
)

func Run() {
   dbg.DEBUG = dbg.None
   option := korok.Options{
      Width:360,
      Height:640,
      Clear:f32.Vec4{0,0,0,1},
   }
   korok.Run(&option, &game.StartScene{})
}

The method Run is same as the main.main():

func main() {
    dbg.DEBUG = dbg.None
    option := korok.Options{
        Width:360,
        Height:640,
        Clear:f32.Vec4{0,0,0,1},
    }
    korok.Run(&option, &StartScene{})
}

It's just created to easy the bind process. Now, we can use gomobile bind -target=ios ios to build a .framework. If all is OK, next, we can integrate the .framework to our xcode project(just drag it to xcode). Modify the main.h file as following:

#import "Ios/Ios.h"

int main(int argc, char * argv[]) {
    IosRun();
}

Build & Run, now the project (with Go inside) works.

How to add ads SDK?

Now, we have successfully created a library and used it in xcode project. If we want to integrate Ad SDK, we still need add some lifecycle hook in the original .m file used by GoMobile. In the package x/mobile/app, we can find a file darwin_ios.m, this is the file GoMobile used to build iOS application, there are two @interface defined here:

@interface GoAppAppController : GLKViewController<UIContentContainer, GLKViewDelegate>
@end

@interface GoAppAppDelegate : UIResponder<UIApplicationDelegate>
@end

I will hook the lifecycle method, so that I can use it in the xcode project:

@implementation GoAppAppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    ...
    [self kkDidFinishLaunching];
    return YES;
}
- (void)viewDidLoad {
    ...
    [self kkViewDidLoad];
}

Then create a file (ad.m) in the xcode project, add the following code:

@implementation GoAppAppDelegate(AD)
-(void)kkDidFinishLaunching {
    NSLog(@"hi, implemenmt method");
}
@end

@interface GoAppAppController(AD)
@end

@implementation GoAppAppController(AD)

- (void)kkViewDidLoad {
    NSLog(@"view did load2..");
@end

Here we used the Category in Obj-C language. It'll implement the method we used in 'darwin_ios.h'.

Build & Run, you should see the log info printed in Console.

Here is a snapshot of our game (with ad, but I'll remove it when release):

Integrate Ad SDK in Golang games

ntop — Fri, 31 Aug 2018 06:39:35 +0000

Days ago, I wrote an article about porting Golang project to Android with gomobile build command. These days, Our team has developed a new game, and we are going to integrate AD SDK to make money.

It's not easy to add java code to a Golang project, but if you think in the other way, we can simply copy the go binary to an Android project, that we can take this project as a normal Android project.

So here is the main step:

Create a new Android project
Copy the GoNativeActivity.java file to project (you can find the file in gomobile package)
Copy the .so to project
Configure the AndroidManifest.xml file to use your new Acitivity

That's all, Build and Run, you can see that the Android project has been running our Golang code. But where can I get these .so files? I just unzip the .apk built from gomobile build -target=android ./ command.

The next step is to add ads. Adding ads to this special project is no different from any Android project. Here, we add the Ad code in GoNativeActivity. Note that, GoNativeActivity has no view tree, we can't just add AdView as a subview. A way to solve this problem is to use a PopupWindow to contain the adview.

In fact, it's very simple:

// load adview
popup = new PopupWindow(this);
popup.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
// banner
AdView adView = new AdView(this);
popup.setContentView(adView);

// show ad at bottom of screen
popup.showAtLocation(getWindow().getDecorView(), Gravity.BOTTOM, 0, 0);

In my project, I integrated AdMob's Banner SDK. It works very well with test ad-uint-id. Here are screenshots of my game:

I have released the MAC version and Android version. You can get MAC version from itch.io: https://ntop.itch.io/shootingblock or download from GooglePlay: https://play.google.com/store/apps/details?id=io.korok.shootingblock

It's casual game, I really like the art style. (PS: Is there a way to close the ad remotely, it shows always. It seems AdMob doesn't provide a way to control frequency)

Just port a Golang game to Android

ntop — Sat, 18 Aug 2018 07:11:21 +0000

Months ago, @hajimehoshi wrote a post Go Packages we developed for our games, he use gomobile bind to port Go games to Android in his engine - ebiten. But here, I'll use gomobile build, gomobile build can pack .apk directly and need no other dependencies.

I have written a game engine to implement some basic game logic. But I won't talk about it (for anyone interested: https://korok.io) today, I'll talk about the problems we meet when using 'gomobile build' command.

Here is 2048 game I made:

You can get it on itch.io: The 2048 Game

How to make a fullscreen/NoTitleBar screen?

The first problem is to make a full screen, gomobile does't provide any configuration to do this. After reading the gomobile wiki, I know that I can create an AndroidManifest.xml file at the root directory in my project. gomobile will include it in android APK file.

This is the manifest file I used in my project:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          android:versionCode="1" android:versionName="1.0" package="io.korok.ad2048">
    <application android:label="2048 Game">
        <activity android:label="2048 Game"
                  android:name="org.golang.app.GoNativeActivity"
                  android:configChanges="keyboardHidden|orientation"
                  android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
                  android:screenOrientation="portrait">
            <meta-data android:name="android.app.lib_name" android:value="2048" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

In the file, android:theme="@android:style/Theme.NoTitleBar.Fullscreen" will make a full screen.

Where to store my game data ?

In my 2048 game, I need to store the score value in local storage. As an Android developer once, I known there are three ways to store data in Android:

File
SharedPreferences
SQLite

There is no wrapper method in Go. But, if I can find a writable file directory, I can use File system. After reading the source code of android.go, I see that gomobile has a environment value -- 'TMPDIR', which represent a temporary file directory(only works on Android):

var filepath = os.Getenv("TMPDIR")

Then, I can create file and store data.

How to get the system language?

If you installed my 2048 games, You'll find that it supports multi-language(Chinese and English), I implemented this by getting the system language. Getting system language is harder than getting a writable file path, it needs writing glue method: Go -> Cgo -> Java. I'll also lean JNI to call java method from C, fortunately, JNI is like java reflection, very easy！

Here is the code to get system language:

/*
#cgo LDFLAGS: -landroid

#include <jni.h>
#include <stdlib.h>
#include <string.h>

// Equivalent to:
// String lan = Locale.getDefault().getLanguage();
char* kk_getLanguage(uintptr_t java_vm, uintptr_t jni_env, jobject ctx) {
    JavaVM* vm = (JavaVM*)java_vm;
    JNIEnv* env = (JNIEnv*)jni_env;

    jclass locale_clazz = (*env)->FindClass(env, "java/util/Locale");
    jmethodID getdft_id = (*env)->GetStaticMethodID(env, locale_clazz, "getDefault", "()Ljava/util/Locale;");
    jobject locale = (*env)->CallStaticObjectMethod(env, locale_clazz, getdft_id);

    jmethodID getlang_id = (*env)->GetMethodID(env, locale_clazz, "getLanguage", "()Ljava/lang/String;");
    jobject lang = (*env)->CallObjectMethod(env, locale, getlang_id);
    const char* str = (*env)->GetStringUTFChars(env, (jstring) lang, NULL);
    char * retString = strdup(str);
    (*env)->ReleaseStringUTFChars(env, (jstring)lang, str);
    return retString;
}
 */
import "C"
import (
    "golang.org/x/mobile/app"
    "unsafe"

)

func Language() string {
    return deviceAttr.Lang(func() string {
        var ret string
        app.RunOnJVM(func(vm, jniEnv, ctx uintptr) error {
            cstring := C.kk_getLanguage(C.uintptr_t(vm), C.uintptr_t(jniEnv), C.jobject(ctx))
            ret = C.GoString(cstring)
            C.free(unsafe.Pointer(cstring))
            return nil
        })
        return ret
    })
}

Note: app.RunOnJVM method is a useful method to access JNI, the latest version of gomobile has this method.

The Back Key!

When I installed my game on an Android device, I found that it'll just exit if I press the Back key. It's not a normal behavior when I'm playing and touch the Back accidently. Most Android games will have a 'Double Click to Exit' mechanism to ensure you really want to exit the game.

The Good news is you can gets the key event from gomobile, the Bad news is gomobile just ignores the Back key. There is a function called convAndroidKeyCode in android.go which maps the Back key as Unknown. To solve the problem, I have to changes the code in gomobile, I did this in a new branch(thanks git!!).

// event/key/key.go
// generate different Codes (but the same Rune).
    Code Code

+   // Origin is the original value of the key code.
+   Origin int
+
    // Modifiers is a bitmask representing a set of modifier keys: ModShift,
    // ModAlt, etc.
    Modifiers Modifiers

// app/android.go
k := key.Event{
        Rune: rune(C.getKeyRune(env, e)),
        Code: convAndroidKeyCode(int32(C.AKeyEvent_getKeyCode(e))),
+       Origin: int(C.AKeyEvent_getKeyCode(e)),
    }
    switch C.AKeyEvent_getAction(e) {
    case C.AKEY_STATE_DOWN:

Adding a new filed 'Origin', I can use it to get the original key code value.

case key.Event:
    if e.Origin == 4 {
           // do something
    }

Note: The Back key's value is 4 on Android. You need also rebuild the gomobile tools to make it works.

I can get the Back key event, but the game still exit. To change the default Back key behavior on Android, need to override the OnBackPressed method in Acitivty class.

There is a java file in gomobile package called GoNativeActivity.java, this is where the Activity declared. Add the following method:

    @Override
    public void onBackPressed() {
        Log.e("Go", "Override Back key");
    }

Note: You need also regenerate the dex.go file with go run gendex.go, then rebuild the gomobile again.

How to Exit the app, manually?

Now, we override the default Back key event, and can get Back key event, what should we do next? A simple way to do this is call panic method, just kill the process with an exception. Or we can call the Activity.finish() method with glue method, I have written some JNI method, it not that hard.

/*
#cgo LDFLAGS: -landroid

#include <jni.h>
#include <stdlib.h>
#include <string.h>

// Equivalent to:
// Activity.Finish()
void kk_finish(uintptr_t java_vm, uintptr_t jni_env, jobject ctx) {
    JavaVM* vm = (JavaVM*)java_vm;
    JNIEnv* env = (JNIEnv*)jni_env;
    jclass clazz = (*env)->GetObjectClass(env, ctx);
    jmethodID finish_id = (*env)->GetMethodID(env, clazz, "finish", "()V");
    (*env)->CallVoidMethod(env, ctx, finish_id);
}
 */
import "C"
import (
    "golang.org/x/mobile/app"
    "unsafe"

)


func Quit() {
    app.RunOnJVM(func(vm, jniEnv, ctx uintptr) error {
        C.kk_finish(C.uintptr_t(vm), C.uintptr_t(jniEnv), C.jobject(ctx))
        return nil
    })
}

I also make a 'Double Click Exit':

Preserve eglContext!!

If I pressed the Home button on an Android device, the system'll bring my game to back. Then click the game icon again, the system'll bring my game to front, but, it's a white screen!!! Nothing is showing!!! I have searched a lot about this bugly behavior, it seems that Android apps will lost eglContext when paused. Ebiten has some code to restore the eglContext, reload all shaders/texutres... But I think it's too complicated to implement this, SDL2 use setPreserveEGLContextOnPause method, I can implement the same logic on gomobile, too.

In android.c file, add a new global variable EGLContext context = NULL;, then reuses it if it's valid or creates it if it's invalid.

// app/android.c
 EGLDisplay display = NULL;
 EGLSurface surface = NULL;
+EGLContext context = NULL;

-   const EGLint contextAttribs[] = { EGL_CONTEXT_CLIENT_VERSION, 2, EGL_NONE };
-   context = eglCreateContext(display, config, EGL_NO_CONTEXT, contextAttribs);
+    if (context == NULL) {
+        const EGLint contextAttribs[] = { EGL_CONTEXT_CLIENT_VERSION, 2, EGL_NONE };
+        context = eglCreateContext(display, config, EGL_NO_CONTEXT, contextAttribs);
+    }

These changes works very well. Now, my game can correctly paused and resumed.

Note: You need to rebuild the gomobile tools again!

How to set 'targetSdkVersion '?

I thought I have fixed all the bug and successfully build an APK file. But when I upload the APK file to GooglePlay, it always fails with an error message -"you need to target Android version 26"!!

As an experienced Android developer, I know how to fix it, just add 'targetSdkVersion=26' in 'AndroidManifest.xml' will works. But, unfortunately, it failed, gomoile complains that:

manual declaration of uses-sdk in AndroidManifest.xml not supported

Gomobile must did some weird logic when building APK file. After digging into the build_androidapp.go and binres.go file, I found that gombile checks the 'uses-sdk' element and fails the build process:

case "uses-sdk":
    return nil, fmt.Errorf("manual declaration of uses-sdk in AndroidManifest.xml not supported")
case "manifest":

I also found where 'gomobile' set the 'minSdkVersion', but, it never set the targetSdkVersion, so I add some code:

if !skipSynthesize {
    s := xml.StartElement{
        Name: xml.Name{
            Space: "",
            Local: "uses-sdk",
        },
        Attr: []xml.Attr{
            xml.Attr{
                Name: xml.Name{
                    Space: androidSchema,
                    Local: "minSdkVersion",
                },
                Value: fmt.Sprintf("%v", MinSDK),
            },
            xml.Attr{
                Name: xml.Name{
                    Space: androidSchema,
                    Local: "targetSdkVersion",
                },
                Value: fmt.Sprintf("%v", 26),
            },
        },
    }

Finally, I have to say, it's a long way, I fixed all the problem, and upload it to GooglePlay. It's welcomed to download my 2048 games, it's 99% Golang、no ads、clean design、smooth animation... Yeah, just install, I'm really happy to hear that.

Here is the link to itch.io: The 2048 Game

I also create serval issues in Github, but with no respond now:

Write a GIF player with Golang

ntop — Sat, 31 Mar 2018 15:24:38 +0000

I just wrote a gif player with golang (less then 200 lines code). I use MAC a lot, but it can't play gif like windows, so this project come out.

It's a Golang project, also a korok project. The core code is little:

func main() {
    gfile := flag.Arg(0)
    // decode !
    gp, err := Load(gfile)
    if err != nil {
        log.Fatal(err)
    }
    w, h := gp.Size()
    options := korok.Options{
        Title: "Gif Player",
        Width:w,
        Height:h,
    }
    korok.Run(&options, &MainScene{p: gp})
}

Gif decoding use Golong's gif module, the ui is setup with korok engine's GUI system. In fact, just one method is used:

gui.Image(1, m.img, nil)

This API will draw a Texture at (0,0) of screen.

I have uploaded the project to Github: https://github.com/ntop001/xgif

About korok: it's component based 2d game engine in Golang, include a concise gui system. I use it to write some small tools. See: https://korok.io/