Skip to content

V
vue3-custom-renderer
Commit edfd07a3 authored by wanli's avatar wanli
Browse files
Options

Initial commit

parent 8de28214
Pipeline #564 failed with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 6457 additions and 6 deletions
      .gitignore
      View file @ edfd07a3
      node_modules node_modules
      dist project/build/*
      build project/dist/*
      project \ No newline at end of file
      \ No newline at end of file
      build/app.js 0 → 100644
      View file @ edfd07a3
      This diff is collapsed.
      build/index.html 0 → 100644
      View file @ edfd07a3
      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>Rollup Bundle</title>
      </head>
      <body>
      <script src="app.js" type="module"></script>
      </body>
      </html>
      \ No newline at end of file
      dist/build.js
      View file @ edfd07a3
      This source diff could not be displayed because it is too large. You can view the blob instead.
      project/awtk/App.vue 0 → 100644
      View file @ edfd07a3
      <template>
      <text x="0" y="0">{{ time }}</text>
      </template>
      <script>
      import { defineComponent, ref, toRefs, onMounted } from "vue";
      import dayjs from "dayjs";
      export default defineComponent({
      setup() {
      const time = ref(dayjs().format("hh:mm:ss"));
      onMounted(() => {
      setInterval(() => {
      time.value = dayjs().format("hh:mm:ss");
      }, 800);
      });
      return {
      ...toRefs({
      time,
      }),
      };
      },
      });
      </script>
      \ No newline at end of file
      project/awtk/adapter.js 0 → 100644
      View file @ edfd07a3
      // 文本元素
      export class Text {
      constructor(parent) {
      // 提供一个父节点用于寻址调用更新 (前面提到状态更新由容器进行)
      this.parent = parent;
      }
      // 元素绘制,这里需要实现文本元素渲染逻辑
      draw(text) {
      console.log(text);
      }
      }
      // 适配器
      export class Adapter {
      constructor() {
      // 装载容器
      this.children = [];
      }
      // 装载子元素
      append(child) {
      this.children.push(child);
      }
      // 元素状态更新
      update(node, text) {
      // 找到目标渲染进行绘制
      const target = this.children.find((child) => child === node);
      target.draw(text);
      }
      clear() {}
      }
      // 容器 === 适配器实例
      export function getContainer() {
      return new Adapter();
      }
      project/awtk/index.js 0 → 100644
      View file @ edfd07a3
      // 自定义渲染器
      import { createApp } from "./renderer.js";
      // 组件
      import App from "./App.vue";
      // 容器
      import { getContainer } from "./adapter.js"
      // function getContainer() {
      // // ...
      // }
      // 创建渲染器,将组件挂载到容器上
      createApp(App).mount(getContainer());
      \ No newline at end of file
      project/awtk/renderer.js 0 → 100644
      View file @ edfd07a3
      import { createRenderer } from "vue";
      import { Text } from "./adapter";
      let uninitialized = [];
      const render = createRenderer({
      // 创建元素,实例化Text
      createElement(type) {
      switch (type) {
      case "text":
      return new Text();
      }
      },
      // 插入元素,调用适配器方法进行装载统一管理
      insert(el, parent) {
      if (el instanceof Text) {
      el.parent = parent;
      parent.append(el);
      uninitialized.map(({ node, text }) => el.parent.update(node, text));
      }
      return el;
      },
      // props更新
      patchProp(el, key, preValue, nextValue) {
      el[key] = nextValue;
      },
      // 文本更新,重新绘制
      setElementText(node, text) {
      if (node.parent) {
      console.log(text);
      node.parent.clear(node);
      node.parent.update(node, text);
      } else {
      uninitialized.push({ node, text });
      }
      },
      remove(el) {},
      createText(type) {},
      parentNode(node) {},
      nextSibling(nide) {},
      });
      export function createApp(root) {
      return render.createApp(root);
      }
      project/canvas/App.js 0 → 100644
      View file @ edfd07a3
      import { defineComponent, h, computed, ref } from "@vue/runtime-core";
      import startPage from "./page/startPage";
      import gamePage from "./page/gamePage";
      import endPage from "./page/endPage";
      // template -> render()
      export default defineComponent({
      setup() {
      // 创建一个响应式数据对象
      // 值类型 string number
      // const currentPageName = ref('startPage')
      const currentPageName = ref("gamePage");
      // const currentPageName = ref('endPage')
      // console.log(currentPageName)
      // 计算属性
      const currentPage = computed(() => {
      if (currentPageName.value === "startPage") {
      return startPage;
      } else if (currentPageName.value === "gamePage") {
      return gamePage;
      } else if (currentPageName.value === "endPage") {
      return endPage;
      }
      });
      return {
      currentPageName,
      currentPage,
      };
      },
      render(ctx) {
      // console.log('---ctx---')
      // console.log(ctx)
      return h("Container", [
      h(ctx.currentPage, {
      onChangePage(page) {
      // console.log(page)
      ctx.currentPageName = page;
      },
      }),
      ]);
      // return h("Container", [h(gamePage)]);
      },
      });
      project/canvas/Game.js 0 → 100644
      View file @ edfd07a3
      export class Text {
      constructor(parent) {
      this.parent = parent;
      }
      draw() {
      }
      }
      export class Window {
      constructor(parent) {
      this.parent = parent;
      }
      draw() {
      }
      }
      // 适配器
      export class Adapter {
      constructor() {
      // 装载容器
      this.children = [];
      }
      // 装载子元素
      append(child) {
      console.log("==========> Game.js append start <=========")
      console.log(child)
      this.children.push(child);
      console.log("==========> Game.js append start <=========")
      }
      // 元素状态更新
      update(node, text) {
      console.log("==========> Game.js update start <=========")
      // 找到目标渲染进行绘制
      const target = this.children.find((child) => child === node);
      // target.draw(text);
      console.log(node)
      console.log(text)
      console.log("==========> Game.js update end <=========")
      }
      clear(opts) {
      console.log("==========> Game.js clear start <=========")
      console.log(opts)
      console.log("==========> Game.js clear end <=========")
      }
      }
      // 容器 === 适配器实例
      export function getContainer() {
      return new Adapter();
      }
      project/canvas/component/Bullet.js 0 → 100644
      View file @ edfd07a3
      // 子弹组件
      import { defineComponent, h, watch } from "@vue/runtime-core";
      export default defineComponent({
      props: ["x", "y"],
      setup(props) {
      console.log("==========> Bullet.js setup start <==========")
      console.log(props)
      console.log("==========> Bullet.js setup end <==========")
      },
      render(ctx) {
      return h("Container", { x: ctx.x, y: ctx.y }, [
      h("Sprite", { texture: "../../assets/bunny-self.png" }),
      ]);
      },
      });
      project/canvas/component/EnemyPlane.js 0 → 100644
      View file @ edfd07a3
      // 敌军
      import { defineComponent, h } from "@vue/runtime-core";
      export default defineComponent({
      props: ["x", "y"],
      render(ctx) {
      return h("Container", { x: ctx.x, y: ctx.y }, [
      h("Sprite", { texture: "../../assets/enemy.png" }),
      ]);
      },
      });
      project/canvas/component/Map.js 0 → 100644
      View file @ edfd07a3
      import { defineComponent, h, ref } from "@vue/runtime-core";
      // import { getGame } from "../Game";
      export default defineComponent({
      setup() {
      const mapHeight = 1080;
      const mapY1 = ref(0);
      const mapY2 = ref(-mapHeight);
      // const speed = 5;
      // getGame().ticker.add(() => {
      // // console.log('---111---')
      // mapY1.value += speed;
      // mapY2.value += speed;
      // if (mapY1.value >= mapHeight) {
      // mapY1.value = -mapHeight;
      // }
      // if (mapY2.value >= mapHeight) {
      // mapY2.value = -mapHeight;
      // }
      // });
      return {
      mapY1,
      mapY2,
      };
      },
      render(ctx) {
      return h("Container", [
      h("Sprite", { texture: "../../assets/map.jpg", y: ctx.mapY1 }),
      h("Sprite", { texture: "../../assets/map.jpg", y: ctx.mapY2 }),
      ]);
      },
      });
      project/canvas/component/Plane.js 0 → 100644
      View file @ edfd07a3
      import {
      defineComponent,
      h,
      reactive,
      watch,
      toRefs,
      onMounted,
      onUnmounted,
      } from "@vue/runtime-core";
      export default defineComponent({
      props: ["x", "y"],
      setup(props, ctx) {
      console.log("----------> Plane.js props start <----------");
      console.log(props);
      const handleAttack = (e) => {
      if (e.code === "Space") {
      // console.log('attack')
      // console.log(e.code)
      ctx.emit("attack", {
      x: props.x,
      y: props.y,
      });
      }
      };
      onMounted(() => {
      console.log("----------> Plane.js onMounted <----------")
      // window.addEventListener("keydown", handleAttack);
      });
      onUnmounted(() => {
      console.log("----------> Plane.js onUnmounted <----------")
      // window.removeEventListener("keydown", handleAttack);
      });
      const point = reactive({
      x: props.x,
      y: props.y,
      });
      watch(props, (value) => {
      point.x = value.x;
      point.y = value.y;
      });
      console.log("---props---");
      console.log(props.x);
      // toRefs
      const { x, y } = toRefs(props);
      console.log(x, y);
      console.log("----------> Plane.js props end <----------");
      return {
      x,
      y,
      };
      },
      render(ctx) {
      return h("Container", { x: ctx.x, y: ctx.y }, [
      h("Sprite", { texture: "../../assets/plane.png" }),
      ]);
      },
      });
      project/canvas/main.js 0 → 100644
      View file @ edfd07a3
      import { createApp } from "./runtime-canvas";
      import App from "./App";
      import { getContainer } from "./Game";
      createApp(App).mount(getContainer());
      project/canvas/page/endPage.js 0 → 100644
      View file @ edfd07a3
      // 游戏结束页面
      import { defineComponent, h } from "@vue/runtime-core";
      // template->render
      export default defineComponent({
      render(ctx) {
      // 显示一张图
      // <div><img src="" alt=""/></div>
      return h("Container", [
      h("Sprite", { texture: "../../assets/end_page.jpg" }),
      h("Sprite", {
      texture: "../../assets/restartBtn.png",
      x: 210,
      y: 500,
      interactive: true,
      onClick() {
      // console.log('---ctx---')
      // console.log(ctx)
      ctx.$emit("changePage", "gamePage");
      },
      }),
      ]);
      },
      });
      project/canvas/page/gamePage.js 0 → 100644
      View file @ edfd07a3
      import {
      defineComponent,
      h,
      reactive,
      toRefs,
      onMounted,
      onUnmounted,
      } from "@vue/runtime-core";
      import Map from "../component/Map";
      import Plane from "../component/Plane";
      import Bullet from "../component/Bullet";
      import EnemyPlane from "../component/EnemyPlane";
      // import { getGame } from "../Game";
      // import { hitTestTrctangle } from "../utils/index";
      export default defineComponent({
      setup(props, ctx) {
      const planeInfo = useCreatePlaneInfo();
      // 子弹数据
      const bullets = reactive([]);
      // 敌军数据
      const enemyPlanes = reactive([
      {
      x: 10,
      y: 10,
      width: 308,
      height: 207,
      },
      ]);
      const handleAttack = (info) => {
      const createBulletInfo = () => {
      return {
      x: info.x + 100,
      y: info.y,
      };
      };
      bullets.push(createBulletInfo());
      return;
      };
      // getGame().ticker.add(() => {
      // // 让子弹动起来
      // // 改变子弹的y坐标
      // // const speed = 10;
      // // bullets.forEach(bulletInfo => {
      // // bulletInfo.y -= speed;
      // // })
      // moveBullets(bullets);
      // // 碰撞💥检测
      // enemyPlanes.forEach((enemyPlaneInfo) => {
      // if (hitTestTrctangle(enemyPlaneInfo, planeInfo)) {
      // ctx.emit("changePage", "endPage");
      // console.log("hit----");
      // }
      // });
      // });
      // 创建子弹
      return {
      planeInfo,
      bullets,
      handleAttack,
      enemyPlanes,
      };
      },
      render(ctx) {
      // 渲染子弹
      const renderBullets = () => {
      return ctx.bullets.map((info) => {
      return h(Bullet, { x: info.x, y: info.y });
      });
      };
      // 渲染敌人飞机
      const renderEnemyPlanes = () => {
      return ctx.enemyPlanes.map((info) => {
      return h(EnemyPlane, { x: info.x, y: info.y });
      });
      };
      return h("Container", [
      h(Map),
      h(Plane, {
      x: ctx.planeInfo.x,
      y: ctx.planeInfo.y,
      onAttack: ctx.handleAttack,
      }),
      ...renderBullets(),
      ...renderEnemyPlanes(),
      ]);
      },
      });
      const useCreatePlaneInfo = () => {
      const planeInfo = reactive({
      x: 240,
      y: 680,
      width: 258,
      height: 364,
      });
      // console.log(planeInfo)
      // 让飞机动起来
      const { x, y } = useMovePlane(planeInfo.x, planeInfo.y);
      planeInfo.x = x;
      planeInfo.y = y;
      return planeInfo;
      };
      const useMovePlane = (initX, initY) => {
      const speed = 20;
      const point = reactive({
      x: initX,
      y: initY,
      });
      const handleKeyDown = (e) => {
      switch (e.code) {
      case "ArrowUp":
      point.y -= speed;
      break;
      case "ArrowDown":
      point.y += speed;
      break;
      case "ArrowLeft":
      point.x -= speed;
      break;
      case "ArrowRight":
      point.x += speed;
      break;
      }
      };
      onMounted(() => {
      console.log("----------> gamePage.js onMounted <----------")
      // window.addEventListener("keydown", handleKeyDown);
      });
      onUnmounted(() => {
      console.log("----------> gamePage.js onMounted <----------")
      // window.removeEventListener("keydown", handleKeyDown);
      });
      return toRefs(point);
      };
      // const moveBullets = (bullets) => {
      // const speed = 10;
      // bullets.forEach((bulletInfo) => {
      // bulletInfo.y -= speed;
      // });
      // };
      project/canvas/page/startPage.js 0 → 100644
      View file @ edfd07a3
      // 开始页面
      import { defineComponent, h } from "@vue/runtime-core";
      // template->render
      export default defineComponent({
      render(ctx) {
      // 显示一张图
      // <div><img src="" alt=""/></div>
      return h("Container", [
      h("Sprite", { texture: "../../assets/start_page.jpg" }),
      h("Sprite", {
      texture: "../../assets/startBtn.png",
      x: 210,
      y: 500,
      interactive: true,
      onClick() {
      // console.log('---ctx---')
      // console.log(ctx)
      ctx.$emit("changePage", "gamePage");
      },
      }),
      ]);
      },
      });
      project/canvas/runtime-canvas/index.js 0 → 100644
      View file @ edfd07a3
      import { createRenderer } from "@vue/runtime-core";
      // 创建渲染器
      const renderer = createRenderer({
      // 实现渲染接口
      createElement(type) {
      console.log("==========> runtime-canvas create element start <==========")
      let element = undefined;
      // 基于 type 去创建视图
      switch (type) {
      case "Container":
      element = TWindow.create(null, 0, 0, 0, 0);
      var label = TLabel.create(element, 0, 0, 0, 0);
      label.useStyle(123);
      label.setText("hello awtk!");
      label.setSelfLayoutParams("center", "middle", "50%", "30");
      element.layout();
      console.log(type);
      break;
      case "Sprite":
      element = TColor.create(1, 2, 3, 4);
      console.log(type)
      break;
      }
      console.log("==========> runtime-canvas create element end <==========")
      return element;
      },
      insert(el, parent) {
      console.log("==========> insert start <==========");
      console.log(el);
      console.log(JSON.stringify(el))
      console.log(parent);
      el.parent = parent;
      console.log(JSON.stringify(parent))
      if (parent && parent.hasOwnProperty("children")) parent.children.push(el);
      console.log("==========> insert end <==========");
      },
      patchProp(el, key, prevValue, nextValue) {
      console.log("==========> patch prop start <==========");
      console.log(el)
      console.log(key)
      console.log(prevValue)
      console.log(nextValue)
      switch (key) {
      case "texture":
      // el.texture = Texture.from(nextValue);
      break;
      case "onClick":
      // 给pixi元素注册点击事件
      // el.on("pointertap", nextValue);
      break;
      default:
      if (el) el[key] = nextValue;
      }
      console.log("==========> patch prop end <==========");
      },
      setElementText(node, text) {
      console.log("==========> set element text start <==========");
      console.log(node)
      console.log(text)
      // const canvasText = new Text(text);
      // node.addChild(canvasText);
      console.log("==========> set element text end <==========");
      },
      createText(text) {
      console.log("==========> create text start <==========");
      console.log(text)
      console.log("==========> create text end <==========");
      // return new Text(text);
      return text
      },
      // 处理注释
      createComment() {},
      // 获取父节点
      parentNode(node) {
      console.log("==========> parent node start <==========");
      console.log(node);
      console.log("==========> parent node end <==========");
      },
      // 获取兄弟节点
      nextSibling() {},
      // 删除节点时调用
      remove(el) {
      console.log("==========> remove start <==========");
      const parent = el.parent;
      if (parent) {
      parent.removeChild(el);
      }
      console.log("==========> remove end <==========");
      },
      });
      // console.log(renderer)
      export function createApp(rootComponent) {
      // 调用 renderer
      return renderer.createApp(rootComponent);
      }
      project/canvas/utils/index.js 0 → 100644
      View file @ edfd07a3
      // 碰撞💥
      export function hitTestTrctangle(objA, objB) {
      return (
      objA.x + objA.width >= objB.x &&
      objB.x + objB.width >= objA.x &&
      objA.y + objA.height >= objB.y &&
      objB.y + objB.height >= objA.y
      );
      }
      project/index.js 0 → 100644
      View file @ edfd07a3
      import { h, render, nodeOps, dumpOps } from '@vue/runtime-test'
      const App = {
      data () {
      return {
      msg: 'Hello World!'
      }
      },
      render () {
      return h('div', this.msg)
      }
      }
      // root is of type `TestElement` as defined in src/nodeOps.ts
      const root = nodeOps.createElement('div')
      render(h(App), root)
      const ops = dumpOps()
      console.log(ops)
      \ No newline at end of file
      project/index.vue 0 → 100644
      View file @ edfd07a3
      <template>
      <div>123</div>
      </template>
      \ No newline at end of file
      project/rollup.canvas.config.js 0 → 100644
      View file @ edfd07a3
      import nodeResolve from "@rollup/plugin-node-resolve";
      import cjs from "@rollup/plugin-commonjs";
      import vue from "rollup-plugin-vue";
      import replace from "@rollup/plugin-replace";
      import html from "@rollup/plugin-html";
      module.exports = {
      input: "canvas/main.js",
      output: {
      file: "dist/app.js",
      format: "esm",
      },
      plugins: [
      vue({ css: false, }),
      nodeResolve(),
      cjs({ sourceMap: false }),
      replace({
      preventAssignment: true,
      "process.env.NODE_ENV": JSON.stringify("production"),
      }),
      html({ script: "app.js", }),
      ],
      };
      project/rollup.config.js 0 → 100644
      View file @ edfd07a3
      import nodeResolve from "@rollup/plugin-node-resolve";
      import cjs from "@rollup/plugin-commonjs";
      import vue from "rollup-plugin-vue";
      import replace from "@rollup/plugin-replace";
      // import { terser } from "rollup-plugin-terser";
      import styles from "rollup-plugin-styles";
      // import typescript from "rollup-plugin-typescript2";
      import html from "@rollup/plugin-html";
      module.exports = {
      input: "index.js",
      output: {
      file: "build/app.js",
      format: "esm",
      },
      plugins: [
      vue({ css: false, }),
      nodeResolve(),
      styles(),
      // typescript({
      // tsconfig: false,
      // experimentalDecorators: true,
      // module: 'es2015'
      // }),
      cjs({ sourceMap: false }),
      replace({
      preventAssignment: true,
      "process.env.NODE_ENV": JSON.stringify("production"),
      }),
      html({ script: "app.js", }),
      ],
      };
      src/App.js
      View file @ edfd07a3
      ...@@ -8,8 +8,8 @@ export default defineComponent({ ...@@ -8,8 +8,8 @@ export default defineComponent({
      setup() { setup() {
      // 创建一个响应式数据对象 // 创建一个响应式数据对象
      // 值类型 string number // 值类型 string number
      // const currentPageName = ref('startPage') const currentPageName = ref('startPage')
      const currentPageName = ref("gamePage"); // const currentPageName = ref("gamePage");
      // const currentPageName = ref('endPage') // const currentPageName = ref('endPage')
      // console.log(currentPageName) // console.log(currentPageName)
      // 计算属性 // 计算属性
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment