| In the field of adventure game(AVG),Cheng Guang platform has always been the representative.It provides desktop application to make games.But,with the rapid development of the Internet and the increased production requirements of games,existing game production methods and environments have been unable to meet the needs of users.Also,game editor on PC has low user conversion rate and is difficult to get started.Therefore,how to develop a system that can not only allows experts to complete the game production efficiently but also allows novice users to make games with low thresholds has become a problem that the system focuses on solving.Therefore,NetEase Games develops "Yi Ci Yuan" system based on web technology.The game making subsystem of this system not only supports the canvas mode in game production which is easy to get started,but also provides code mode for professional user for whom can efficiently completes the work.The project uses React and Redux as the framework for JavaScript development.React’s virtual DOM can efficiently render changed part of the page,and Redux can manage the status and data of complex projects well.Webpack is used for modular packaging and it provides pre-compilation support for some frameworks.This thesis focuses on the design and implementation of the front-end part of the project in canvas mode through the above-mentioned technologies and frameworks.It mainly elaborates these parts,including the UI editor,rich interactive components,attributes and animation panels,dialog module and game configuration module,and also explains the optimization of batch files uploading and how to solve frequent canvas operations with message queues.The code mode of editing system is aleady online,and contracted users can efficiently complete high-quality works through the code mode;the canvas mode makes creating games conveniently,so the producers can easily start making games. |