***Current price=full stack MOBA source code+3 3D hero models (including action and skill effects)+40 3D particle effects+19 PSD UI source files+VIP group+QQ technical exchange group**
***Absolute value for money! (The average outsourcing price for a single 3D character model action is over 10000 yuan)**
***The first mature MOBA project case of COCOS3D.**
***Including subsystems: mall, leaderboard, backpack, check-in, lottery, hero, enhancement, chat, matching 3v3**
***By purchasing this project, you can own the copyright of the materials and source code, which can be used for commercial purposes.**
## Elicition more 1、This set of source code cannot be resold or crowdfunded. Thank you for your support!
2、I suggest everyone not to pirate. If there are too many pirated versions, the author will not be interested in updating.
3、Based on the second development of this set of source code products, unauthorized sharing and sale of source code to third parties is not allowed. Authorization: bcp199 (indicate purpose)
4、Virtual products do not support refunds.
5、Contact the user who purchased the source code**Administrator WeChatbcp199**，Provide the order number to join **WeChat VIP learning group。**
6、Scan the QR code below to join the onlooker group and experience it first. ![image.png](https://download.cocos.com/CocosStore/resource/5f2c596765e74243a8816e06f6069999/5f2c596765e74243a8816e06f6069999.png) ## development environment - Engine version：Cocos Creator 3.8.3 - Programming languages: backend nodeJs, frontend TypeScript ## Adapted to platform | H5 | WeChat mini game | Android native | IOS native | Tiktok games | OPPO mini game | Vivo mini games | | ---- | ---------| ----------- | -------|-------|-------|-------| | ✔ | ✔ | ✔ | ✘ |✘ |✘ |✘ | ## Game Introduction - The game introduction project adopts frame synchronization for implementation. The advantage of frame synchronization compared to state synchronization is that it has low traffic consumption, can achieve detailed control and a sense of impact, and naturally supports video playback, making it suitable for MOBA games. - MOBA real-time PK adopts backend nodejs+docker+mongo+redis, and frontend Cocos Creator 3.8.3. - After changing the network protocol, users only need to click on the cmd executable file, which will be automatically copied to the corresponding directory. - The project data configuration file is generated using JSON and Excel. - Excel can be used to quickly and efficiently edit data, and the generated JSON files can be efficiently read in the program. - The backend adopts a service separation approach for the main server and combat server. The combat server is implemented using frame synchronization, while the server-side only handles message forwarding and does not calculate combat logic. Calculate the combat logic by the client. If the client player has no operation, the package will not be uploaded to the server, significantly reducing player traffic and improving client performance. There are over 100000 lines of effective code in the front-end and back-end combined. - The project code is refreshing, neat, and concise, easy to learn, suitable for learning, secondary development, and online deployment. - Based on this project, developing products similar to Honor of Kings or 300 major battles can save at least six months of development workload. With the code foundation of this project, it can be modified to any other type of MOBA game. - There are 3 3D heroes (including model action effects), 40 3D particle effects, and 19 PSD UI source files, which are worth it. - According to market prices, one 3D character model and several actions for art resources (with an average outsourcing price of over 10000), one UI interface of 1000, and one special effects of 300-500 ## Introduction to Project Frame Synchronization ### 一、Frame synchronization basic logic ![图片1.png](https://download.cocos.com/CocosStore/markdown/00adbaf9be9d4d609c18645bb0764783/00adbaf9be9d4d609c18645bb0764783.png)
1. The client is used to process battle logic and sends player operation data to the server every 66ms. In order to improve the performance of the client, it is changed to not send data to the server if the player has no operation 2. The server is only responsible for forwarding client operations and synchronizing all player operation data to players in the same room every 66ms 3. When the server receives the operation data sent by the player, it will store the data according to the server's frame number 4. The server will synchronize n frames of operation data with the player in n+1 frames, and at this time, the server is also collecting n+1 frames of player operation data 5. The client parses the frame data sent by the server to update the logical position, and the rendering position is interpolated smoothly in the update to catch up with the logical position ### 二、Floating point problem 1. Amplification factor rounding method (decimal error is usually in the last few decimal places, the player's initial rendering position is enlarged and then rounded, and then calculated based on the enlarged data)
2. Table lookup method (trigonometric function sin,...) COS may have decimal errors when operated on different platforms, and the x of each angle can be adjusted The y component is stored in the configuration file, so when using it, it can be directly queried, reducing computational consumption 3. Use fixed-point physics math library, project uses decimal.js, more fixed-point physics libraries can be viewed[The best fixed-point number library for JS and TS](https://blog.csdn.net/licky121/article/details/114583682) ### 三、Packet loss issue 1. Client packet loss It doesn't have much impact. You can try how many mouse clicks can be made per second, which is a maximum of four times. The frame rate for the client collection operation is 66ms per second, which is equivalent to collecting 15 times per second. Therefore, even if the current frame is lost due to poor network conditions, the next frame can be collected quickly. 2. Server packet loss The client uploads the frame number that needs to be reissued, and the server will immediately reissue the lost frame operation ### 四、interpolation The rendering position interpolation follows the logical position, and the rendering rotation interpolation follows the logical rotation, making the performance smooth and smooth. ### 五、Disconnect and reconnect Breaks and reconnections are divided into major and minor disconnections. Major disconnections and reconnections involve killing game processes in a game, then re entering and reading locally cached frames to accelerate playback. Lost frames are requested to be issued by the server until they catch up with the latest progress. A small disconnection is a network failure that quickly recovers and the game does not exit. At this point, the client will request frame replacement, and the server will immediately issue the lost frame ### 六、Pre performance Pre performance involves rehearsing oneself based on real-time client operations, while pre performance involves rehearsing other players based on the player's last operation, and then reconciling them based on authoritative server responses, achieving a mobile experience similar to a single player game. ## MOBA frame synchronization project case introduction ### 1. Introduction - As is well known, "King of Glory" and "League of Legends Mobile Game" are both the top 5 grossing games, but not all of them are in the MOBA category. For example, "300 Battle" has been developed from PC games to mobile games and small games, and the performance of PC and mobile games is also impressive, with an operating experience that is not inferior to that of "King of Glory". Now "300 Battle" also has WeChat small games, which are a mixed operation of IAA and IAP. They are the only ones in the MOBA category, and the natural quantity has been given to them. Everyone can try them out. This is our competitor, developed using the laya engine. Next, we will use the Cocos engine to achieve it. Beyond him, more Cocos developers can learn and learn from him. Of course, it would be even better to create a small game with innovative MOBA gameplay. There are several MOBA games on Google that are far from creative, with over 100 million downloads, Compared to other categories, this category is much smaller, so mastering the frame synchronization technology for developing MOBA games not only allows you to create Honor of Kings, but also allows you to create the popular online game Paluparu on Steam. ![image.png](https://download.cocos.com/CocosStore/resource/708b2fb75e334911850141838e894cd7/708b2fb75e334911850141838e894cd7.png) ### 2.Introduction to frame synchronization and state synchronization - Frame synchronization is mainly to ensure a good gaming experience for certain types of games during synchronization. Game types typically include competitive games such as MOBA, shooting, and combat, which require precise damage assessment and timely feedback. The combat logic is calculated locally. The network only forwards player operation information (such as movement and attack instructions), and does not synchronize player status information (such as position, rotation, health, etc.). Because the logic is calculated locally, it is necessary to ensure that all clients can calculate consistent results. When it comes to frame synchronization, it is necessary to mention state synchronization. The biggest difference between these two technologies is where the combat logic is written. Simply put, state synchronization refers to having an authoritative server running a client without a graphical interface, where the server collects everyone's operational data, calculates it, and then broadcasts everyone's key data. The player's client is just a playback display of the server. Each client in frame synchronization needs to calculate all data, and servers only need to forward their operations to each other. - **Development efficiency**：Because the combat logic is written on the client side, and the server side is only responsible for forwarding operation messages, there is no need for additional docking work during dual end development, so frame synchronization development is highly efficient. - **Traffic consumption**：State synchronization requires forwarding state information, which contains a lot of information, while frame synchronization only forwards operation information, so the traffic consumption is small. - **Detail feedback**：The core advantage of frame synchronization lies here. The client side frame synchronization achieves better handling of combat details by following operation commands, enabling more micro operations, such as multi skill rotation, rotating the large knife for 3 seconds, slowing down the attacked, and being able to move and attack (state synchronization is difficult to achieve), making it more natural and smooth. - **Network fluctuations**：Frame synchronization, due to the pursuit of feedback on detailed operations, is greatly affected when the network fluctuates. However, using UDP can solve this problem to the greatest extent, while state synchronization mostly uses TCP, which requires a large amount of data to be transmitted. When the network fluctuates, it will be slower and not provide a good gaming experience. And frame synchronization naturally supports UDP, in addition, it needs to be combined with rehearsal, reconciliation, and interpolation smoothing to make players feel no delay. - **Security**：Because in state synchronization, the core combat logic is calculated and verified on the server, making it relatively safe. Although frame synchronization and anti cheating are relatively poor, there are also many solutions, such as post discovery penalty handling, legal processing, or comparing the results uploaded by multiple clients when processing results, with a minority obeying the majority, etc. - **Combat replay and observation**：Because the frame synchronization server records data for each frame, when playing back or watching a game, all you need to do is execute the operation information for each frame, which is naturally supported. - **Disconnect and reconnect**：You can check how long the disconnection lasts, but state synchronization can be done in seconds. Frame synchronization requires a frame tracking process, so you can quickly calculate how long it has been offline by adding frames or using game mechanisms such as short-term games. If a game lasts for 10 minutes, there is no need to worry about the problem of being offline for too long because it ends quickly or if it has been offline for too long, it can be dealt with as running away. Offline for 6 minutes, reconnecting for 1 minute, our current time consumption. If it's just network fluctuations, we can recover frames in seconds. - **Performance consistency**：The core is actually to ensure the consistency of performance and a fair competitive experience for all clients. State synchronization does not require high consistency in results. For example, the enemy position you see is actually a position within a time interval on the server. After network transmission, delay objectively exists. Therefore, at this point, the enemy position you are playing may have already moved out of place and may be empty. This is the problem of inconsistent performance. Unless it is a directional skill or faster server synchronization, it will also consume server performance. For example, CSGO's server is 128 tickets, while CrossFire is 8 tickets. I heard that the upgrade has been made to 16 tickets, and this situation may occur. For example, I hid behind a building, but... Still hit, that's because when the server settled, your position was still in the previous position, And the location of your client's preview has already reached the back of the building. However, frame synchronization does not have this issue because all commands are executed locally on the client side by frame, and all clients obtain the same result at the same time with the same input. Finally, in fact, frame synchronization and state synchronization are often complementary entities. In this era, many commercial games also use both technologies simultaneously in the same game, taking advantage of their strengths and weaknesses. However, this mechanism will increase a lot of development difficulty and operational costs in MOBA 3D projects. For more details, please refer to the friendship link provided later. In League of Legends mobile game, it is still pure frame synchronization, and in Honor of Kings, it is the same. It was only after making a lot of money that it achieved better results. For example, it can now break for 5 minutes in seconds. Everyone can give it a try, which requires a process of optimization and more server resources to assist. So based on development efficiency, network transmission efficiency, and operational performance experience, we also use pure frame synchronization like in Honor of Kings and League of Legends mobile games. Regarding frame synchronization, provide the following three friendly links for in-depth research and learning. - 1.[Review by the Technical Director of "King of Glory": Without crossing these three mountains, another MOBA dominates the market.](https://www.cnblogs.com/colourstar/p/7880085.html) - 2.[Network Game Synchronization Technology] Consistency of Frame Synchronization](https://www.cnblogs.com/lancidie/p/8661033.html) - 3.After two days of real-time multiplayer battles, surprisingly, even with a 200ms delay, it was smooth and smooth(https://mp.weixin.qq.com/s/V1YWPF5LmY-l1L5LF2nR3A) ### 3.Introduction to project structure Team: 4 people, 1 UI with original artwork, 1 modeling, 2 full stack development (1 proficient in client and 1 proficient in server) Project: The front-end uses CocosCreator 3.8.3, and the back-end uses nodejs+docker+mongo+redis. The front-end and back-end use the protobuffer proto3 syntax, while the server provides HTTP/WebSocket/UDP support for JSON and binary parsing. Currently, UDP is used in WeChat mini games. ![image.png](https://download.cocos.com/CocosStore/resource/cf9a5812a91b4fa59e643c4a7e3aca5b/cf9a5812a91b4fa59e643c4a7e3aca5b.png) At present, login, registration, and matching all belong to the lobby server process, and the combat server is an independent process The client only connects to the lobby server in the lobby. After successful matching, it connects to the battle server and disconnects it. After the battle ends, it connects to the lobby server and disconnects the battle server. The client has AI and can click on automatic combat, and computer humans are also AI capable of automatic combat. catalogue： ![image.png](https://download.cocos.com/CocosStore/resource/c0bae80dcdfe44b8993a59766da25415/c0bae80dcdfe44b8993a59766da25415.png) Art Catalog： ![image.png](https://download.cocos.com/CocosStore/resource/f29ba4921f4a442d8bb6c17e3b1fccf1/f29ba4921f4a442d8bb6c17e3b1fccf1.png) Doc directory： ![image.png](https://download.cocos.com/CocosStore/resource/b564e07f006b470eaa09b14545d127e5/b564e07f006b470eaa09b14545d127e5.png) Excel Table of Contents： ![image.png](https://download.cocos.com/CocosStore/resource/a428e274a085461786325942f4dcb906/a428e274a085461786325942f4dcb906.png) Tabels directory： ![image.png](https://download.cocos.com/CocosStore/resource/9087a73fe4614d8a8ae0a2942b48b16c/9087a73fe4614d8a8ae0a2942b48b16c.png) Proto directory: read before using the project/Src/Proto/README.docx ![image.png](https://download.cocos.com/CocosStore/resource/77f274c892424c0b8320861648735240/77f274c892424c0b8320861648735240.png) Front end code： ![image.png](https://download.cocos.com/CocosStore/resource/d21474b3c6284092b8219b6f2331fd92/d21474b3c6284092b8219b6f2331fd92.png) ![Start2.png](https://download.cocos.com/CocosStore/resource/82351119bfe648578c022f42b4f5e413/82351119bfe648578c022f42b4f5e413.png) ![Home2.png](https://download.cocos.com/CocosStore/resource/58a84d2d8f0c4231a1e68c2b1af26ff7/58a84d2d8f0c4231a1e68c2b1af26ff7.png) ![image.png](https://download.cocos.com/CocosStore/resource/8df1b60a811e4f7e905620d5ee29d52b/8df1b60a811e4f7e905620d5ee29d52b.png) Server entrance code： ![入口代码.png](https://download.cocos.com/CocosStore/resource/3f8eb423f6a34b8bacfb1bdd6071220f/3f8eb423f6a34b8bacfb1bdd6071220f.png) Server request interface code： ![请求接口代码.png](https://download.cocos.com/CocosStore/resource/ca72523035f0454088304ae6a9164d29/ca72523035f0454088304ae6a9164d29.png) Server request distribution logic： ![请求分发逻辑.png](https://download.cocos.com/CocosStore/resource/cbb94ebfafba4747ae0cd1c86cadb785/cbb94ebfafba4747ae0cd1c86cadb785.png) Game screenshot： ![start.png](https://download.cocos.com/CocosStore/resource/4acb8aa3cf8c4633ba46858b44d6b06c/4acb8aa3cf8c4633ba46858b44d6b06c.png) ![Hone.png](https://download.cocos.com/CocosStore/resource/8111149cc29f44e094c6753a67beb16f/8111149cc29f44e094c6753a67beb16f.png) ![image.png](https://download.cocos.com/CocosStore/resource/cb4c2bec948d42e09d8c9ddf73e06b19/cb4c2bec948d42e09d8c9ddf73e06b19.png) ![image.png](https://download.cocos.com/CocosStore/resource/95890e96e73843159b54dde7b91ddc4a/95890e96e73843159b54dde7b91ddc4a.png) ![image.png](https://download.cocos.com/CocosStore/resource/7137b766bc1841dfa63ff390772b0768/7137b766bc1841dfa63ff390772b0768.png) ![image.png](https://download.cocos.com/CocosStore/resource/5374313ddb3646109b7af9051f1933df/5374313ddb3646109b7af9051f1933df.png) ![image.png](https://download.cocos.com/CocosStore/resource/ee8f10906dd5428fb6466c10365eada8/ee8f10906dd5428fb6466c10365eada8.png) ![image.png](https://download.cocos.com/CocosStore/resource/305170bbf197420bad3baa01c8496b1d/305170bbf197420bad3baa01c8496b1d.png) ![image.png](https://download.cocos.com/CocosStore/resource/ea02578bb63340b0acc687deb65e53d6/ea02578bb63340b0acc687deb65e53d6.png) ![image.png](https://download.cocos.com/CocosStore/resource/f3b0146768424d4f9e36938c4d2cf59a/f3b0146768424d4f9e36938c4d2cf59a.png) ![image.png](https://download.cocos.com/CocosStore/resource/66f1aff207a64eb586ddf7e2adeec299/66f1aff207a64eb586ddf7e2adeec299.png) ![image.png](https://download.cocos.com/CocosStore/resource/853c6e2a26c94f469085bccf57a0d34c/853c6e2a26c94f469085bccf57a0d34c.png) ![1.png](https://download.cocos.com/CocosStore/resource/276288441d884e67b300d05b899355af/276288441d884e67b300d05b899355af.png) ![22.png](https://download.cocos.com/CocosStore/resource/6937eb2513d548ef953d384149c755d1/6937eb2513d548ef953d384149c755d1.png) ![33.png](https://download.cocos.com/CocosStore/resource/693007f4123b471cba29efb44402fa66/693007f4123b471cba29efb44402fa66.png) ![image.png](https://download.cocos.com/CocosStore/resource/2f78f636d5b1404fabaaa1acadf7f207/2f78f636d5b1404fabaaa1acadf7f207.png) ****Material copyright**** - Both source code and art resources are commercially available ****Purchase Notice**** - This product is a paid virtual product, and once purchased successfully, there is no refund. Please carefully confirm the purchase content before making the payment. ****Contact the author**** - QQ：3306753685 WeChat：bcp199 或 Monkey_Games ![image.png](https://download.cocos.com/CocosStore/resource/f7c7dc2fa5614c9c996ab5aa53ec209b/f7c7dc2fa5614c9c996ab5aa53ec209b.png)