介绍 PixiJS 宇宙!
我们很高兴地宣布 PixiJS 宇宙的启动,这是一个旨在进一步增强 PixiJS 功能的计划,使开发者更容易创建出色的游戏和应用。
🌐 We are excited to announce the launch of the PixiJS Universe, an initiative to further enhance the capabilities of PixiJS and make it even easier for developers to create amazing games and apps.
多年来,PixiJS 一直是 Web 上最流行的 2D 渲染器,但它一直只是“一个渲染引擎”。社区创建了许多出色的工具来帮助开发者使用 PixiJS 构建游戏和应用,但我们缺乏人手来维护和改进这些工具,导致社区出现分裂。 为了解决这个问题,Playco 组建了一支专门的开发团队,他们将全职从事 PixiJS 的开发工作。在接下来的 12 个月里,我们计划开展十多个项目,在本次公告中,我们希望介绍其中的一些项目。
🌐 For years, PixiJS has been the most popular 2D renderer for the web, but it was always "just a rendering engine." The community has created many great tools to help developers build games and applications with PixiJS, but we lacked the manpower to maintain and improve these tools, causing fragmentation in the community. To address this, Playco has assembled a dedicated team of developers who will work on PixiJS full-time. Over the next 12 months, we have more than ten projects planned, and in this announcement, we would like to introduce some of them.
第一阶段
🌐 Phase 1
我们有几个新的项目正在进行中,我们将在一年内分四个阶段发布它们。我们目前接近第一阶段的结束,这一阶段已经发布了几个令人兴奋的 PixiJS 新工具和库:
🌐 We have several new projects in the works, and we are releasing them in four phases over the year. We are currently nearing the end of phase 1, which has seen the release of several exciting new tools and libraries for PixiJS:
PixiJS 网站
🌐 PixiJS Website
首先,我们很高兴地宣布,我们将发布 PixiJS 新网站的测试版。
🌐 First up we are excited to announce that we will be releasing a beta version of our new website for PixiJS.
当前的文档经过多年的长期自然增长,结构较少,因此大部分 PixiJS 文档分散在多个网站上。这个新网站将把你所需的一切集中在一个地方,并且可以轻松搜索。
🌐 The current documentation has suffered from long-term organic growth over the years with little structure and as such much of the PixiJS documentation is fragmented across multiple sites. This new website will put everything you need in one place and be easily searchable.
我们也计划改进文档,增加更多指南和示例,并考虑将文档翻译成其他语言。
🌐 We are also planning on improving the documentation and adding more guides and examples, as well as considering translating the documentation into other languages.
如果你有任何关于如何改进网站的想法,请告诉我们!
🌐 If you have any ideas on how to improve the site please let us know!
PixiJS React
🌐 PixiJS React
接下来是 PixiJS React。这是一个提供在 React 应用中使用 PixiJS 的库。PixiJS React 是 Patrick Brouwer 创建的 react-pixi 库的延续,该库已被 PixiJS 社区广泛用于 React 项目。PixiJS 已接管该库的维护,并致力于提升库的性能、文档以及对新功能的支持。
🌐 Next up is PixiJS React. A library that provides a way to use PixiJS in React applications. PixiJS React is a continuation of the react-pixi library created by Patrick Brouwer, which has been widely used by the PixiJS community in React projects. PixiJS has taken over maintenance of the library and is dedicated to improving the library's performance, documentation, and support for new features.
该库提供了一个易于使用的界面,使开发者能够轻松使用 PixiJS 创建 React 应用。该库集成了 PixiJS 的所有核心功能,并允许你为第三方库创建自定义组件。
🌐 The library provides an easy-to-use interface that makes it easy for developers to create React applications with PixiJS. The library integrates all the core features of PixiJS and allows you to create custom components for 3rd party libraries.
PixiJS 开放游戏
🌐 PixiJS Open Games
我们现在发布了一个名为“PixiJS Open Games”的新代码仓库。这是一个开源游戏集合,展示了如何使用 PixiJS 来创建游戏,并在 MIT 许可证下发布。这些游戏的目的是提供如何使用 PixiJS 进行游戏开发的专业示例。
🌐 We have now released a new repository called "PixiJS Open Games". This is a collection of open-source games that showcases how to use PixiJS to create games and is released under the MIT license. The purpose of these games is to provide professional examples of how to use PixiJS for game development.
发布的前两款游戏是一款三消游戏和一款泡泡射击游戏。这些游戏不仅展示了如何使用 PixiJS 进行游戏开发,还展示了如何使用其他库,例如 PixiJS UI 和 AssetPack。我们还计划发布更多游戏,这些游戏将展示如何将 PixiJS 与其他库结合使用,例如 PixiJS Layout 和 PixiJS React。
🌐 The first two games released are a match-3 game and a bubble shooter game. These games not only demonstrate how to use PixiJS for game development but also how to use other libraries such as PixiJS UI and AssetPack. We also have more games planned for release, which will demonstrate how to use PixiJS with other libraries such as PixiJS Layout and PixiJS React.
PixiJS 开放游戏希望能成为希望学习如何使用 PixiJS 进行游戏开发的游戏开发者的宝贵资源,同时也将成为希望使用 PixiJS 创作自己游戏的开发者的巨大灵感来源。该项目可在 GitHub 上获取,供任何想要探索代码或为该项目做出贡献的人使用。
🌐 PixiJS Open Games will hopefully be a valuable resource for game developers who want to learn how to use PixiJS for game development and will also be a great source of inspiration for developers looking to create their own games using PixiJS. The project is available on GitHub for anyone who wants to explore the code or contribute to the project.
PixiJS 用户界面 & PixiJS 布局
🌐 PixiJS UI & PixiJS Layout
PixiJS UI 是一个为希望使用 PixiJS 创建美观且功能齐全的用户界面的开发者设计的新库。该库包括一系列组件,如按钮、复选框、滑块、文本输入框、滚动视图、列表、单选按钮和进度条,这些组件可以轻松集成到你的游戏中。这些组件高度可定制,允许你调整每个元素的外观和行为,以满足你游戏的具体需求。
🌐 PixiJS UI is a new library for developers who want to create beautiful and functional user interfaces with PixiJS. The library includes a range of components such as buttons, checkboxes, sliders, text inputs, scroll views, lists, radio buttons, and progress bars, which can be easily integrated into your game. These components are highly customizable, allowing you to tweak the appearance and behaviour of each element to fit your game's specific needs.
PixiJS UI 已被用于所有开源游戏中,因此可以随意查看这些游戏以获取实际例子。
🌐 PixiJS UI has been used in all of the open-source games, so feel free to check these out for real-world examples.
PixiJS Layout 是另一个可以让开发者生活更轻松的库。这个库使你能够使用 PixiJS 创建响应式布局,这意味着你可以设计适应不同屏幕尺寸和宽高比的界面。PixiJS Layout 与 PixiJS UI 配合良好,允许你结合两个库来创建复杂的、动态的界面,这些界面会响应用户输入和屏幕变化。
🌐 PixiJS Layout is another library that can make your life as a developer easier. This library enables you to create responsive layouts using PixiJS, which means you can design interfaces that adapt to different screen sizes and aspect ratios. PixiJS Layout works well with PixiJS UI, allowing you to combine both libraries to create complex, dynamic interfaces that respond to user input and screen changes.
使用 PixiJS Layout,你可以灵活创建可调整大小的布局,以适应任何屏幕尺寸或设备。这意味着你的游戏界面在从小型移动设备到大型桌面显示屏的所有设备上都可以看起来很棒。
🌐 With PixiJS Layout, you have the flexibility to create resizable layouts that can be adjusted to fit any screen size or device. This means that your game's interface can look great on everything from small mobile devices to large desktop displays.
PixiJS 布局仍在开发中,但将在接下来的几周内准备就绪
🌐 PixiJS Layout is still under development but will be ready in the next few weeks
资源包
🌐 AssetPack
最后,对于第一阶段,我们宣布推出 AssetPack。
🌐 Finally, for phase 1 we are announcing AssetPack.
资源管理是开发应用的重要组成部分,而新的 AssetPack 库旨在简化这一过程。AssetPack 是一个与框架无关的库,可以与任何框架一起使用,包括 PixiJS、ThreeJS 和 Phaser。它提供了一系列功能,帮助开发者高效管理他们的资源。 AssetPack 的关键功能是能够动态自动生成新资源。例如,你可以提供一个单独图片的文件夹,它将生成精灵表,这可以显著提高应用的性能。它还提供插件来生成多级贴图、将字体转换为不同格式、将音频转换为不同格式、压缩图片以及压缩 JSON。这些功能帮助开发者优化资源,以实现更快的加载时间、更好的性能和更优的用户体验。
🌐 Asset management is an important part of developing applications, and the new AssetPack library aims to make this process easier. AssetPack is a framework-agnostic library that can be used with any framework, including PixiJS, ThreeJS, and Phaser. It provides a range of features that help developers manage their assets efficiently. The key feature of AssetPack is the ability to automatically generate new assets on the fly. For example, you can provide it with a folder of individual images and it will generate sprite sheets, which can significantly improve the performance of your application. It also provides plugins to generate mipmaps, convert fonts to different formats, convert audio to different formats, compress images, and minify JSON. These features help developers optimize their assets for faster loading times, better performance, and improved user experience.
我们很快就会发布一篇新的博客文章,提供有关如何使用它的更多细节。它具有许多有用的功能和框架无关的设计。不过,如果你今天就想开始尝试,可以查看 GitHub 仓库。
🌐 We will soon be releasing a new blog post that provides more details on how to use it. With its many useful features and framework-agnostic design. However, if you want to get stuck in today then check out the GitHub repo
第二阶段
🌐 Phase 2
第二阶段将很快开始,旨在使使用 PixiJS 应用更加容易。
🌐 Phase 2 will begin shortly and aims to make it easier to work with PixiJS applications.
PixiJS 快速入门
🌐 PixiJS JumpStart
Jumpstart 是由 PixiJS 团队开发的一款新的命令行工具,用于简化创建新的 PixiJS 应用的过程。使用此工具,开发者将不再需要设置复杂的工具链或担心设置不同的打包器和框架。该工具会为你处理所有设置,让你专注于构建你的应用。
🌐 Jumpstart is a new CLI tool being developed by the PixiJS team to simplify the process of creating new PixiJS applications. With this tool, developers will no longer need to set up complicated tooling or worry about setting up different bundlers and frameworks. The tool will handle all the setup for you, allowing you to focus on building your application.
Jumpstart 将类似于其他命令行工具,如 Create-React-App 或 Create-Vue,这些工具在前端开发社区中已经非常流行。该工具将为不同的打包工具和框架提供模板,包括 webpack、parcel、rollup 等。这将使开发者无论使用何种工具和工作流程,都能轻松上手 PixiJS。使用 Jumpstart,你只需几分钟就能创建一个新的 PixiJS 应用,并立即开始构建。
🌐 Jumpstart will be similar to other CLI tools such as Create-React-App or Create-Vue, which have become popular in the front-end development community. The tool will provide templates for different bundlers and frameworks, including webpack, parcel, rollup, and more. This will make it easy for developers to get started with PixiJS regardless of their preferred tools and workflows. With Jumpstart, you'll be able to create a new PixiJS application in just a few minutes and start building right away.
PixiJS 开发工具
🌐 PixiJS Dev Tools
PixiJS 开发工具将是一个浏览器扩展,计划即将发布,以帮助开发者调试他们的 PixiJS 应用。该工具旨在让开发者更容易理解 PixiJS 的内部工作原理,优化他们的代码,并遵循最佳实践。它旨在帮助开发者诊断性能问题并可视化他们的应用所消耗的资源。
🌐 PixiJS dev tools will be a browser extension that is planned to be released soon to help developers debug their PixiJS applications. This tool aims to make it easier for developers to understand the inner workings of PixiJS, optimize their code, and follow best practices. It is designed to help developers diagnose performance issues and visualize the resources that their applications are consuming.
PixiJS 开发工具的一个关键特性是它能够帮助开发者理解 PixiJS 中批处理的复杂过程。批处理是一种用于优化在同一次绘制调用中渲染多个对象的技术。这个过程可能很难理解,尤其是对于新手开发者。PixiJS 开发工具旨在使调试和优化对象的渲染变得更容易。
🌐 One of the key features of the PixiJS Dev Tools is its ability to help developers understand the complex process of batching in PixiJS. Batching is a technique used to optimize the rendering of multiple objects in the same draw call. This process can be complicated to understand, especially for new developers. PixiJS Dev Tools aims to make it easier to debug and optimize the rendering of objects.
总体而言,PixiJS 开发工具将是一款强大的工具,它将使开发者更容易使用 PixiJS 构建高性能、视觉震撼的应用。通过为开发者提供对 PixiJS 内部工作原理的更深入理解,该工具集将帮助开发者优化代码,并创建更高效、更具吸引力的应用。
🌐 Overall, PixiJS Dev Tools will be a powerful tool that will make it easier for developers to build high-performance, visually stunning applications with PixiJS. By providing developers with a deeper understanding of the inner workings of PixiJS, this toolset will help developers optimize their code and create more efficient and engaging applications.
第三阶段
🌐 Phase 3
第3阶段是我们长期项目开始被揭示的地方。这些是我们对PixiJS生态系统进行的重大改变,我们对此感到非常兴奋
🌐 Phase 3 is where our long-term projects start to be revealed. These are major changes to the PixiJS ecosystem that we are incredibly excited about
彗星
🌐 Comet
Comet 将成为一个新的编辑器,旨在比以往任何时候都更容易使用 PixiJS 设计和创建游戏及应用。凭借其直观且用户友好的界面,该编辑器旨在吸引设计师和开发者,使双方能够协作并更高效地工作。
🌐 Comet will be a new editor that aims to make it easier than ever to design and create games and applications with PixiJS. With its intuitive and user-friendly interface, the editor is designed to appeal to both designers and developers, allowing both groups to collaborate and work more efficiently.
Comet 的一个突出特点是它提供的用于创建和编辑场景、精灵、动画等的可视化界面。这意味着设计师可以创建和编辑复杂的场景,而无需编写一行代码。编辑器提供了一系列用于创建精灵、动画和其他游戏元素的工具和选项,使得开始创建游戏或应用变得非常容易。
🌐 One of the standout features of Comet is the visual interface it provides for creating and editing scenes, sprites, animations, and more. This means that designers can create and edit complex scenes without ever having to write a single line of code. The editor provides a range of tools and options for creating sprites, animations, and other game elements, making it easy to get started with creating a game or application.
此外,开发者将会欣赏运行时播放器功能,它允许他们轻松地在自己的应用中重现场景。这使得测试和迭代设计变得容易,确保最终产品既功能完善又视觉吸引人。借助多用户实时协作,Comet 使团队能够轻松合作,共享资源和创意,并在创纪录的时间内创建高质量的游戏和应用。
🌐 In addition, developers will appreciate the runtime player feature, which allows them to easily recreate scenes in their own applications. This makes it easy to test and iterate on designs, ensuring that the final product is both functional and visually appealing. And with multi-user, real-time collaboration, Comet makes it easy for teams to work together, sharing assets and ideas and creating high-quality games and applications in record time.
PixiJS v8
🌐 PixiJS v8
PixiJS v8 将是下一次重大版本更新,它代表了从头开始对 PixiJS 的完全重写。开发团队利用多年积累的丰富经验,对 PixiJS 核心引擎进行了改进和优化。新版本的 PixiJS 旨在更快、更高效,与 v7 相比(目前为 x2),在渲染性能上提供了显著提升。
🌐 PixiJS v8 will be the next major release that represents a complete rewrite of PixiJS from the ground up. The development team has leveraged their extensive experience over many years to make improvements and optimizations to the core PixiJS engine. The new version of PixiJS is designed to be faster and more efficient, providing a significant improvement in rendering performance compared to v7 (currently sitting at x2)
PixiJS v8 最令人兴奋的功能之一是对 WebGPU 的原生支持,WebGPU 是由主要浏览器厂商开发的一种新的图形 API。这将使开发者能够利用先进的 GPU 功能,从而显著提升图形密集型应用的性能。除了对 WebGPU 的支持外,PixiJS 团队还做出了重大努力来优化画布渲染器引擎,对于希望减小包体积的开发者来说,这将作为一个原生选项提供。
🌐 One of the most exciting features of PixiJS v8 is the inclusion of first-class support for WebGPU, which is a new graphics API that is being developed by major browser vendors. This will enable developers to take advantage of advanced GPU capabilities, which can significantly improve the performance of graphics-intensive applications. In addition to WebGPU support, the PixiJS team has also made a significant effort to optimize the engine for the canvas renderer, which will be available as a first-class option for developers looking to reduce bundle size.
总体而言,PixiJS v8 对我们来说是一个重大进步,开发者可以期待一个更快、更高效的引擎,更适合构建复杂、图形密集型的应用。
🌐 Overall, PixiJS v8 represents a major leap forward for us, developers can expect a much faster and more efficient engine that is better suited for building complex, graphics-intensive applications.
第四阶段
🌐 Phase 4
第四阶段代表了 PixiJS 向新字段的跃进,因为我们希望更深入地探索严格二维渲染之外的字段。
🌐 Phase 4 represents a leap into new territory for PixiJS as we look to delve deeper into areas outside of strictly 2D rendering.
PixiJS 3D
🌐 PixiJS 3D
多年来,Goodboy(现为 Playco)一直拥有一个名为 Odie 的内部 3D 引擎,它是基于 PixiJS 构建的。我们现在计划将其开源,对于那些希望在游戏或应用中无缝混合 2D 和 3D 内容的人来说,这是非常令人兴奋的。有了 PixiJS 3D,你将不再需要在不同的引擎或框架之间切换,就能在项目中加入 3D 元素。
🌐 For years, Goodboy (now Playco) has had an internal 3D engine called Odie that was built on top of PixiJS. We are now planning to open-source it, which is exciting for those of you who want to seamlessly mix 2D and 3D content in your games or applications. With PixiJS 3D, you will no longer need to switch between engines or frameworks to incorporate 3D elements in your project.
尽管这是一个长期项目,团队正在取得进展,并计划在今年晚些时候分享更多信息。此次发布将大大扩展 PixiJS 的功能,并在开发者构建应用时提供更多灵活性。
🌐 Although this is a long-term project, the team is making progress and plans to share more information later in the year. This release will greatly expand PixiJS's capabilities and give developers even more flexibility when building their applications.
PixiJS 游戏引擎
🌐 PixiJS Game Engine
最后,我们很高兴地宣布,我们将开发一个名为 PixiJS 游戏引擎的新库。这个游戏引擎旨在提供你对 2D/3D 游戏引擎所期望的一切,并将提供许多功能和工具,以使游戏开发更加轻松和高效。
🌐 Finally, we are thrilled to announce that we will be working on a new library called PixiJS Game Engine. This game engine aims to provide everything you would expect from a 2D/3D game engine and will offer many features and tools to make game development easier and more efficient.
PixiJS 游戏引擎的一些功能将包括对物理引擎、音频、输入处理、资源加载和管理、状态管理、动画和补间等的支持。
🌐 Some of the features of PixiJS Game Engine will include support for physics engines, audio, input handling, asset loading and management, state management, animation and tweening, and more.
结论
🌐 Conclusion
我们已经分享了许多关于即将到来的 PixiJS 社区新项目和更新的令人兴奋的消息。在接下来的几个月里,有很多值得期待的内容。
🌐 We've shared a lot of exciting news about new projects and updates coming to the PixiJS community. There's a lot to look forward to in the upcoming months.
我们想向 PixiJS 社区、其贡献者以及 Playco 表示诚挚的感谢,感谢他们让这一切成为可能。我们很高兴看到大家将使用这些新工具和资源创造出什么,同时我们也期待继续支持和发展 PixiJS 生态系统。务必查看上面提到的 GitHub 链接,并关注更多关于 PixiJS 宇宙的更新!
🌐 We want to extend our sincere thanks to the PixiJS community, its contributors, and Playco for making all of this possible. We're excited to see what you'll create with these new tools and resources, and we look forward to continuing to support and grow the PixiJS ecosystem. Be sure to check out the GitHub links mentioned above and stay tuned for more updates on the PixiJS Universe!
