Picture danmaku interaction method and system

Abstract

This application discloses an image-based bullet screen interaction method, comprising: selecting cards to be displayed from a card pool according to preset rules; rotating the cards to a target direction to obtain target cards; determining the motion trajectory of the target cards based on the motion trajectory of the previous card; displaying bullet screens on a display interface based on the motion trajectories of each target card; and displaying animation effects associated with the target bullet screen in response to the triggering of a target bullet screen among multiple bullet screens. The technical solution provided by this application provides good display effects; and by determining the motion trajectory for each target card, overlap between target cards is avoided.

Description

Technical Field

[0001] This application relates to the field of bullet comments, and more particularly to an image bullet comment interaction method, system, computer device, and computer-readable storage medium. Background Technology

[0002] With the rapid development of live video streaming technology, more and more users can watch various live or recorded video programs online. During the viewing process, users can interact with the host and other users by sending bullet comments (danmaku). These bullet comments are visual information that pops up and moves in a predetermined direction while watching videos online. There is no fixed term for bullet comments in English; they are commonly referred to as comments, danmaku, barrage, bullet screen, or bullet-screen comment. Bullet comments allow users to post comments or thoughts, but unlike regular video sharing websites where comments are only displayed in a dedicated comment section below the player, they appear horizontally from right to left on the video screen, ensuring all viewers notice them. However, as mentioned above, the display and interactive effects of bullet comments are poor, resulting in a bad user experience. Summary of the Invention

[0003] The purpose of this application is to provide a method, system, computer device, and computer-readable storage medium for image-based bullet screen interaction, thereby solving the aforementioned problems.

[0004] One aspect of this application provides an image-based bullet screen interactive method, including:

[0005] Select cards to be displayed from the card pool according to preset rules;

[0006] Rotate the card to the target orientation to obtain the target card;

[0007] The movement trajectory of the target card is determined based on the movement trajectory of the previous card;

[0008] Based on the movement trajectory of each target card, each bullet screen is displayed on the display interface through each target card;

[0009] In response to the triggering of a target bullet comment among multiple bullet comments, an animation effect associated with the target bullet comment is displayed.

[0010] Optionally, determining the movement trajectory of the target card based on the movement trajectory of the previous card includes:

[0011] Create a DOM node for each target card, and bind a click event to each DOM node;

[0012] Configure animation code for each DOM node, which is used to define the movement trajectory of the target card.

[0013] Optionally, configuring animation code for each DOM node includes:

[0014] Configure a different start time point for the target card of each DOM node;

[0015] The starting time point is used to indicate the starting time when the corresponding target card enters the display interface.

[0016] Optionally, configuring animation code for each DOM node includes:

[0017] If the i-th target card is assigned to the first motion track, then the x-coordinate of the starting point of the i-th target card entering the display interface is configured to a default value, and the i-th target card is one of the plurality of target cards;

[0018] If the i-th target card is not assigned to the first motion track, then the starting point x-coordinate of the i-th target card entering the display interface is calculated and set according to the starting point x-coordinate of the (i-1)-th target card and the card height / sin(α), where α represents the angle between the target direction and the horizontal direction of the display interface.

[0019] Optionally, the minimum x-coordinate of the starting point ≤ the x-coordinate of the starting point of the i-th target card ≤ the maximum x-coordinate of the starting point;

[0020] The minimum x-coordinate of the starting point is equal to the width of the display interface / 3;

[0021] The maximum value of the x-coordinate of the starting point is equal to the width of the display interface + the height of the display interface / 4 * 3;

[0022] If the calculated result of the starting point x-coordinate of the i-th target card is greater than the maximum value of the starting point x-coordinate, then the minimum value of the starting point x-coordinate is set to the starting point x-coordinate of the i-th target card.

[0023] Optional, also includes:

[0024] If a click event is detected, the triggered card bound to this click event is determined;

[0025] Hide the trigger card and display the target animation effect associated with the trigger card, starting from the click position of this click event.

[0026] Optionally, the target animation effects include:

[0027] The special effects of fireworks; or

[0028] The special effect of a meteor flying towards a target object.

[0029] Optionally, the target object is set at a predetermined position on the display interface and is used to indicate game progress or valid trigger count.

[0030] Optionally, at least some of the cards may have different shapes and sizes.

[0031] Optionally, the target direction is between the horizontal and vertical directions of the display interface.

[0032] Optionally, the target direction is a diagonal downward direction from right to left.

[0033] One aspect of this application provides an image-based bullet screen interactive system, including:

[0034] The selection module is used to select cards to be displayed from the card pool according to preset rules;

[0035] A rotation module is used to rotate the card to the target orientation to obtain the target card;

[0036] The determining module is used to determine the movement trajectory of the target card based on the movement trajectory of the previous card;

[0037] The display module is used to display each bullet screen on the display interface based on the movement trajectory of each target card;

[0038] The response module is used to respond to the triggering of a target bullet comment among multiple bullet comments and display animation effects associated with the target bullet comment.

[0039] One aspect of this application provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the image bullet screen interaction method described above.

[0040] One aspect of this application provides a computer-readable storage medium, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the image bullet screen interaction method described above.

[0041] The image-based bullet screen interaction method, system, computer device, and computer-readable storage medium provided in this application have the following technical effects:

[0042] First, rotate each bullet to the target direction, and then let multiple rotated bullets slide down along the target direction for a good display effect.

[0043] Second, the movement trajectory of the target card is determined based on the movement trajectory of the previous card, which can effectively avoid overlap between target cards and improve the interaction effect. Attached Figure Description

[0044] Figure 1 This diagram illustrates an application environment of the image bullet screen interaction method according to an embodiment of this application.

[0045] Figure 2 A flowchart illustrating an image bullet screen interaction method according to Embodiment 1 of this application is shown schematically;

[0046] Figure 3 The illustration shows the display interface used for image-based bullet screen interaction;

[0047] Figure 4 for Figure 2 Sub-flowchart of step S204;

[0048] Figure 5 for Figure 4 Sub-flowchart of step S402;

[0049] Figure 6 for Figure 4 Sub-flowchart of step S402;

[0050] Figure 7 A schematic diagram illustrating the motion trajectory settings of each target card is shown.

[0051] Figure 8 A schematic diagram illustrating the motion trajectory settings of each target card is shown.

[0052] Figure 9 The illustration schematically shows a new step in the image bullet screen interaction method according to Embodiment 1 of this application;

[0053] Figure 10 The illustration shows the triggerable area of ​​a target card;

[0054] Figure 11 This illustration shows the display interface after a target card is triggered;

[0055] Figure 12 A block diagram of an image bullet screen interactive system according to Embodiment 2 of this application is shown schematically;

[0056] Figure 13 The illustration shows a schematic diagram of the hardware architecture of a computer device suitable for implementing the image bullet screen interaction method according to Embodiment 3 of this application. Detailed Implementation

[0057] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0058] It should be noted that the descriptions involving "first," "second," etc., in the embodiments of this application are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined with "first" or "second" may explicitly or implicitly include at least one of those features. Furthermore, the technical solutions of the various application embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. When the combination of technical solutions is contradictory or impossible to implement, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection claimed in this application.

[0059] This invention reveals that the commonly used "red envelope rain" game is technically implemented as follows:

[0060] 1. When drawing the red envelope rain, use a canvas to draw red envelopes of the same image and time them to fall, ensuring that there are multiple red envelopes on the page;

[0061] 2. When a user clicks on a red envelope, the system compares the coordinates of the finger on the screen with the coordinates of the red envelope to determine if the finger has clicked on the red envelope.

[0062] The "Red Envelope Rain" game only supports one type of image for randomly falling red envelopes. When a user clicks on a red envelope, it only displays "Red Envelope Click Count +1," lacking rich animation effects to enhance the game's fun. Furthermore, when rotating the image using a canvas, the detection of user clicks is inaccurate because the coordinate range of the image cannot be precisely calculated after rotation.

[0063] 3. Bullet comments are usually text that moves horizontally from right to left. The movement stops when a bullet comment is clicked, resulting in poor interactive effects.

[0064] In view of this, this application aims to provide a new image-based bullet screen interaction scheme. In this new scheme:

[0065] 1. After the surprise rain starts, multiple different card-shaped bullet comments will randomly fall, supporting various card shapes.

[0066] 2. Display different cards randomly to improve the interactive experience.

[0067] 3. Even when the card is tilted at a predetermined angle (e.g., 45°), it can still accurately determine whether the user's finger has clicked within the card area.

[0068] 4. When a card is triggered during its fall, special effects such as fireworks and meteors flying towards the target will appear, indicating the game progress.

[0069] The following are explanations of some terms defined in this application:

[0070] Bullet comments, or "danmaku," are visual messages that pop up and move in a predetermined direction when watching videos online. There isn't a fixed English term for bullet comments; they are commonly referred to as comments, danmaku, barrage, bullet screen, or bullet-screen comment. Bullet comments allow viewers to post comments or thoughts, but unlike comments on regular video-sharing websites that are only displayed in a dedicated comment section below the player, they appear in real-time on the video screen, ensuring all viewers notice them. Some bullet comment systems utilize scripting languages ​​to provide specific bullet comment formats, such as allowing bullet comments to appear or disappear at specific locations, controlling their pop-up speed, and adjusting their position.

[0071] Surprise Rain Game: An interactive lottery game where users can trigger special effects such as fireworks explosions by clicking on cards moving across the screen. The final winning result and the corresponding special effects of the cards are displayed to the user based on the number of cards clicked.

[0072] Lottie: An open-source animation library from Airbnb for iOS, Android, and React Native. It can analyze animations exported from Adobe After Effects and allow native apps to use these animations as if they were static assets to achieve animation effects.

[0073] Cards: A form of bullet screen commentary. Cards can be images or a combination of images and text. In the Surprise Rain game, cards can slide from the left side of the screen at a predetermined angle to the right side, disappearing from the screen like rain.

[0074] Figure 1 The illustration shows an environmental application diagram according to an embodiment of this application.

[0075] Provider network 2 can connect to computer device 6 via network 4.

[0076] Provider network 2 can provide content service 20, messaging service 22 and processing service 24.

[0077] (1) Content Services 20:

[0078] This may include content streaming services such as Internet Protocol (IP) video streaming services. Content streaming services can be configured to distribute content via various transport technologies. Content service 20 can be configured to provide content such as video, audio, text data, combinations thereof. Content may include content streams (e.g., video streams, audio streams, information streams), content files (e.g., video files, audio files, text files), and / or other data.

[0079] Content service 20 may include a bullet screen service, for example, providing bullet screens to computer device 6 so that computer device 6 can display the bullet screens on the screen, such as an overlay image displayed above the content. The bullet screens may have animation effects when displayed. For example, the bullet screens may be displayed as scrolling on the content; this animation effect can be implemented based on the transition property of CSS3 (cascading style sheets).

[0080] (2) Message Service 22:

[0081] It can be configured to receive multiple messages and manage messages for various content items. Users can browse content and access different content items to view comments on specific content, such as comments posted by other users on that specific content. Comments from users associated with a specific content item can be output to other users viewing that specific content item. For example, all users accessing a content item (e.g., a video clip) can view comments associated with that content item. Input comments can be output in real-time or near real-time.

[0082] It can be configured to handle multiple messages. The message service 22 can queue or otherwise prioritize multiple messages based on information associated with the corresponding bullet screen content (e.g., timestamps, incrementing identifiers).

[0083] It can be configured to use load balancing to handle multiple messages, such as using one or more of multiple processing nodes to process multiple messages, prioritizing messages, and load balancing messages. Message service 22 can store multiple messages, at least temporarily. Message service 22 can store multiple messages in a database, for example.

[0084] Messages can be processed by performing grouping operations. Grouping operations can include grouping multiple messages based on features. Two messages can be grouped together if they have the same features or if the features are within a threshold range. Messages associated with a specific content item (e.g., a stream, file, show, movie, song, game session) can be associated with the same group. For example, a message can include or be associated with a content identifier. A content identifier can uniquely identify a content item. If a content identifier is found in a message, or associated with a message (e.g., sent separately), the message service 22 can associate the message with the group associated with the content item.

[0085] It can be configured to perform natural language processing, topic recognition, pattern recognition, artificial intelligence, etc., to automatically determine message characteristics and / or group messages. As an example, frequently occurring phrases or patterns can be identified as topics. As another example, a database of topics associated with the content can be maintained. Topics can include genres (e.g., action, drama, comedy), personalities (e.g., actor, actress, director), language, etc. Messages can be grouped based on the characteristics of the client device and / or the user sending the message. Demographics, interests, history, and / or similar data can be stored for multiple users to determine potential message groupings.

[0086] It can be further configured to process messages by generating output data. The output data may include: first, instructions for implementing the output of comments based on the appropriate context; second, application data for instructing the application to override the comments based on the context; and third, instructions for generating (e.g., encoding) content corresponding to the comments.

[0087] It can also be further configured to process messages by performing a filtering process. The filtering process can include rejecting or flagging messages that match filtering criteria. Filtering criteria can specify terms and / or phrases, such as profanity, hate speech, obscene language, etc. Filtering criteria can specify characters, such as symbols, fonts, etc. Filtering criteria can specify language, computer-readable code patterns, etc.

[0088] (3) Processing Service 24:

[0089] It can be configured to provide processing for various services. Processing service 24 may include multiple network nodes 26. Multiple network nodes 26 can handle tasks associated with messaging service 22. Multiple network nodes 26 may be implemented as one or more computing devices, one or more processors, one or more virtual computing instances, combinations thereof, and / or similar.

[0090] Multiple network nodes 26 can be implemented by one or more computing devices. One or more computing devices may include virtualized computing instances. Virtualized computing instances may include virtual machines, such as emulations of computer systems, operating systems, servers, etc. The computing device may load virtual machines based on virtual images and / or other data defining specific software (e.g., operating systems, dedicated applications, servers) used for emulation. As the demand for different types of processing services changes, different virtual machines can be loaded and / or terminated on one or more computing devices. A hypervisor can be implemented to manage the use of different virtual machines on the same computing device.

[0091] In some embodiments, multiple network nodes 26 can process events submitted by computer devices. These events may be associated with discussions of real-time news, videos, social media trending topics, reports targeting certain user accounts, etc. In other embodiments, multiple network nodes 26 can process performance evaluations of multiple user accounts reviewing events in a network community. In some implementations, these services may be implemented as dedicated computing devices, dedicated processors, dedicated virtual machine instances, and / or the like. In other implementations, various different nodes may implement any functionality associated with these services.

[0092] Provider network 2 may be located in a data center, such as a single site, or distributed across different geographical locations (e.g., multiple sites). Provider network 2 may provide services via network 4. Network 4 includes various network devices, such as routers, switches, multiplexers, hubs, modems, bridges, repeaters, firewalls, agent devices, and / or similar devices. Network 4 may include physical links, such as coaxial cable links, twisted-pair cable links, fiber optic links, combinations thereof, etc., or wireless links, such as cellular links, satellite links, Wi-Fi links, etc.

[0093] Computer device 6 can be configured to access the content and services of provider network 2. Computer device 6 can include any type of electronic device, such as mobile devices, tablets, laptops, workstations, virtual reality devices, gaming devices, set-top boxes, digital streaming media devices, vehicle terminals, smart TVs, set-top boxes, etc.

[0094] Computer device 6 can be associated with one or more users. A single user can use one or more of computer devices 6 to access provider network 2. Computer device 6 can travel to various locations and use different networks to access provider network 2.

[0095] Computer device 6 may include client 60. Client 60 outputs (e.g., renders, presents) content to the user. Client 60 may be a video client (such as the bilibili client), a browser client, or a WeChat mini-program based on WeChat. Content may include video, audio, and bullet comments. The bullet comments may be text, cards, etc., and may have different colors, sizes, animations, scrolling directions, shapes, etc.

[0096] Below, this application will use computer device 6 as the execution subject to provide some image bullet screen interaction solutions.

[0097] In the description of this application, it should be understood that the numerical labels before the steps do not indicate the order of the steps, but are only used to facilitate the description of this application and to distinguish each step, and therefore should not be construed as a limitation of this application.

[0098] Example 1

[0099] Figure 2 The flowchart illustrating the image bullet screen interaction method according to Embodiment 1 of this application is shown schematically.

[0100] like Figure 2 As shown, the image-based bullet screen interaction method may include steps S200 to S208, wherein:

[0101] Step S200: Select cards to be displayed from the card pool according to preset rules.

[0102] The cards can include text, images, or combinations thereof. Images can be static or dynamic, such as images of red envelopes. Multiple cards can be randomly selected in batches, thereby reducing the processing load on computer equipment.

[0103] Step S202: Rotate the card to the target orientation to obtain the target card.

[0104] Step S204: Determine the movement trajectory of the target card based on the movement trajectory of the previous card.

[0105] Step S206: Based on the movement trajectory of each target card, display each bullet screen on the display interface through each target card.

[0106] Step S208: In response to the triggering of a target bullet screen among multiple bullet screens, display animation effects associated with the target bullet screen.

[0107] The display interface can be as follows: Figure 3 The interface shown in full-screen mode can also be the interface in non-full-screen mode.

[0108] The following is Figure 3 For example, let's illustrate this:

[0109] (1) Play / present video or page content on the display interface and monitor user input or device-triggered events.

[0110] The user input can be physical or virtual keyboard or mouse input, or touch screen input.

[0111] The device can be automatically triggered based on a specific time, specific content presented, or related user actions.

[0112] (2) If the detected user input or device-triggered event is to enable the preset display functions such as surprise rain or red envelope rain, then enable the corresponding function.

[0113] Please continue to refer to this. Figure 3 Once this function is activated, multiple bullets of different shapes will randomly fall, supporting various shapes. The falling pattern is as follows: each bullet rotates itself to the target direction (45°) and moves along the target direction.

[0114] (3) During the process of each bullet falling along the target direction, monitor user input, such as clicks based on a mouse or touch screen.

[0115] (4) If a user input is detected, and the trigger position of the user input falls within the display area of ​​the target barrage, then the target barrage is determined to be triggered, thereby generating the corresponding animation effect.

[0116] To further enhance the interactive experience, such as Figure 3 In the top left corner, a valid user input is incremented by 1 after the corresponding category, allowing users to easily see the number of valid inputs they made and the category triggered by their input.

[0117] In summary, the image-based bullet screen interaction method described in this application has the following technical effects:

[0118] First, rotate each bullet to the target direction (e.g., 45°) and let multiple rotated bullets slide down along the target direction for a better display effect.

[0119] Secondly, as each bullet comment slides down along the target direction, corresponding animation effects pop up based on user input, improving the interactive effect and providing a better user experience.

[0120] Third, the movement trajectory of the target card is determined based on the movement trajectory of the previous card, which can effectively avoid overlap between target cards and improve the interaction effect.

[0121] The following are several optional implementations, which can be executed individually or in combination.

[0122] As an optional embodiment, the multiple bullet comments include multiple cards. For example... Figure 4 As shown, step S204 includes: step S400, creating a DOM node for each target card, and binding a click event to each DOM node; step S402, configuring animation code for each DOM node, the animation code being used to limit the movement trajectory of the target card.

[0123] Compared to drawing via canvas, where it's difficult to accurately calculate the size of the card occupying the display screen after rotation, this optional embodiment uses DOM nodes. That is, a separate DOM node is created for each target card, and each DOM node is bound to a click event. When a click occurs, it can accurately determine whether the user's click area is within the target card.

[0124] Animation code can be JavaScript code, CSS code, or other code.

[0125] In this optional embodiment, the animation code includes multiple animation parameters, which may include: the start time of the target card entering the display interface, the end time of leaving the display interface, the starting point of the position entering the display interface, the ending point of the position leaving the display interface, the movement speed in the display interface, the movement time in the display interface, and the movement direction in the display interface, etc.

[0126] As an optional embodiment, such as Figure 5 As shown, step S402 may include the following steps: Step S500, configuring different start time points for each target card of the DOM node; wherein, the start time point is used to indicate the start time when the corresponding target card enters the display interface. In this optional embodiment, by using different start time points (e.g., an interval of 300 milliseconds), the movement positions of the target cards presented on the display interface are staggered, presenting an irregular meteor falling visual effect, thus improving the visual experience.

[0127] As an optional embodiment, such as Figure 6 As shown, step S402 may include the following steps:

[0128] Step S600: If the i-th target card is assigned to the first motion track, then the horizontal coordinate of the starting point of the i-th target card entering the display interface is configured as a default value, and the i-th target card is one of the plurality of target cards;

[0129] Step S602: If the i-th target card is not assigned to the first motion track, then calculate and set the starting point horizontal coordinate of the i-th target card entering the display interface based on the starting point horizontal coordinate of the (i-1)-th target card and the card height / sin(α), where α represents the angle between the target direction and the horizontal direction of the display interface.

[0130] In this optional embodiment, by calculating and setting the starting point x-coordinate as described above, overlap between target cards can be effectively avoided when each target card is along the target direction (tilt direction).

[0131] The following example uses α as 45°, and combines it with... Figure 7 and Figure 8 This section describes the starting point x-coordinate and other parameters for each target card. The starting point x-coordinate of the target card entering the display interface = the starting point x-coordinate of the previous target card entering the display interface + (target card height / sin45°) + 20 pixels (the number can be customized).

[0132] like Figure 8 As shown, the endpoint of the target card's position away from the display interface can also be calculated. The endpoint of the target card's position away from the display interface is the following distance outside the overflow boundary: the target card's width * sin45° + the card's height * 45°.

[0133] As an optional embodiment:

[0134] The minimum x-coordinate of the starting point is less than or equal to the maximum x-coordinate of the starting point of the i-th target card.

[0135] The minimum x-coordinate of the starting point is equal to the width of the display interface / 3;

[0136] The maximum value of the x-coordinate of the starting point is equal to the width of the display interface + the height of the display interface / 4 * 3;

[0137] If the calculated result of the starting point x-coordinate of the i-th target card is greater than the maximum value of the starting point x-coordinate, then the minimum value of the starting point x-coordinate is set to the starting point x-coordinate of the i-th target card.

[0138] In this optional embodiment, certain areas, such as the upper left and lower right corners, are not used for card display to ensure that each target card is fully presented in the display interface and does not flash by too quickly, thus ensuring a good user visual experience.

[0139] As an optional embodiment, such as Figure 9As shown, the method further includes: step S900, if a click event is detected, determining the triggered card bound to this click event; step S902, hiding the triggered card, and displaying the target animation effect associated with the triggered card starting from the click position of this click event. As each bullet comment slides down along the target direction, corresponding animation effects pop up based on user input, improving the interactive effect and providing a better user experience.

[0140] In this optional embodiment, the user's click operation is obtained, and it is determined whether the user's click operation is within the area of ​​a target card in the display interface (e.g., ...). Figure 10 Within the dashed box, if it falls within the area of ​​a target card, a DOM node is created based on the click position to display the target animation features (such as...). Figure 11 (As shown).

[0141] As an optional embodiment, to enhance the animation effect, the target animation effect can be various effects, such as:

[0142] Special effects of fireworks (such as) Figure 11 (As shown).

[0143] The special effect of a meteor flying towards a target object.

[0144] As an optional embodiment, the target object is positioned at a predetermined location on the display interface and used to indicate game progress or the number of valid triggers. The meteor shower flying towards the target object effectively guides the user's attention to this information.

[0145] As an optional embodiment, at least some of the cards may have different shapes and sizes, such as rectangles or squares. Using cards with different shapes and sizes can effectively enhance the user's interaction experience.

[0146] As an optional embodiment, the target direction is between the horizontal and vertical directions of the display interface. Rotating each target card at a tilt angle and moving it on the display interface at the same tilt angle improves the interactive experience.

[0147] As an optional embodiment, the target direction is diagonally downward from right to left. For example, the target direction is diagonally downward at 45° from right to left. In this optional embodiment, the falling objects resemble a meteor shower, enhancing the interactive experience.

[0148] Example 2

[0149] Figure 12The diagram illustrates a block diagram of an image-based bullet screen interactive system according to Embodiment 2 of this application. This system can be divided into one or more program modules. One or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiment of this application. The program module referred to in this embodiment is a series of computer program instruction segments capable of performing a specific function. The following description will specifically introduce the functions of each program module in this embodiment.

[0150] like Figure 12 As shown, the image-based bullet screen interaction system 1200 can:

[0151] The selection module 1210 is used to select cards to be displayed from the card pool according to preset rules;

[0152] Rotation module 1220 is used to rotate the card to a target orientation to obtain the target card;

[0153] The determining module 1230 is used to determine the movement trajectory of the target card based on the movement trajectory of the previous card;

[0154] Display module 1240 is used to display each bullet screen on the display interface based on the movement trajectory of each target card;

[0155] The response module 1250 is used to display animation effects associated with the target bullet screen in response to the triggering of a target bullet screen among multiple bullet screens.

[0156] As an optional embodiment, the determining module 1230 is further configured to:

[0157] Create a DOM node for each target card, and bind a click event to each DOM node;

[0158] Configure animation code for each DOM node, which is used to define the movement trajectory of the target card.

[0159] As an optional embodiment, the determining module 1230 is further configured to:

[0160] Configure a different start time point for the target card of each DOM node;

[0161] The starting time point is used to indicate the starting time when the corresponding target card enters the display interface.

[0162] As an optional embodiment, the determining module 1230 is further configured to:

[0163] If the i-th target card is assigned to the first motion track, then the x-coordinate of the starting point of the i-th target card entering the display interface is configured to a default value, and the i-th target card is one of the plurality of target cards;

[0164] If the i-th target card is not assigned to the first motion track, then the starting point x-coordinate of the i-th target card entering the display interface is calculated and set according to the starting point x-coordinate of the (i-1)-th target card and the card height / sin(α), where α represents the angle between the target direction and the horizontal direction of the display interface.

[0165] As an optional embodiment:

[0166] The minimum x-coordinate of the starting point is less than or equal to the maximum x-coordinate of the starting point of the i-th target card.

[0167] The minimum x-coordinate of the starting point is equal to the width of the display interface / 3;

[0168] The maximum value of the x-coordinate of the starting point is equal to the width of the display interface + the height of the display interface / 4 * 3;

[0169] If the calculated result of the starting point x-coordinate of the i-th target card is greater than the maximum value of the starting point x-coordinate, then the minimum value of the starting point x-coordinate is set to the starting point x-coordinate of the i-th target card.

[0170] As an optional embodiment, the response module 1250 is further configured to:

[0171] If a click event is detected, the triggered card bound to this click event is determined;

[0172] Hide the trigger card and display the target animation effect associated with the trigger card, starting from the click position of this click event.

[0173] As an optional embodiment, the target animation effect includes:

[0174] The special effects of fireworks; or

[0175] The special effect of a meteor flying towards a target object.

[0176] As an optional embodiment:

[0177] The target object is set at a predetermined position on the display interface and is used to indicate game progress or the number of valid triggers.

[0178] As an optional embodiment:

[0179] At least some of the cards are different in shape and size.

[0180] As an optional embodiment, the target direction is between the horizontal and vertical directions of the display interface.

[0181] As an optional embodiment, the target direction is a diagonal downward direction from right to left.

[0182] Example 3

[0183] Figure 13 This illustration schematically shows a hardware architecture diagram of a computer device suitable for implementing an image-based interactive display method according to Embodiment 3 of this application. In this embodiment, computer device 10000 can also be used as a component of computer device 6. In this embodiment, computer device 10000 is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, such as a smartphone, tablet computer, computer, projector, set-top box, game console, virtual reality device, and other terminal devices.

[0184] In this embodiment, the computer device 10000 is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions. For example... Figure 13 As shown, the computer device 10000 includes, but is not limited to, at least the following: a memory 10010, a processor 10020, and a network interface 10030 that can communicate and be linked to each other via a system bus. Wherein:

[0185] The memory 10010 includes at least one type of computer-readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 10010 may be an internal storage module of the computer device 10000, such as the hard disk or memory of the computer device 10000. In other embodiments, the memory 10010 may also be an external storage device of the computer device 10000, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 10000. Of course, the memory 10010 may also include both the internal storage module and the external storage device of the computer device 10000. In this embodiment, the memory 10010 is typically used to store the operating system and various application software installed on the computer device 10000, such as the program code for the image bullet screen interaction method. In addition, the memory 10010 can also be used to temporarily store various types of data that have been output or will be output.

[0186] In some embodiments, processor 10020 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. Processor 10020 is typically used to control the overall operation of computer device 10000, such as performing control and processing related to data interaction or communication with computer device 10000. In this embodiment, processor 10020 is used to run program code stored in memory 10010 or process data.

[0187] Network interface 10030 may include a wireless network interface or a wired network interface, which is typically used to establish a communication link between computer device 10000 and other computer devices. For example, network interface 10030 is used to connect computer device 10000 to an external terminal via a network, establishing a data transmission channel and communication link between computer device 10000 and the external terminal. The network may be an intranet, the Internet, Global System for Mobile Communication (GSM), Wideband Code Division Multiple Access (WCDMA), 4G network, 5G network, Bluetooth, Wi-Fi, or other wireless or wired networks.

[0188] It should be pointed out that, Figure 13 Only computer devices with components 10010-10030 are shown; however, it should be understood that it is not required to implement all of the shown components, and more or fewer components may be implemented instead.

[0189] In this embodiment, the image bullet screen interaction method stored in memory 10010 can also be divided into one or more program modules and executed by one or more processors (processor 10020 in this embodiment) to complete this application.

[0190] Example 4

[0191] This embodiment also provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it implements the steps of the image bullet screen interaction method in this embodiment.

[0192] In this embodiment, the computer-readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the computer-readable storage medium can be an internal storage unit of a computer device, such as the hard disk or memory of the computer device. In other embodiments, the computer-readable storage medium can also be an external storage device of the computer device, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device. Of course, the computer-readable storage medium can also include both the internal storage unit and the external storage device of the computer device. In this embodiment, the computer-readable storage medium is typically used to store the operating system and various application software installed on the computer device, such as the program code of the image bullet screen interaction method in the embodiment. In addition, the computer-readable storage medium can also be used to temporarily store various types of data that have been output or will be output.

[0193] Obviously, those skilled in the art should understand that the modules or steps of the embodiments of this application described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. Optionally, they can be implemented using computer-executable program code, thereby storing them in a storage device for execution by a computing device. In some cases, the steps shown or described can be performed in a different order than those presented here, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the embodiments of this application are not limited to any particular combination of hardware and software.

[0194] The above are merely preferred embodiments of this application and do not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.

Claims

1. A method for interactive image-based bullet comments, characterized in that, include: Select cards to be displayed from the card pool according to preset rules; Rotate the card to the target orientation to obtain the target card; The movement trajectory of the target card is determined based on the movement trajectory of the previous card; Based on the movement trajectory of each target card, each bullet screen is displayed on the display interface through each target card; In response to the triggering of a target bullet comment among multiple bullet comments, an animation effect associated with the target bullet comment is displayed; The step of determining the movement trajectory of the target card based on the movement trajectory of the previous card includes: Create a DOM node for each target card, and bind a click event to each DOM node; Configure animation code for each DOM node, which is used to define the movement trajectory of the target card; The step of configuring animation code for each DOM node includes: If the i-th target card is not assigned to the first motion track, then the starting point x-coordinate of the i-th target card entering the display interface is calculated and set according to the starting point x-coordinate of the (i-1)-th target card and the card height / sin(α), where α represents the angle between the target direction and the horizontal direction of the display interface, and the i-th target card is one of multiple target cards.

2. The image bullet screen interaction method according to claim 1, characterized in that, The animation code configured for each DOM node includes: Configure a different start time point for the target card of each DOM node; The starting time point is used to indicate the starting time when the corresponding target card enters the display interface.

3. The image bullet screen interaction method according to claim 1, characterized in that, The configuration of animation code for each DOM node also includes: If the i-th target card is assigned to the first motion track, then the x-coordinate of the starting point of the i-th target card entering the display interface is configured to a default value.

4. The image bullet screen interaction method according to claim 3, characterized in that: The minimum x-coordinate of the starting point is less than or equal to the maximum x-coordinate of the starting point of the i-th target card. The minimum x-coordinate of the starting point is equal to the width of the display interface / 3; The maximum value of the x-coordinate of the starting point is equal to the width of the display interface + the height of the display interface / 4 * 3; If the calculated result of the starting point x-coordinate of the i-th target card is greater than the maximum value of the starting point x-coordinate, then the minimum value of the starting point x-coordinate is set to the starting point x-coordinate of the i-th target card.

5. The image bullet screen interaction method according to claim 1, characterized in that, Also includes: If a click event is detected, the triggered card bound to this click event is determined; Hide the trigger card and display the target animation effect associated with the trigger card, starting from the click position of this click event.

6. The image bullet screen interaction method according to claim 5, characterized in that, The target animation effects include: The special effects of fireworks; or The special effect of a meteor flying towards a target object.

7. The image bullet screen interaction method according to claim 6, characterized in that: The target object is set at a predetermined position on the display interface and is used to indicate game progress or the number of valid triggers.

8. The image bullet screen interaction method according to any one of claims 2 to 7, characterized in that: At least some of the cards are different in shape and size.

9. The image bullet screen interaction method according to any one of claims 1 to 7, characterized in that, The target direction is between the horizontal and vertical directions of the display interface.

10. The image bullet screen interaction method according to claim 9, characterized in that, The target direction is diagonally downward from right to left.

11. A picture-based bullet screen interactive system, characterized in that, include: The selection module is used to select cards to be displayed from the card pool according to preset rules; A rotation module is used to rotate the card to the target orientation to obtain the target card; The determining module is used to determine the movement trajectory of the target card based on the movement trajectory of the previous card; The display module is used to display each bullet screen on the display interface based on the movement trajectory of each target card; The response module is used to respond to the triggering of a target bullet comment among multiple bullet comments and display animation effects associated with the target bullet comment; The display module is further used for: Create a DOM node for each target card, and bind a click event to each DOM node; Configure animation code for each DOM node, which is used to define the movement trajectory of the target card; The display module is further used for: If the i-th target card is not assigned to the first motion track, then the starting point coordinate of the i-th target card entering the display interface is calculated and set according to the starting point coordinate of the (i-1)-th target card, where the i-th target card is one of the plurality of target cards.

12. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 10.

13. A computer-readable storage medium having a computer program stored thereon, characterized in that, The computer program may be executed by at least one processor to cause the at least one processor to perform the steps of the method according to any one of claims 1 to 10.

Images