EgretEngine으로 아주 간단한 게임을 만들어 보세요(3) 터치로 해보세요.

연재 기사 "EgretEngine으로 초간단 게임 만들어요".
(1) 프로젝트 만들기 & 구축
(2) 물리적 엔진 확장 가져오기
(3) 공사 작업의 설치
(4) 장애물의 설치와 각종 포장
(5) 첫머리
이 문장EgretEngine으로 초간단 게임 만들기(2)의 후속
동작 설명
이번에는 이런 느낌으로 공을 표현했다.

이 공은 자연히 떨어진다

클릭하면 공이 약간 올라가는 충격(힘)×소요 시간

(보이지 않지만) 바닥에 닿으면 점프가 멈춘다

완료 코드
먼저 Egret 및 Physics 확장(p2) 연습, Maints의createGameScene 방법(위)에 모든 코드를 썼습니다.
Main.ts

    private createGameScene() {
        const stageHeight = egret.MainContext.instance.stage.stageHeight;
        const stageWidth = egret.MainContext.instance.stage.stageWidth;
        const ballRadiusPixel = stageWidth / 10 / 2;
        const ballRadiusMeter = 0.6;
        const meterPerPixel =  ballRadiusMeter / ballRadiusPixel;
        const worldWidthMeter = meterPerPixel * stageWidth;
        const worldHeightMeter = meterPerPixel * stageHeight;

        const sprite: egret.Sprite = new egret.Sprite();
        this.addChild(sprite);

        const world = new p2.World();
        world.sleepMode = p2.World.BODY_SLEEPING;
        world.gravity = [0, 9.8];

        const groundShape: p2.Plane = new p2.Plane();
        const groundBody: p2.Body = new p2.Body();
        groundBody.position[1] = worldHeightMeter - 1;
        groundBody.angle = Math.PI;
        groundBody.addShape(groundShape);
        world.addBody(groundBody);

        const ball: p2.Body = new p2.Body({ mass: 1, position: [worldWidthMeter/2, ballRadiusMeter] });
        let ballShape = new p2.Circle({ radius: ballRadiusMeter });
        ball.addShape(ballShape);
        world.addBody(ball);

        egret.Ticker.getInstance().register(loop,this);
        this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN,tapUpBall, this);

        function loop(dt:number) {
            world.step(1/60,dt / 1000,10);
            drawBall();
        }

        function tapUpBall(e: egret.TouchEvent) {
            ball.applyImpulseLocal([0,-9.8],[0,0]);
        }

        function drawBall() {
            sprite.graphics.clear();

            const g: egret.Graphics = sprite.graphics;
            const px = ball.position[0] / meterPerPixel;
            const py = ball.position[1] / meterPerPixel;
            g.beginFill(0xfff000, 0.5);
            g.drawCircle(px, py, ballRadiusPixel);
            g.endFill();
        }
    }

화면 그리기
Physics(p2)는 물리적 연산을 수행하지만 화면 그리기는 수행되지 않습니다.
따라서 p2 연산 후 팝업된 위치 정보에 따라 자동으로 화면 그리기

        function drawBall() {
            sprite.graphics.clear();
            const g: egret.Graphics = sprite.graphics;
            const px = ball.position[0] / meterPerPixel;
            const py = ball.position[1] / meterPerPixel;
            g.lineStyle(1, 0xfff000);
            g.beginFill(0xfff000, 0.5);
            g.drawCircle(px, py, ballRadiusPixel);
            g.endFill();
        }

Physics 단위
MKS 단위제입니다.
시스템
유닛
길이 단위
미터(metre;m)
질량 단위
킬로그램(kilogram;kg)
시간 단위
초 (second;s)
이를 위해 화면 단위와 물리 연산 단위의 비율meterPerPixel을 계산해야 한다.
볼은 화면의 1/10 크기로 그려야 합니다.그러나 농구의 논리적 물리적 사이즈는 60cm로 가정했다.

        const stageWidth = egret.MainContext.instance.stage.stageWidth;
        const ballRadiusPixel = stageWidth / 10 / 2;
        const ballRadiusMeter = 0.6;
        const meterPerPixel =  ballRadiusMeter / ballRadiusPixel;