框架与类库:PixiJS
2024 抖音欢笑中国年(五):Wasm、WebGL 在互动技术中的创新应用
包括:高性能 Wasm + WebGL 渲染引擎、Lottie 动画 WebGL 渲染、WebGL 帧差序列帧等。
社交直播游戏场景前端解决方案专栏(三): 通用资源管理器
本文主要分析了资源管理的现状与存在问题,在业务游戏化背景下,探索了符合社交直播业务发展的资源管理解决方案,并介绍了不同场景下的使用方式。
小游戏技术方案实现探索
一个名为”大力出奇迹“的增长活动,于2023年4月26日在哔哩哔哩app上悄然发布。
WebGL大场景性能优化
WebGL 是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。
社交直播游戏场景前端解决方案专栏(二):小游戏开发 The React Way
在系列上一篇文章中,我们介绍了自研 H5 小游戏引擎 Alice.js 的理念与架构设计,以及核心功能的实现。通过结合 React 生态与 WebGL 渲染能力,我们可以让熟悉 React 的开发人员低成本地入门 H5 游戏开发,在复用现有组件资产的同时,提供高性能的游戏画面,实现更复杂的视觉效果。
在本篇中,我们会结合一个实际的案例,来介绍如何通过 Alice,使用 React 的方式高效开发 H5 小游戏。
社交直播游戏场景前端解决方案专栏(一):关于Alice.js的起点
我们在React 技术体系的基础上实现了DSL模式的H5游戏开发能力,包括 UI 构建、资源管理、动效、事件等,让熟悉的 JSX 和 Hooks 语法编写的同学可以快速接入游戏场景的开发,同时提供强大的图形渲染性能。
浅尝IM方案在H5活动场景中的应用
本文主要介绍在对数据实时行要求比较高的业务场景中,使用IM方案来保证数据更新的实时性,以提升用户体验;并且在此基础上简单介绍了 WebSocket 长链接的建立,以及其工作原理。
如何提升互动开发效能 - 一码多端互动开发引擎介绍
互动类型页面自带高传播属性,投放渠道范围广,并伴随风险高、开发周期短等特点。本文从框架设计、业务模型抽象、多端适配、UI规范、工程化等多个维度介绍通过建设一码多端互动引擎来提高互动开发效能。
前端动效讲解与实战
本文将从各个角度来对动画整个体系进行分类,并且介绍各种前端动画的实现方法,最后我们将总结在实际开发中的各个场景的动画选择方案。
用vue3+pixijs复刻童年记忆里的游戏-猎鸭季节
本期将用vue3与pixijs复刻出童年在小霸王里面玩的游戏-猎鸭季节,当初玩它需要光线枪才行,非常不好瞄准,每当打中鸭子就非常激动,打不中就会有收到狗子的嘲笑,想想那时候快乐真的很简单。现在,就想办改造了一下,让他不用光线枪用鼠标也能击中它,圆童年一个梦。
web 2d 渲染引擎基础
早期的浏览器并没有提供 2d 绘图功能,许多用到绘图的地方往往使用 flash 完成。随着 html5 标准的普及,svg/canvas 在浏览器中基本不存在兼容性问题了,在 node,小程序环境也能使用 canvas 绘图。
各种基于 2d 绘图的应用也开始涌现出来, 比如像 echarts,g2 这样的可视化库, processon 的流程图, 甚至连谷歌文档也改用 canvas 实现了。本文介绍 2d 绘图的基础知识以及一些性能优化手段。
PixiJS와 Depth map으로 3D 이미지 만들기
PixiJS는 WebGL을 사용하는 고속 HTML5 2D 렌더링 라이브러리입니다. Canvas Fallback을 지원합니다. PixiJS와 Depth map을 사용해 이미지에 생명력을 불어 넣을 수 있습니다.
Minimal 3D Photo effect on the web
The 3D Photo effect - popularized by Facebook, is immensly satisfying to look at. It can make for pretty parallax-like background effects, and it can be partially replicated in 10 minutes with just a few easy steps!
React 中的 Canvas 动画
Canvas动画,从DOM到React。
信也虚拟互娱开发引擎——XPlay
揭秘《信也虚拟互娱开发引擎—XPlay》的架构设计、优化方案、适用场景
一书一世界:网文设定集设计始末
本文阐述了起点小说设定集从概念到落地的设计始末,在IP衍生方向的一些思路总结。