CN107670279A - The development approach and system of 3D web games based on WebGL - Google Patents
The development approach and system of 3D web games based on WebGL Download PDFInfo
- Publication number
- CN107670279A CN107670279A CN201711021642.XA CN201711021642A CN107670279A CN 107670279 A CN107670279 A CN 107670279A CN 201711021642 A CN201711021642 A CN 201711021642A CN 107670279 A CN107670279 A CN 107670279A
- Authority
- CN
- China
- Prior art keywords
- game
- webgl
- playcanvas
- logic
- web
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- A—HUMAN NECESSITIES
- A63—SPORTS; GAMES; AMUSEMENTS
- A63F—CARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
- A63F13/00—Video games, i.e. games using an electronically generated display having two or more dimensions
- A63F13/60—Generating or modifying game content before or while executing the game program, e.g. authoring tools specially adapted for game development or game-integrated level editor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/20—3D [Three Dimensional] animation
- G06T13/40—3D [Three Dimensional] animation of characters, e.g. humans, animals or virtual beings
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
The present invention relates to the development approach and system of the 3D web games based on WebGL, this method includes obtaining HTML5 canvas elements, and the drafting environment based on WebGL standards is established by canvas elements；Three-dimensional modeling is carried out to game model, and bone node is designed in the 3d gaming model of foundation；The modeling parameters and bone nodal information in 3d gaming model are extracted, the modeling parameters of extraction and bone nodal information are imported into PlayCanvas editing machines construction scene of game；Game scripts, game logic and role's logic are created, issue obtains the 3D web games.3D web game development approaches provided in an embodiment of the present invention based on WebGL, without installation file, a network address is opened in browser just can obtain the game experiencing of 3D effect, the game is run to can be achieved without download plug-in, and the game with cross-platform use, can improve the usage experience of user.
Description
Technical field
The present invention relates to Internet technical field, the development approach of more particularly to a kind of 3D web games based on WebGL
And system.
Background technology
Game industry is extremely important a member in current national strategy new industry, wherein with each side's surface technology
Ripe web game industry enters stage for steadily extending from fast development, 2016, web game market still keep compared with
For strong growth.In today that web game market competition becomes a flash point increasingly, the innovation of Technological expression power is expected to turn into
It is quick to break one of homogeneous, Emphasis on personality solution.
In the prior art in order to realize 3D effect in web terminal, it usually needs various plug-in units are installed, it is such to do
Drawback has a lot.First, browser is frequently necessary to update miscellaneous plug-in unit to obtain more preferable effect, user can be so allowed
It is fed up with；Second, more plug-in units means that more security risks, the attack meanses that computer is subject to are more；Third, this
A little plug-in units can be limited by different operating system and different browsers, such as the safari of apple abandons supporting flash, this
The Consumer's Experience of sample can be reduced significantly.
The content of the invention
In view of the above problems, it is proposed that the present invention so as to provide one kind overcome above mentioned problem or at least in part solve on
State a kind of development approach of 3D web games based on WebGL of problem.
In a first aspect, the embodiment of the present invention provides a kind of development approach of the 3D web games based on WebGL, including：Obtain
HTML5 canvas elements are taken, the drafting environment based on WebGL standards is established by the canvas elements；
Three-dimensional modeling is carried out to game model, and bone node is designed in the 3d gaming model of foundation；
The modeling parameters and bone nodal information in the 3d gaming model are extracted, by the modeling parameters and bone of extraction
Nodal information imports PlayCanvas editing machines construction scene of game；
Game scripts, game logic and role's logic are created, issue obtains the 3D web games.
In one embodiment, the importing PlayCanvas editing machines construction scene of game, including：
PlayCanvas editing machines are imported, initialization layout is carried out to game by the API that PlayCanvas is provided；
An object is instantiated, and is game addition light source and CCD camera assembly.
In one embodiment, the establishment game scripts include：Setting to physical effect and the arrangement to scene.
In one embodiment, the game logic includes：Game state switching, user interaction design, game leading role's life
Enemy's design, game points design and game level switched design in the design of life value, game.
In one embodiment, role's logic includes：Animation, Sounds script, inputted and detected to switch by user
The script for interacting switching state of personage and other objects in the script of state or game.
In one embodiment, after the establishment game scripts, game logic and role's logic, methods described bag
Include：
Game identification code is debugged, placed into service is started by Node.js, client and server is realized by websocket
The bidirectional real-time at end.
Second aspect, the embodiment of the present invention provide a kind of development system of the 3D web games based on WebGL, including：
Module is established in acquisition, for obtaining HTML5 canvas elements, is established and is based on by the canvas elements
The drafting environment of WebGL standards；
Modeling and Design module, for carrying out three-dimensional modeling to game model, and designed in the 3d gaming model of foundation
Bone node；
Import modul is extracted, for extracting the modeling parameters in the 3d gaming model and bone nodal information, will be carried
The modeling parameters taken import PlayCanvas editing machines construction scene of game with bone nodal information；
Release module is created, for creating game scripts, game logic and role's logic, issue obtains the 3D webpages
Game.
In one embodiment, the importing PlayCanvas editing machines construction scene of game in the extraction import modul,
Including：
PlayCanvas editing machines are imported, initialization layout is carried out to game by the API that PlayCanvas is provided；
An object is instantiated, and is game addition light source and CCD camera assembly.
In one embodiment, in addition to：Communication module, for realizing client and server end by websocket
Bidirectional real-time.
The beneficial effect of above-mentioned technical proposal provided in an embodiment of the present invention comprises at least：
The development approach of 3D web games provided in an embodiment of the present invention based on WebGL, including obtain HTML5's
Canvas elements, the drafting environment based on WebGL standards is established by the canvas elements；Three-dimensional is carried out to game model to build
Mould, and bone node is designed in the 3d gaming model of foundation；Extract the modeling parameters and bone in the 3d gaming model
Bone nodal information, the modeling parameters of extraction and bone nodal information are imported into PlayCanvas editing machines construction scene of game；Wound
Game scripts, game logic and role's logic are built, issue obtains the 3D web games.It is provided in an embodiment of the present invention to be based on
WebGL 3D web game development approaches, without installation file, one network address of opening just can obtain 3D effect in browser
Game experiencing, run the game and can be achieved without download plug-in, and the game can improve user with cross-platform use
Usage experience.
Other features and advantages of the present invention will be illustrated in the following description, also, partly becomes from specification
Obtain it is clear that or being understood by implementing the present invention.The purpose of the present invention and other advantages can be by the explanations write
Specifically noted structure is realized and obtained in book, claims and accompanying drawing.
Below by drawings and examples, technical scheme is described in further detail.
Brief description of the drawings
Accompanying drawing is used for providing a further understanding of the present invention, and a part for constitution instruction, the reality with the present invention
Apply example to be used to explain the present invention together, be not construed as limiting the invention.In the accompanying drawings：
Fig. 1 is the flow chart of the development approach of the 3D web games provided in an embodiment of the present invention based on WebGL；
Fig. 2 is game technology block schematic illustration provided in an embodiment of the present invention；
Fig. 3 is step S103 provided in an embodiment of the present invention flow chart；
Fig. 4 is the development approach Technical Architecture figure of citing provided in an embodiment of the present invention；
Fig. 5 is the block diagram of the development system of the 3D web games provided in an embodiment of the present invention based on WebGL.
Embodiment
The exemplary embodiment of the disclosure is more fully described below with reference to accompanying drawings.Although the disclosure is shown in accompanying drawing
Exemplary embodiment, it being understood, however, that may be realized in various forms the disclosure without should be by embodiments set forth here
Limited.On the contrary, these embodiments are provided to facilitate a more thoroughly understanding of the present invention, and can be by the scope of the present disclosure
Completely it is communicated to those skilled in the art.
Shown in reference picture 1, the development approach of the 3D web games provided in an embodiment of the present invention based on WebGL, deeply divide
WebGL realization principle has been analysed, and Analysis and Screening is carried out to game overall logic, development frame.Wherein：WebGL (writes Web entirely
Graphics Library) it is a kind of 3D drawing agreement, this drawing technique standard allows JavaScript and OpenGL ES
2.0 are combined together, and are bound by a JavaScript for increasing OpenGL ES 2.0, WebGL can be
HTML5Canvas provides hardware 3D and accelerates to render, and such web developer's can is come in browser more by system video card
3D scenes and model are shown glibly, moreover it is possible to which the navigation and data for creating complexity visualize.This method includes：Step S101~
S104；
S101, the canvas elements for obtaining HTML5, the drafting based on WebGL standards is established by the canvas elements
Environment；
S102, three-dimensional modeling is carried out to game model, and bone node is designed in the 3d gaming model of foundation；
S103, the modeling parameters in the extraction 3d gaming model and bone nodal information, by the modeling parameters of extraction
PlayCanvas editing machines construction scene of game is imported with bone nodal information；
S104, game scripts, game logic and role's logic are created, issue obtains the 3D web games.
In the present embodiment, before three-dimensional scenic or modeling rendering, it is necessary first to obtain HTML5 canvas elements, so
WebGL drafting environment is obtained by the element afterwards.Canvas canvas elements are a very important elements in HTML5,
Canvas elements can support the animation of superior performance and game to provide feasibility for HTML5.Canvas elements are substantially
Provide in a browser one piece can drawing area, JavaScript code can access the region, and pass through complete set
API carry out two dimensional image drafting.In addition, as long as video card hardware supports 3D graphing capabilitys, it is possible to is drawn using canvas
3D figures.
In step S102, in gaming, the classification of model is diversified, there is model of place, BUILDINGS MODELS, animation mould
The prop model that type, person model and role use.Game model of the present invention refers to, it is necessary to apply to game engine
In, the texture of model and the imagination of people can be embodied in gaming, for example " leading role to make a breakthrough " and " are chased after in game of making a breakthrough
By the enemy for the person of making a breakthrough " etc. be all game model.In this step, for example the three-dimensionals such as Blender, 3Dmax or maya can be utilized
Software, the three-dimensional modeling of game model is carried out, the threedimensional model created is imported bone node is created in Unity3D afterwards.
Multiple bone nodes can be distributed with threedimensional model, when skeleton motion, the summit being each attached on it is also moved therewith,
And then the motion of bone itself also results in the motion of other bones, eventually through the ranking operation between multiple skeleton motions,
The apex coordinate after motion can be calculated, draws and renders final model.Wherein：Blender is a opens
The cross-platform all-round three-dimensional animation making software in source, there is provided from modeling, animation, material, render, to audio frequency process, video clipping
Solution is made etc. a series of flash.Unity3D is that one developed by Unity Technologies makes player light
Pine create 3 D video game, building visualization, the type interaction content such as realtime three dimensional animation it is multi-platform comprehensive
Development of games instrument, it is a professional game engine integrated comprehensively.
Step S103 extracts modeling parameters and bone nodal information in above-mentioned 3d gaming model, makes as game resource
With importing PlayCanvas editing machine construction scene of game.Wherein modeling parameters, such as the position such as point, line, surface of threedimensional model
Coordinate etc..Physical effect is realized by PlayCanvas, and using the API development interfaces of its offer, passes through JavaScript faces
Programmed to object, step S104 creates game scripts, game logic and role's logic, and issue obtains the 3D web games.
Wherein：PlayCanvas is a visual development platform for being used for interactive web content.Its instrument built and Web applications
Program all provides support by HTML5.
Shown in reference picture 2, it is game technology block schematic illustration, both ends, client and service is related to during development of games
End.Client-side program carries out 3D using WebGL and rendered, and pass through HTML5 by written in JavaScript game logic, script
Interface arrangement music audio, such as can be with multimedia functions such as supported web page end Audio, Video, while use html5+
Css3 builds page UI, imports Play Canvas.The data storage of service end is built in MySQL database by Node.js
Vertical service, client-side program realize and communicated to connect that both sides can receive and send message with service end by WebSocket.
3D web game development approaches provided in an embodiment of the present invention based on WebGL, without installation file, in browser
One network address of interior opening just can obtain the game experiencing of 3D effect, run the game and can be achieved without download plug-in, and
The game with cross-platform use, can improve the usage experience of user.
In one embodiment, PlayCanvas editing machines construction sports ground is imported shown in reference picture 3, in step S103
Scape, including：
S1031, PlayCanvas editing machines are imported, initialization cloth is carried out to game by the API that PlayCanvas is provided
Office；
One S1032, instantiation object, and be game addition light source and CCD camera assembly.
In the present embodiment, scene setting does not have very complicated operation, it is only necessary to is instantiated, then again successively by light
Source, camera, threedimensional model etc. add scene.
The layout initialized first with the api interface that PlayCanvas frameworks provide to game, such as game are made
For a pc.Application instance object, basic component is then added for game：Light source and camera.Substantially generation
Code is as follows：
After having added light source and camera the two basic objects, a band pin how is added under next simply introducing
This and the object that possesses model resource, and the script of object should be write with what kind of specification.
The each object that be can be seen that by above code in game is pc.Entity instance object, and object leads to
This method of add Component () is crossed oneself to hang over component, method receives two parameters, and first character string parameter refers to
Determine the type of component, for example the type of the cube assignment components in example is " model " (model), second parameter is one right
As literal, the inside stores the details of component.If it is desired to being the object carry scripting object, following code institute is operated
Show, be " script " first by first parameter specified type of add Component methods, then in second parameter
Have the attribute that a key is scripts, its value be an array, because may carry one pin incessantly on same object
This, stores many objects, wherein url attributes then specify the path of the script again in array.
The specification for structure of following illustratively script, creates a new js file, entitled cube.js.Script essence
On be all example one by one that pc.script.create () is created, main logical code all writes on
Pc.script.create () second parameter is in call back function.
By parameter transmission, come into using game object app as parameter in call back function, that is to say, that in each script
Game example app objects can be had access to.Pass through function expression var Cube=function (entity)
{ this.entity=entity }, the object value belonging to the script can be passed through to this.entity, developer
This.entity has access to the cube objects of current script.
The game of also such as other this method exploitation can use a kind of camera lens mechanism of parallel camera lens, enable camera lens root
Moved in parallel according to moving for role so that game can also realize the easy to get started of 2D transverse slats game in 3 d mode.For example open
Hair is game of making a breakthrough, and can produce a visual difference when game leading role jumps to highland from low land, but be by writing script
Camera lens provides gentle smooth locomotory mechanism, user is obtained good game experiencing, so as to feel that Shot change is brought
Stiff sense.
In one embodiment, creating game scripts includes the setting to physical effect and the arrangement to scene.Pass through
Writing for JavaScript scripts can realize the physical effect such as such as luminous, blast, transparent；The arrangement of scene, for example pass through
The scenes such as written in JavaScript wall, plant, hillside.
In one embodiment, above-mentioned game logic can include：Game state switching, user interaction design, game master
Enemy's design, game points design and game level switched design etc. in angle vital values design, game.
It is by taking game of making a breakthrough as an example further below, game leading role is " Robot ", and game logic above illustrate
It is bright.
Such as game state switching, game realizes the mechanism of state machine by Java Script, by Robot state
It is stored in variable this.animation State, idle, run, jump state are represented with numeral 0,1,2 respectively.Will be each
The animation of individual state is stored in ANIMATIONS this object, and Robot is just played corresponding to corresponding state in which state
Animation.
Such as user interaction design, processing user is mainly bound by KeyEvent in game and inputted, newly-built player_
Input.js files, and it is all hung on Robot, facilitate the script to access platform_character_
The function such as moving left and right in controller.js, jump.After player presses lower keyboard, corresponding event is triggered.In this game
In, the event that keyboard is pressed has：Robot is moved to the left, and is moved right, jump.The register button first on app.controller
Disk incoming event, then judge that detection user inputs by if in update again, then perform corresponding function.When player according to
When A keys and D keys, corresponding move methods in player Script are triggered；When player often presses a space bar, just trigger
Corresponding jump methods in player Script.
The leading role vital values of playing design, when game has vital values, it can come to harm, game can just seem true
It is real.This function can be realized by damage.js.
Enemy designs in also such as playing, and before different enemy is designed, first realizes the basic module of enemy,
For example move, the realization of the basic function such as state switches, turned round, injury mechanism.Like this, follow-up enemy's design can be after
The basic parent is held, new function is added on this basis, greatly improves development efficiency.Enemy configurations data, point
Not Wei enemy with the addition of the basic component such as rigid body, impact volume, script, model, the value on attribute includes speed, turns round speed
Degree, enemy's type, injury etc., these numerical value will all have influence on the experience of game.
The foundation class one of enemy shares three states STATE_IDLE, STATE_MOVE, STATE_TURN, gives tacit consent to initial shape
State is IDLE.Each enemy examples can have the platform of its exclusive binding.
Enemy per a game has the feature for solely belonging to the game, and the enemy of this game is exactly to prevent Robot from arriving
Up to terminal and it is existing, then how to be arrived on the premise of not caught by enemy terminal be game player need pay close attention to ask
Topic.The AI of game has a variety of design techniques, wherein being employed the AI for being namely based on rule of time at most.It is used in this game
The enemy AI in road is namely based on the AI of rule.Enemy pair can judge with the distance between Robot, when this distance
When distance is less than 4, enemy enters attack mode, is launched a offensive to Robot.
Again so that game points design as an example：For example this game design system for eating star, different types of star have
Its respective score value, when player has obtained certain fraction in current pass, the transmission gate towards next pass can just be opened.
One global game object of the upper carries of window, there is a score attribute on game objects, the star being had for storing player
The fraction that star obtains, this score attribute can be thus had access to from anywhere in game.
Star objects are comparatively simple, and the components such as impact volume, script, model, Ran Houqi are with the addition of for it
Worth attributes specify the score value of star.As game.js, newly-built ui.js is placed on app root node as component
On, the UI frameworks of this game are built using this front end storehouse of Raphael.js.It is added to first using Raphael.js as dependence
In game, enable to have access to the api interface of Raphael.js offers in script file.Star is had from player to UI to show
Show that score experienced such process altogether：Function is monitored in the collision first set out in Star, is then called on global Game objects
Collect Stars (), then perform Ui in update Scores () functions and collect Star
(star.worth) function, the score value for the star that player is had pass the mode joined and are added in the scores of the overall situation.Then pass through
Raphael.js renders data renewal on UI.
By taking game level switched design as an example：By being configured to realize to level enable states in this game
The switching at the outpost of the tax office, give tacit consent to and the first enable closed is arranged to true, the enable states at other outposts of the tax office are false.Work as Robot
Into transmission gate, the enable states at the current outpost of the tax office are arranged to false, next pass is set to true.Thus can be by right
The enable at the outpost of the tax office is judged, the current outpost of the tax office is found from levels arrays.
In one embodiment, game role logic includes：Animation, Sounds script, inputted and detected to switch by user
The script for interacting switching state of personage and other objects in the script of state or game.
Or by taking the game leading role " Robot " that makes a breakthrough as an example, game leading role's design is compiled with realizing in game using object-oriented
Journey, each module in game is packaged into object one by one, wherein game leading role Robot mainly by animation, sound, touch
The components such as collision body product, rigid body, script form.Robot possesses idle, run, jump, tetra- states of die, is inputted and examined by user
Survey and game in the interactions of personage and other objects switch different states.
In one embodiment, in step S104, after game scripts, game logic and role's logic is created, on
The method of stating can also include：
Game identification code is debugged, placed into service is started by Node.js, client and server is realized by websocket
The bidirectional real-time at end.Respectively game is carried out on the different main flow Web browser such as Chrome, Fire Fox, Edge
Placed into service can be started eventually through Node.js with the test of compatibility.
Illustrate the development approach of the 3D web games based on WebGL below by a complete embodiment.
Shown in reference picture 4, three-dimensional modeling is carried out to game model by Blender, Unity3D is imported and creates skeleton cartoon
Make, then overall to import PlayCanvas, additional audio makes, can also be (a to be used for making pixel by Aseprite
The software of style animation) carry out cartoon making and two-dimentional image design.Then completed by JavaScript to physical effect
Setting and the arrangement to scene.Reprocessing game main logic and role's logic, UI layers of playing are carried out using HTML+CSS
Build.During wherein game logic is write, including interaction design (keyboard, mouse, action bars, touch or hand-held rotation with user
Turn mobile terminal)；Then Git is used as revisions manager, and Git is the distributed version an increased income control system, can be with
Effectively, the processing of high speed is from very little to very big Item version management.It is adapted again, by service end Node.js, with client
Websocket communications are established between program, finally deployment is reached the standard grade.
The embodiment of the present invention additionally provides a kind of development system of the 3D web games based on WebGL, and the system uses this
The development approach for the above-mentioned 3D web games based on WebGL that inventive embodiments provide.
Based on same inventive concept, by the system solves the principle of problem and the foregoing 3D webpages trip based on WebGL
The development approach of play is similar, therefore the implementation of the system may refer to the implementation of preceding method, repeats part and repeats no more.
Shown in reference picture 5, said system includes：
Module 51 is established in acquisition, for obtaining HTML5 canvas elements, is established and is based on by the canvas elements
The drafting environment of WebGL standards；
Modeling and Design module 52, for carrying out three-dimensional modeling to game model, and set in the 3d gaming model of foundation
Count bone node；
Import modul 53 is extracted, will for extracting the modeling parameters in the 3d gaming model and bone nodal information
The modeling parameters of extraction import PlayCanvas editing machines construction scene of game with bone nodal information；
Release module 54 is created, for creating game scripts, game logic and role's logic, issue obtains the 3D nets
Page game.
In one embodiment, the importing PlayCanvas editing machines construction sports ground in the extraction import modul 53
Scape, including：
PlayCanvas editing machines are imported, initialization layout is carried out to game by the API that PlayCanvas is provided；
An object is instantiated, and is game addition light source and CCD camera assembly.
In one embodiment, in addition to：Communication module 55, for realizing client and server by websocket
The bidirectional real-time at end.
It should be understood by those skilled in the art that, embodiments of the invention can be provided as method, system or computer program
Product.Therefore, the present invention can use the reality in terms of complete hardware embodiment, complete software embodiment or combination software and hardware
Apply the form of example.Moreover, the present invention can use the computer for wherein including computer usable program code in one or more
The shape for the computer program product that usable storage medium is implemented on (including but is not limited to magnetic disk storage and optical memory etc.)
Formula.
The present invention is the flow with reference to method according to embodiments of the present invention, equipment (system) and computer program product
Figure and/or block diagram describe.It should be understood that can be by every first-class in computer program instructions implementation process figure and/or block diagram
Journey and/or the flow in square frame and flow chart and/or block diagram and/or the combination of square frame.These computer programs can be provided
The processors of all-purpose computer, special-purpose computer, Embedded Processor or other programmable data processing devices is instructed to produce
A raw machine so that produced by the instruction of computer or the computing device of other programmable data processing devices for real
The device for the function of being specified in present one flow of flow chart or one square frame of multiple flows and/or block diagram or multiple square frames.
These computer program instructions, which may be alternatively stored in, can guide computer or other programmable data processing devices with spy
Determine in the computer-readable memory that mode works so that the instruction being stored in the computer-readable memory, which produces, to be included referring to
Make the manufacture of device, the command device realize in one flow of flow chart or multiple flows and/or one square frame of block diagram or
The function of being specified in multiple square frames.
These computer program instructions can be also loaded into computer or other programmable data processing devices so that counted
Series of operation steps is performed on calculation machine or other programmable devices to produce computer implemented processing, so as in computer or
The instruction performed on other programmable devices is provided for realizing in one flow of flow chart or multiple flows and/or block diagram one
The step of function of being specified in individual square frame or multiple square frames.
Obviously, those skilled in the art can carry out the essence of various changes and modification without departing from the present invention to the present invention
God and scope.So, if these modifications and variations of the present invention belong to the scope of the claims in the present invention and its equivalent technologies
Within, then the present invention is also intended to comprising including these changes and modification.
Claims (9)
1. the development approach of the 3D web games based on WebGL, it is characterised in that including：
HTML5 canvas elements are obtained, the drafting environment based on WebGL standards is established by the canvas elements；
Three-dimensional modeling is carried out to game model, and bone node is designed in the 3d gaming model of foundation；
The modeling parameters and bone nodal information in the 3d gaming model are extracted, by the modeling parameters of extraction and bone node
Information imports PlayCanvas editing machines construction scene of game；
Game scripts, game logic and role's logic are created, issue obtains the 3D web games.
2. the development approach of the 3D web games based on WebGL as claimed in claim 1, it is characterised in that the importing
PlayCanvas editing machines construct scene of game, including：
PlayCanvas editing machines are imported, initialization layout is carried out to game by the API that PlayCanvas is provided；
An object is instantiated, and is game addition light source and CCD camera assembly.
3. the development approach of the 3D web games based on WebGL as claimed in claim 2, it is characterised in that described to create trip
Play script includes：Setting to physical effect and the arrangement to scene.
4. the development approach of the 3D web games based on WebGL as claimed in claim 2, it is characterised in that the game is patrolled
Collecting includes：Enemy's design, game points are set in game state switching, user interaction design, the design of game leading role vital values, game
Meter and game level switched design.
5. the development approach of the 3D web games based on WebGL as claimed in claim 2, it is characterised in that the role patrols
Collecting includes：Animation, Sounds script, inputted and detected come personage in the script of switching state or game and other objects by user
The script of interaction switching state.
6. the development approach of the 3D web games based on WebGL as claimed in claim 1, it is characterised in that in the establishment
After game scripts, game logic and role's logic, methods described includes：
Game identification code is debugged, placed into service is started by Node.js, client and server end is realized by websocket
Bidirectional real-time.
7. the development system of the 3D web games based on WebGL, it is characterised in that including：
Module is established in acquisition, for obtaining HTML5 canvas elements, is established by the canvas elements and is marked based on WebGL
Accurate drafting environment；
Modeling and Design module, for carrying out three-dimensional modeling to game model, and bone is designed in the 3d gaming model of foundation
Node；
Import modul is extracted, for extracting the modeling parameters in the 3d gaming model and bone nodal information, by extraction
Modeling parameters import PlayCanvas editing machines construction scene of game with bone nodal information；
Release module is created, for creating game scripts, game logic and role's logic, issue obtains the 3D webpages trip
Play.
8. the development system of the 3D web games based on WebGL as claimed in claim 7, it is characterised in that the extraction is led
Enter the importing PlayCanvas editing machines construction scene of game in module, including：
PlayCanvas editing machines are imported, initialization layout is carried out to game by the API that PlayCanvas is provided；
An object is instantiated, and is game addition light source and CCD camera assembly.
9. the development system of the 3D web games based on WebGL as claimed in claim 7, it is characterised in that also include：Communication
Module, for realizing the bidirectional real-time at client and server end by websocket.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711021642.XA CN107670279A (en) | 2017-10-26 | 2017-10-26 | The development approach and system of 3D web games based on WebGL |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711021642.XA CN107670279A (en) | 2017-10-26 | 2017-10-26 | The development approach and system of 3D web games based on WebGL |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107670279A true CN107670279A (en) | 2018-02-09 |
Family
ID=61142593
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711021642.XA Pending CN107670279A (en) | 2017-10-26 | 2017-10-26 | The development approach and system of 3D web games based on WebGL |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107670279A (en) |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109215113A (en) * | 2018-08-14 | 2019-01-15 | 北京爱康宜诚医疗器材有限公司 | The display methods and device of bone threedimensional model |
| CN109240674A (en) * | 2018-08-21 | 2019-01-18 | 珠海沙盒网络科技有限公司 | A kind of game developing system |
| CN109646958A (en) * | 2018-12-29 | 2019-04-19 | 南京交通职业技术学院 | A kind of development approach of the 3D web game based on WebGL |
| CN109799975A (en) * | 2018-12-20 | 2019-05-24 | 武汉西山艺创文化有限公司 | A kind of action game production method neural network based and system |
| CN109918057A (en) * | 2019-03-18 | 2019-06-21 | 北京智明星通科技股份有限公司 | Game creation method and device based on HTML5 |
| CN110812840A (en) * | 2019-10-31 | 2020-02-21 | 武汉微派网络科技有限公司 | Game object control method and device, readable storage medium and electronic equipment |
| WO2020052392A1 (en) * | 2018-09-11 | 2020-03-19 | Oppo广东移动通信有限公司 | Game platform capability invocation method and related product |
| CN111135570A (en) * | 2019-12-25 | 2020-05-12 | 上海米哈游天命科技有限公司 | Unity-based element configuration method, device, equipment and storage medium |
| CN111245856A (en) * | 2020-01-17 | 2020-06-05 | 深圳市乐唯科技开发有限公司 | Method and system for playing real-time video by H5 |
| CN111324340A (en) * | 2020-02-20 | 2020-06-23 | 腾讯科技（深圳）有限公司 | Interaction method and device based on webpage copy, storage medium and computer equipment |
| CN111598976A (en) * | 2019-02-01 | 2020-08-28 | 华为技术有限公司 | Scene recognition method and device, terminal and storage medium |
| CN112288840A (en) * | 2020-10-26 | 2021-01-29 | 北京优锘科技有限公司 | Method for realizing running by combining three-dimensional rendering engine with JavaScript engine |
| CN112802164A (en) * | 2021-04-06 | 2021-05-14 | 成都完美时空网络技术有限公司 | Method and device for realizing animation state machine, storage medium and electronic device |
| WO2023133802A1 (en) * | 2022-01-14 | 2023-07-20 | 上海莉莉丝科技股份有限公司 | User state switching method, system, device, medium and computer program product |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102402436A (en) * | 2011-12-29 | 2012-04-04 | 苏州新炎龙网络科技有限公司 | Webpage game engine and method for developing webpage game by using same |
| US8576223B1 (en) * | 2011-03-29 | 2013-11-05 | Google Inc. | Multiple label display for 3D objects |
| CN104360840A (en) * | 2014-10-20 | 2015-02-18 | 广州精攻网络科技有限公司 | Game development method and device based on HTML5 |
-
2017
- 2017-10-26 CN CN201711021642.XA patent/CN107670279A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8576223B1 (en) * | 2011-03-29 | 2013-11-05 | Google Inc. | Multiple label display for 3D objects |
| CN102402436A (en) * | 2011-12-29 | 2012-04-04 | 苏州新炎龙网络科技有限公司 | Webpage game engine and method for developing webpage game by using same |
| CN104360840A (en) * | 2014-10-20 | 2015-02-18 | 广州精攻网络科技有限公司 | Game development method and device based on HTML5 |
Non-Patent Citations (2)
| Title |
|---|
| 匿名: "快速入门|Learn PlayCanvas", 《HTTPS://DEVELOPER.PLAYCANVAS.COM/ZH/GETTING-STARTED/》 * |
| 吴亚峰、于复兴、索依娜: "《H5和WebGL3D开发实战详解》", 28 February 2017, 人民邮电出版社 * |
Cited By (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109215113A (en) * | 2018-08-14 | 2019-01-15 | 北京爱康宜诚医疗器材有限公司 | The display methods and device of bone threedimensional model |
| CN109240674A (en) * | 2018-08-21 | 2019-01-18 | 珠海沙盒网络科技有限公司 | A kind of game developing system |
| WO2020052392A1 (en) * | 2018-09-11 | 2020-03-19 | Oppo广东移动通信有限公司 | Game platform capability invocation method and related product |
| CN109799975A (en) * | 2018-12-20 | 2019-05-24 | 武汉西山艺创文化有限公司 | A kind of action game production method neural network based and system |
| CN109799975B (en) * | 2018-12-20 | 2022-05-24 | 武汉西山艺创文化有限公司 | Action game making method and system based on neural network |
| CN109646958A (en) * | 2018-12-29 | 2019-04-19 | 南京交通职业技术学院 | A kind of development approach of the 3D web game based on WebGL |
| US11918900B2 (en) | 2019-02-01 | 2024-03-05 | Huawei Technologies Co., Ltd. | Scene recognition method and apparatus, terminal, and storage medium |
| CN111598976A (en) * | 2019-02-01 | 2020-08-28 | 华为技术有限公司 | Scene recognition method and device, terminal and storage medium |
| CN111598976B (en) * | 2019-02-01 | 2023-08-22 | 华为技术有限公司 | Scene recognition method and device, terminal and storage medium |
| CN109918057A (en) * | 2019-03-18 | 2019-06-21 | 北京智明星通科技股份有限公司 | Game creation method and device based on HTML5 |
| CN110812840A (en) * | 2019-10-31 | 2020-02-21 | 武汉微派网络科技有限公司 | Game object control method and device, readable storage medium and electronic equipment |
| CN111135570A (en) * | 2019-12-25 | 2020-05-12 | 上海米哈游天命科技有限公司 | Unity-based element configuration method, device, equipment and storage medium |
| CN111135570B (en) * | 2019-12-25 | 2023-07-25 | 上海米哈游天命科技有限公司 | Element configuration method, device, equipment and storage medium based on Unity |
| CN111245856A (en) * | 2020-01-17 | 2020-06-05 | 深圳市乐唯科技开发有限公司 | Method and system for playing real-time video by H5 |
| CN111324340A (en) * | 2020-02-20 | 2020-06-23 | 腾讯科技（深圳）有限公司 | Interaction method and device based on webpage copy, storage medium and computer equipment |
| CN112288840B (en) * | 2020-10-26 | 2021-08-24 | 北京优锘科技有限公司 | Method for realizing running by combining three-dimensional rendering engine with JavaScript engine |
| CN112288840A (en) * | 2020-10-26 | 2021-01-29 | 北京优锘科技有限公司 | Method for realizing running by combining three-dimensional rendering engine with JavaScript engine |
| CN112802164A (en) * | 2021-04-06 | 2021-05-14 | 成都完美时空网络技术有限公司 | Method and device for realizing animation state machine, storage medium and electronic device |
| WO2023133802A1 (en) * | 2022-01-14 | 2023-07-20 | 上海莉莉丝科技股份有限公司 | User state switching method, system, device, medium and computer program product |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107670279A (en) | The development approach and system of 3D web games based on WebGL | |
| EP1877897B1 (en) | Interactive multimedia applications device | |
| US20110313550A1 (en) | Selection system for gaming | |
| CN109690450A (en) | Role playing method and terminal device under VR scene | |
| Zhu | Behavior tree design of intelligent behavior of non-player character (NPC) based on Unity3D | |
| Montero et al. | Designing and implementing interactive and realistic augmented reality experiences | |
| CN103530030B (en) | Page switching system and method and curtain special-effect page switching method | |
| CN106097417A (en) | Subject generating method, device, equipment | |
| CN112669194B (en) | Animation processing method, device, equipment and storage medium in virtual scene | |
| CN112711458A (en) | Method and device for displaying prop resources in virtual scene | |
| CN114007064B (en) | Special effect synchronous evaluation method, device, equipment and storage medium | |
| US20120100912A1 (en) | Method of reusing physics simulation results and game service apparatus using the same | |
| Thorn | Learn unity for 2d game development | |
| Jitendra et al. | A study on game development using unity engine | |
| Nazarov et al. | Native browser support for 3D rendering and physics using WebGL, HTML5 and Javascript. | |
| CN115671735A (en) | Object selection method and device in game and electronic equipment | |
| CN116843802A (en) | Virtual image processing method and related product | |
| Felicia | Getting started with Unity: Learn how to use Unity by creating your very own" Outbreak" survival game while developing your essential skills | |
| Rettig | Professional HTML5 mobile game development | |
| Jackson | Mastering Unity 2D Game Development | |
| Joselli et al. | Techniques for designing GPGPU games | |
| Garzia | Roguelike Development with JavaScript | |
| Šag et al. | Development of 2D Game with Construct 2 | |
| CN109408053A (en) | A method of searching the scenario objects for influencing hand trip performance | |
| Miner | Surveying the Frontier. Subjective Rendering and Occlusion in Open-World Westerns |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180209 |
|
| RJ01 | Rejection of invention patent application after publication |