입문

이 글은 만고 Advent Calender 2019 의 글입니다.
니콜슨은 현재 니콜슨에서 하는 게임RPG 아투마르를 통한 유저 투고을 받아들여 자신이 만든 게임을 니콜슨에서 실행할 수 있게 했다.
말했지만 지금의 니콜슨은 자신이 쓴 각본을 움직일 수 있을 것 같다.
단순한 버튼부터 배신자와 관중이 싸우는 멀티플레이어까지 비교적 잘 할 수 있다.
따라서 이번에는 니코생 게임 보급의 일환으로 제목에서 보듯이 가장 작고 빠른 속도로 매우 간단한 멀티플레이어 게임을 만들었고 Akashic Engine을 사용하면 동기화 처리가 얼마나 쉬운지 보여주고 싶습니다.

전제 지식

nico에서 게임을 실행하기 위해서는 현재 당사가 개발한 js를 위한 프레임워크인 Akashic Engine을 이용해야 합니다.
https://akashic-games.github.io/

자료

멀티플레이어를 만드는 방법에 대해서는 지난 몇 달 동안 연재로 소개됐다.이거 읽으면 할 수 있어.진짜?본인이 말했기 때문에 맞아요.
하고 싶을 때 아래 기사를 참고하세요.토끼 거북털을 만들어 투고해 주세요.

처음: 멀티플레이어 게임 이해

제2회: 간단한 게임 접촉 로컬 처리 만들기

제3회: Join, Leave, Nico생의 이야기

제4회: 게임을 실제로 생각해서 만들어보도록 하겠습니다.

만들기 시작

지금 시간은 20:52입니다.나는 가능한 한 빨리 완성하도록 노력할 것이다.

사고 게임

생각한 곳으로 들어가다.이번에 만든 게임은 멀티플레이어, 즉 멀티플레이어형 게임이다.
이 부근의 정의에 관해서는 상술한 자료의 첫 번째 부분에서 약간 고려했다.
요즘 니코생들 사이에서 화제가 되고 있는 멀티플레이어 게임으로 모두가 합작형 게임인 타신니코니코타이 있지만 저는 개인적으로 좀 더 편해졌으면 좋겠어요.

전원 참가형

전원전투

최종 순위 확정

의 규격화 거리의 멱 함수.그래도 자부심이 가장 작고 빠른 만큼 게임성에 유의하세요.

생각의 게임

화면에 표시된 버튼을 처음 누른 사람에게만 채점

이를 게임 끝까지 반복하여 가장 높은 점수를 받은 사람이 이긴다

간단하네.분수 관리, 단추 이벤트 처리, 이미지 디스플레이, 동기화를 실현할 수 있다면 좋겠다.

소재를 만들다

그림 그리기 도구로 그림을 쓰다.나는 시간에 댈 것이다.마우스가 없기 때문에 동그라미를 쓰기 어렵다.

개발 환경과 프로젝트를 보완하다.

필요한 라이브러리 설치

공식 입문서에 따라 npm i에 필요한 명령 그룹입니다.

$ npm install -g @akashic/akashic-cli
$ npm install -g @akashic/akashic-sandbox

akashic-sandbox는 주로 동작 확인에 사용됩니다.

제작 항목

적당한 디렉터리에서akashic init 명령을 실행하면 템플릿 프로젝트가 만들어집니다.TypeScript로 쓰고 싶으므로 다음 명령을 누르십시오.

$ akashic init -t typescript 
# 中略
prompt: width:  (320) 640
prompt: height:  (320) 360
prompt: fps:  (30) 
Now your new Akashic game has been generated. To run with akashic-sandbox:
  $ npm install
  $ npm run build
  $ npm start
See README.md (in Japanese) for more detail and make your Akashic game!
INFO: Done!

프로젝트에 관해서는 몇 가지 질문을 받을 것이다.니코가 태어나서 게임을 실행할 때 16:9의 비율로 게임을 만드는 것을 강력히 추천합니다.무시할 수 있지만 좋은 느낌으로 늘어나 16:9에 끝납니다.
빈 프로젝트가 완성되면 그 중 npmi만 있으면 필요한 물건이 모두 들어갑니다.사용하지 않는 샘플 소재가 첨부되어 있으므로 아래 명령으로 삭제하십시오

$ rm -rf audio/*
$ rm -rf image/*

화면에 단추를 표시하고 이벤트 프로세서를 쓰다

이미지 가져오기 준비

일단 여기서부터.Hello World 대신 이미지를 꺼내서 누르세요.그림을 꺼내기 위해 프로젝트의 이미지 폴더에 그린 그림을 넣습니다.
그리고 scan 명령을 두드려서 이미지 정보를 게임합니다.json에 포함해야 합니다.

$ akashic scan asset                                                                                                                                                                                                                                                                                          
INFO: Removed the declaration for 'se' (audio/se). The correspondig files to the path are not found.
INFO: Removed the declaration for 'player' (image/player.png). The correspondig files to the path are not found.
INFO: Removed the declaration for 'shot' (image/shot.png). The correspondig files to the path are not found.
INFO: Added/updated the declaration for button (image/button.png)
INFO: Added/updated the declaration for button2 (image/button2.png)
INFO: Done!

방금 삭제한 소재 정보는 사라졌고, 대신 입력한 이미지는 사라졌다.Akashic Engine의 경우 읽은 이미지의 종횡비와 음성 파일의 길이 등을 미리 알아야 하기 때문에 이 작업은 소재가 바뀔 때마다 필요하다.

장면 초기화 및 설명

Akashic Engine에서'장면'이라고 불리는 총결에 대해 소재와 활동 등을 연계하여 처리한다.별말씀을요.js와 phaser.js와 같은 주류의 게임 엔진도 비슷한 느낌을 가지고 있다.
장면에서 사용하는 소재류는 new 장면에서 불러오기 시작하고loaded 이벤트 발화에서 사용할 수 있기 때문에 아래 코드는 이미지를 출력하는 장면의 최소 구성이다.

    scene.loaded.add(() => {
        const darkButton = new g.Sprite({
            scene: scene,
            src: scene.assets["button"],
            touchable: true
        });
        scene.append(darkButton);
        darkButton.pointDown.add((e) => {
            // 誰かによってボタンが押されるとここが実行される
        });
    });

이걸 아주 길게 뻗어서 게임을 만들어요.우선 버튼 처리와 멀티플레이어 게임의 동기화 처리를 적어 보세요.아까 씬의loaded 프로세서에서 추적합니다.

    scene.loaded.add(() => {
        const font = new g.DynamicFont({game: g.game, fontFamily: g.FontFamily.Serif, fontColor: "black", size: 32});
        // スコア表示TOP5用のラベル
        const rankingScoreLabels = initializeRankingLabels(scene, font);

        const darkButton = new g.Sprite({
            scene: scene,
            src: scene.assets["button"],
            touchable: true
        });
        scene.append(darkButton);

        darkButton.pointDown.add((e) => {
            // 押した人を取得
            const winnerId = e.player.id.slice(-5);
            // scoreを加算する
            if (scoreTable[winnerId] == null) {
                scoreTable[winnerId] = 1;
            } else {
                scoreTable[winnerId] += 1;
            }

            // ラベル更新
            updateRankingLabels(scoreTable, rankingScoreLabels);
        });

    });
    g.game.pushScene(scene);

이렇게 된 기분이야.다중 게임의 동작 확인은build에서 시작된 serve입니다.

$ npm run build
$ akashic serve

기본적으로 서버는localhost:3300에서 시작됩니다. 브라우저에서 접근하십시오.여러 개의 창문을 열면 여러 사람이 노는 것과 같은 상황을 만들 수 있다.

이런 느낌으로 왼쪽 버튼을 누르면 자신의 점수를 더해 5위 안에 드는 행동을 실현했다.
이 근처?누군가는 그렇게 생각할지도 모르지만, 나는 씬의 처리 프로그램에서 아무것도 쓰지 않았는데도 여러 창문에서 마음대로 상태가 동기화되는 것을 볼 수 있다고 생각한다.
이것은 Akashic Engine이 멀티플레이어 게임을 제작할 때의 가장 큰 특징으로 아무것도 고려하지 않고 제작하면 완전히 동기화된다.
아무 생각 없이 쓰면 여러 사람이 접촉하는 버튼이 만들어진다.
브라우저에서 단추를 누르면 PointDown 이벤트가 같은 시간에 실행됩니다. 누르는 사람을 포함합니다.
주 순환의 시간, 이벤트와 무작위 수의 씨앗은 Akashic Engine을 통해 임의로 동기화되어 모든 사람의 환경에서 같은 행동을 재현한다 = 동기화.

니콜슨 등록 준비

완제품은 여기 있습니다.
https://github.com/orzngo/minimum-multiplay-game
게임으로서 성적이 엉망이야. (사실은 좀 더 하고 싶은데 시간이 없어...)하지만 아무래도 멀티플레이어라고 불릴 만한 물건이 다 됐으니 니콜로 움직여라.공식 문서 참고game.편집
구체적으로 말하자면, enviroment는 다음과 같다.

    "environment": {
        "sandbox-runtime": "2",
        "niconico": {
            "supportedModes":["multi"]
        }
    }

가능하다면 RPG 아투마르 투고용 zip을 출력합니다.

$ akashic export html --output button.zip --atsumaru

완성된 게임을 RPG 아투마르에게 투고한다.이 근처에 니코니코 계정이 필요해서 없는 사람지금 등록이 있죠!

왠지 이런 느낌이야.아투마르에서도 할 수 있도록 게임을 만들면 좋겠지만 멀티플레이어 게임을 만들면 아투마르가 정상적으로 움직일 수 없는 경우가 많기 때문에 한정 공개를 하면 모두가 행복할 거예요.

니코생 등록 후 니코생에서 이동!

그러면 이 상태에서 오른쪽 아래의 다른 메뉴에서 시장에 등록을 신청하면 됩니다.곧 니코니코 신시장에서 사용할 수 있겠지.

이렇게 니콜슨 오른쪽에 표시된 니코니코 신시장 자체 제작 게임 라벨에 등록되었다.1분 안에 등록하고 싶어요.
이렇게 하면 니코에서 태어날 수 있을 거야.일반적으로 공개되기 때문에 어떤 프로그램이든 게임을 할 수 있다.최종적으로 사용 여부를 결정하는 것은 배신자이기 때문에 직접 마케팅하세요!

끝날 때

드디어 시간이 차서 히죽거리던 새로운 시장의 등록도 끝났다.
소리를 내려고 했는데 예상보다 시간이 걸려 진짜 최소 구성으로 바뀌었다.종료 조건도 없기 때문에 게임으로서의 가치는 거의 없다...
그럼에도 불구하고 제가 가장 하고 싶은 말은 Akashic Engine에서 아무 생각 없이 하는 말은 모두 다른 사람과 동기화되는 것입니다.
장기와 같은 전체 정보 공개 게임은 이렇게 만들어졌지만 방송인과 시청자가 나뉘어 배역을 겨루는 게임은 이 기사만으로는 어려울 것 같다.자료로 나온 연재기사 읽어주시기 바랍니다.
[PR]
기획으로 자체 게임 대회를 열고 있다.
https://ch.nicovideo.jp/shin-ichiba/blomaga/ar1768903
멀티플레이어 게임을 만든 사람은 아직 적어서 상을 받을 가능성이 높다.만들어라!