JP2023096885A - Program, information processing device, image editing method and image display method - Google Patents

Abstract

To provide a technique of creating a composite having image visual effects according to user actions set for every layer.SOLUTION: A program causes a computer to function as: first reception means for receiving, via a UI screen, an instruction to set a reaction amount of visual effects of a manipulated variable specified by a user action in a plurality of layer images included in a composite image and each of the plurality of layer images; display control means causing display means to display a composite image formed by superimposing the plurality of layer images, the visual effects of which respectively change according to user actions; and second reception means for receiving an instruction to store data representing the plurality of images set according to the instructions or information representing locations of the plurality of images and the reaction amount.SELECTED DRAWING: Figure 18B

Description

The present invention relates to techniques for creating, editing, or displaying composite images that are stacks of images that can be moved.

A technique for publishing an image created on a computer is known. For example, Patent Literature 1 discloses an animation editing program that can edit an animation for changes in a plurality of attributes of an image object with a simple operation.

JP 2020-166589 A

In the service of Patent Literature 1, only a predetermined animation is executed, and it is not possible to freely set the content of the visual effect according to the user's action.

In contrast, the present invention provides a technique for creating a composite image having visual effects according to user actions set for each layer.

According to one aspect of the present disclosure, a computer provides a plurality of layer images included in a composite image and an instruction to set a reaction amount of a visual effect with respect to an operation amount specified by a user action on each of the plurality of layer images. and display means for displaying a synthesized image obtained by superimposing the plurality of layer images, wherein the synthesized image is obtained by superimposing the plurality of layer images each of which has a visual effect that changes according to the user action. and second receiving means for receiving an instruction to store the plurality of images set according to the instruction or the information indicating the location of the plurality of images and the data indicating the reaction amount. provide a program to

The visual effect includes a plurality of types of processing, the first receiving means receives an instruction to set a plurality of types of visual effects in each of the plurality of layer images, and the second receiving means responds to the instruction. may receive an instruction to store the data indicating the reaction amounts of the plurality of types of visual effects set by the method.

the UI screen has a first UI object for setting the execution order of the plurality of types of processing;
The second receiving means may receive an instruction to write information indicating an execution order set via the first UI object into the data.

The UI screen may have a first area for previewing the synthesized image and a second area for editing the reaction amount.

The UI screen may have a boundary line between the first area and the second area that is moved by a user operation.

The UI screen may switch a screen on which one of the first area and the second area is displayed to a screen on which the other of the first area and the second area is displayed by a user operation.

The UI screen may include a matrix, and the plurality of layer images may be arranged in one of rows and columns in the matrix and the visual effect items may be arranged in the other.

a process in which the visual effect in one layer image among the plurality of layer images moves the one layer image according to a vector having at least one axis component among a first axis, a second axis, and a third axis; A process of rotating the layer image of the above about a rotation axis having at least one axis component of the first axis, the second axis, or the third axis, rotating the one layer image on the first axis or the second axis A process of expanding along an axis, a process of changing the transparency of the one layer image, a process of changing the hue of the one layer image, a process of changing the brightness of the one layer image, and the saturation of the one layer image. and at least one of processing for changing the sharpness of the one layer image.

wherein the UI screen has a second UI object for setting details of the visual effect for each of a plurality of areas obtained by spatially dividing each of the plurality of layer images; An instruction to save the data including the content of the visual effect set via the object together with the identification information of the area may be accepted.

The UI screen has a third UI object that sets division positions for spatially dividing each of the plurality of layer images into a plurality of areas, and the second receiving means is set via the third UI object. An instruction to save the data including the information indicating the division position may be accepted.

The UI screen has a fourth UI object for setting the value of the reaction amount at a reference position of the area for each of the plurality of areas, and the second receiving means is set via the fourth UI object. Further, an instruction to save the data including information indicating the amount of reaction at the reference position may be accepted.

The UI screen has a fifth UI object that sets a function for changing the reaction amount in each of the plurality of areas, and the second receiving means is set via the fifth UI object. , an instruction to save the data including information indicating the function.

The UI screen has a sixth UI object that designates the amount of operation corresponding to the amount of reaction of the visual effect when generating a thumbnail image of the composite image, and the second receiving means receives the sixth UI object. An instruction may be received to write the information indicating the visual effect in generating the thumbnail image, which is set via the data, into the data.

wherein the plurality of layer images includes two layer images of different sizes, the UI screen has a seventh UI object for setting a positional relationship between each of the two layer images of different sizes, and the second reception The means may receive an instruction to save the data including the information indicating the positional relationship set via the seventh UI object.

Another aspect of the present disclosure provides a plurality of layer images included in a composite image and an instruction to set a reaction amount of a visual effect with respect to an operation amount specified by a user action in each of the plurality of layer images. and a first receiving means for receiving a composite image obtained by superimposing the plurality of layer images, the composite image obtained by superimposing the plurality of layer images each having a different visual effect according to the user action, on a display means. display control means for displaying; and second receiving means for receiving an instruction to save the plurality of images set according to the instruction or the information indicating the locations of the plurality of images and the data indicating the reaction amount. An information processing device is provided.

According to still another aspect of the present disclosure, an instruction to set a plurality of layer images included in a synthesized image and a reaction amount of a visual effect with respect to an operation amount specified by a user action in each of the plurality of layer images is provided on a UI screen. and displaying, on a display means, a composite image obtained by superimposing the plurality of layer images, wherein the composite image is obtained by superimposing the plurality of layer images, the visual effect of which changes according to the user action. and receiving an instruction to store the plurality of images set according to the instruction or the information indicating the locations of the plurality of images and the data indicating the reaction amount.

According to still another aspect of the present disclosure, a computer is instructed to set a plurality of layer images included in a composite image and a reaction amount of a visual effect to an operation amount specified by a user action in each of the plurality of layer images. a first generation means for generating UI screen data to be received; and a composite image obtained by superimposing the plurality of layer images, wherein the plurality of layer images are superimposed and the visual effect changes according to the user action. a second generation means for generating data for displaying an image on a display means; and storing the plurality of images set according to the instruction or information indicating the locations of the plurality of images and the data indicating the reaction amount. Provide a program for functioning as receiving means for receiving instructions.

Yet another aspect of the present disclosure is a UI screen that receives an instruction to set a plurality of layer images included in a composite image and a reaction amount of a visual effect with respect to an operation amount specified by a user action on each of the plurality of layer images. and displaying a composite image obtained by superimposing the plurality of layer images, wherein the composite image is obtained by superimposing the plurality of layer images each of which has a visual effect that changes according to the user action. a second generating means for generating data to be displayed on the means; and an instruction to save the plurality of images set according to the instruction or information indicating the location of the plurality of images and the data indicating the reaction amount. An information processing apparatus having a reception means is provided.

Yet another aspect of the present disclosure is a UI screen that receives an instruction to set a plurality of layer images included in a composite image and a reaction amount of a visual effect with respect to an operation amount specified by a user action on each of the plurality of layer images. and displaying, on a display means, a composite image obtained by superimposing the plurality of layer images, wherein the composite image is obtained by superimposing the plurality of layer images each of which has a visual effect that changes according to the user action. and receiving an instruction to store the plurality of images set in accordance with the instruction or information indicating the locations of the plurality of images and the data indicating the reaction amount. I will provide a.

According to yet another aspect of the present disclosure, a computer comprises: display means for displaying a screen; reception means for receiving an input of an operation amount corresponding to a user action on the screen; A program for functioning as display control means for causing the display means to display a composite image in which the plurality of layer images are superimposed using data in which the reaction amount of the visual effect with respect to the operation amount in each of the plurality of layer images is recorded. I will provide a.

Still another aspect of the present disclosure includes display means for displaying a screen, reception means for receiving an input of an operation amount corresponding to a user action on the screen, a plurality of layer images included in a synthesized image, and the plurality of layers. and display control means for causing the display means to display a composite image in which the plurality of layer images are superimposed using data in which reaction amounts of visual effects with respect to the operation amounts in each image are recorded. .

Yet another aspect of the present disclosure includes the steps of: displaying a screen; receiving input of an operation amount corresponding to a user action on the screen; and causing the display means to display a composite image in which the plurality of layer images are superimposed using data in which reaction amounts of visual effects with respect to the operation amounts are recorded.

According to the present invention, it is possible to freely and easily create a composite image having visual effects corresponding to user actions for each layer.

1 is a diagram showing an outline of an image display system 1 according to one embodiment; FIG. Illustration showing the concept of composite image FIG. 2 is a diagram illustrating the functional configuration of the image display system 1; FIG. 2 is a diagram exemplifying the hardware configuration of the server 10; FIG. 2 is a diagram exemplifying the hardware configuration of the user terminal 20; A diagram showing the relationship between a layer image L and a frame Diagram illustrating visual effects used in a composite image A sequence chart illustrating the operation of the image display system 1 A diagram exemplifying the work screen 4 is a diagram exemplifying the data structure of a database 111; FIG. A figure which illustrates UI object 921. FIG. FIG. 4 is a diagram exemplifying visual effect setting information regarding a layer image L; 4A and 4B are diagrams illustrating reaction regions in a layer image L; FIG. FIG. 11 is a view exemplifying a screen for changing the execution order of effects; Figures illustrating visual effects; Figures illustrating visual effects; FIG. 11 is a diagram illustrating a problem when generating thumbnail images; 4 is a sequence chart illustrating an operation related to viewing a composite image; The figure which illustrates the display screen of a synthetic image. The figure which illustrates the display screen of a synthetic image. The figure which illustrates the display screen of a synthetic image. The figure which illustrates the display screen of a synthetic image. The figure which illustrates the display screen of a synthetic image.

1. Configuration FIG. 1 is a diagram showing an overview of an image display system 1 according to one embodiment. The image display system 1 is a system that provides an image editing and providing service (hereinafter simply referred to as “image service”), and has a server 10 and a user terminal 20 . The user terminal 20 is a computer device used by a user of the imaging service to access the server 10 . The server 10 provides the synthesized image data to the user terminal 20 . This composite image can be said to be a "movable laminated image" as follows. Although the image display system 1 can include a plurality of user terminals 20, only two user terminals 20 are shown here for the sake of simplicity. When distinguishing between a plurality of user terminals 20, subscripts are used such as user terminal 20[A] and user terminal 20[B]. A plurality of user terminals 20 are collectively referred to simply as user terminals 20 when not distinguished.

FIG. 2 is a diagram showing the concept of a synthesized image. A composite image I includes a plurality of layer images. Hereinafter, the image of the i-th layer from the bottom is referred to as layer image L[i]. When not specifying which layer in particular, it is simply called a layer image L generically. In the example of FIG. 2, four layer images L of layer images L[1], L[2], L[3], and L[4] are shown. Each layer image L changes its defined visual effect according to a user action (more specifically, movement of a cursor pointer, for example) on the user terminal 20 . A user action is an input operation performed by the user on the user terminal 20, such as moving the cursor pointer, dragging and dropping, clicking, tapping, swiping, or tilting the terminal body. For example, as the cursor pointer moves from left to right, layer image L[1] blurs more and then less blur, layer image L[2] moves left and then right, Layer image L[3] returns to its original size after being enlarged, and layer image L[4] moves to the left after moving to the right. In this way, each layer image L has a different visual effect (or image processing) depending on the user's action, giving the user the impression that the composite image I as a whole is changing in a complex manner. .

FIG. 3 is a diagram illustrating the functional configuration of the image display system 1. As shown in FIG. The image display system 1 includes storage means 11, generation means 12, generation means 13, reception means 14, storage means 15, communication means 16, control means 19, storage means 21, access means 22, display means 23, reception means 24, It has display control means 25 , reception means 26 and control means 29 . In this example, storage means 11, generation means 12, generation means 13, reception means 14, storage means 15, communication means 16, control means 19 are connected to server 10, storage means 21, access means 22, display means 23, reception means 24, display control means 25, reception means 26, and control means 29 are implemented in the user terminal 20, respectively.

Storage means 11 stores various data and programs. In this example, the data stored by the storage means 11 includes the database 111 . The database 111 is a database that records data regarding composite images. The generating means 12 generates UI screen data for receiving an instruction to set a reaction amount of a visual effect with respect to an operation amount specified by a user action in each of the plurality of layer images included in the composite image and the plurality of layer images ( An example of the first generating means). In this example, this UI screen receives an instruction from the user terminal 20 to set multiple types of visual effects for each of multiple layer images. The operation amount specified by the user action is, for example, the amount of movement of the cursor pointer, the length of distance of flicking or swiping, the length of time or speed, or the amount of inclination of the terminal body. The generation means 13 generates data for displaying the composite image on the display means (an example of the second generation means). The accepting unit 14 accepts an instruction to store a plurality of images set according to the instruction, or information indicating the locations of the plurality of images, correspondence relationships, reaction amounts, and data indicating types of visual effects. The storage means 15 stores these data in the storage means according to the instruction. More specifically, these data (hereinafter referred to as “composite image data”) are written in database 111 stored in storage means 11 . Communication means 16 transmits data to or receives data from another device. For example, the communication unit 16 transmits to the user terminal 20 data for displaying the composite image indicated by the composite image data stored in the database 111 on the user terminal 20 . The control means 19 performs various controls.

Storage means 21 stores various data and programs. The access means 22 accesses the server 10 . The user terminal 20 receives (or acquires) the code for displaying the composite image and the images of the multiple layers from the server 10 via the access means 22 . The display means 23 displays a screen. The accepting unit 24 accepts, via the UI screen, an instruction to set a plurality of layer images included in the composite image and a reaction amount of the visual effect with respect to an operation amount specified by a user action on each of the plurality of layer images ( an example of the first receiving means). The display control means 25 causes the display means 23 to display the synthesized image. The display control means 25 uses the synthetic image data provided from the server 10 to display the synthetic image. The accepting unit 26 accepts an instruction to save the plurality of images set according to the instruction, or the information indicating the location of the plurality of images and the data indicating the reaction amount (or composite image data) (an example of the second accepting unit). . The control means 29 performs various controls.

FIG. 4 is a diagram illustrating the hardware configuration of the server 10. As illustrated in FIG. The server 10 includes a CPU (Central Processing Unit) 101, a memory 102, a storage 103, and a communication IF 1.
04 (or information processing device). The CPU 101 is a processing device that performs various calculations according to programs. The memory 102 is a main storage device that functions as a work area when the CPU 101 executes a program.
Access Memory). The storage 103 is an auxiliary storage device that stores programs and data, and includes, for example, an HDD (Hard Disc Drive) or an SSD (Solid State Drive). The communication IF 104 is a device that communicates with other devices according to a predetermined communication standard (eg, Ethernet), and includes, for example, a NIC (Network Interface Card).

In this example, the storage 103 stores a program (hereinafter referred to as “server program”) for causing a computer to function as the server 10 in the image display system 1 . At least one of the memory 102 and the storage 103 is an example of the storage unit 11 while the CPU 101 is executing the server program. The CPU 101 is an example of the generating means 12 , the generating means 13 , the accepting means 14 , the storing means 15 and the controlling means 19 . Communication IF 104 is an example of communication means 16 .

FIG. 5 is a diagram illustrating the hardware configuration of the user terminal 20. As shown in FIG. The user terminal 20 is a computer device having a CPU 201, a memory 202, a storage 203, a communication module 204, a display device 205, and an input device 206, such as a smart phone or personal computer. The CPU 201 is a processing device that performs various calculations according to programs. A memory 202 is a main storage device that functions as a work area when the CPU 201 executes a program, and includes, for example, a RAM. The storage 203 is an auxiliary storage device that stores programs and data, and includes an SSD, for example. The communication module 204 is a device that communicates with other devices according to a predetermined communication standard (eg, WiFi (registered trademark) and LTE (registered trademark)), and includes, for example, a wireless communication chip and an antenna. The display device 205 is a device for displaying information, and includes, for example, an LCD (Liquid Crystal Display) or an OLED (Organic Light-Emitting Diode) display. The input device 206 is a device for inputting user instructions or data to the user terminal 20 (or CPU 201), and includes at least one of a touch screen, keypad, and microphone, for example.

In this example, the storage 203 stores a program (hereinafter referred to as “client program”) for causing a computer to function as the user terminal 20 (that is, client) in the image display system 1 . At least one of the memory 202 and the storage 203 is an example of the storage unit 21 while the CPU 201 is executing the client program. Communication module 204 is an example of access means 22 . The CPU 201 is an example of the display control means 25 and the control means 29 . The display device 205 is an example of the display means 23 . The input device 206 is an example of the receiving means 24 . A client program is a general-purpose web browser program or a dedicated application program.

2. Overview of Visual Effect Before describing the visual effect, the relationship between the layer image L and the frame will be described. A frame is a virtual area specifying an image to be displayed. A portion of each layer image L that overlaps the frame is cut out and displayed.

6 is a diagram showing the relationship between the layer image L and the frame F. FIG. The position of each layer image L is set in relation to the frame F (more specifically, the reference point on the frame). Since the image displayed as the composite image is only the part of each layer image that fits within the frame F, the size of each layer image L may be different from each other, and may be larger or smaller than the frame F. Thus, images of various sizes can be used as the layer image L in this embodiment.

FIG. 7 is a diagram illustrating visual effects used in a composite image. Before describing the operation of the image display system 1, an outline of visual effects will be described. In this example, the visual effects are partitioned into groups. Specifically, visual effects are classified into three categories: "normal image processing", "stereoscopic image processing", and "filter processing". Each group contains one or more visual effects.

In this example, the group "normal image processing" includes "simple shift effect", "simple rotation effect", "transparency effect", "X shift effect", "Y shift effect", "rotation effect", "X scale effect". , 'Y scale effect', 'X tilt effect', and 'Y tilt effect'. In the following description, the axis extending horizontally to the right of the screen when the top and bottom of the screen are arranged correctly is referred to as the X-axis, and the axis extending vertically is referred to as the Y-axis. The axis is called the Z-axis. The X-axis, Y-axis, and Z-axis are examples of the first, second, and third axes, respectively.

The "simplified movement effect" is processing for changing the position of the layer image L with respect to the frame according to the position of the cursor pointer. Specifically, the simple movement effect is a process of changing the position of the layer image L so that the amount of displacement of the cursor pointer and the amount of displacement of the layer image L in the vertical and/or horizontal directions are proportional. Here, the "simple" movement effect is a fixed proportional relationship between the amount of displacement of the cursor pointer and the amount of displacement of the layer image L, and is a relatively simple process with a simple setting method. It comes from that.

The "simplified rotation effect" is processing for changing the rotation angle of the layer image L around the rotation axis parallel to the depth direction (Z-axis) of the screen according to the position of the cursor pointer. Specifically, the simple rotation effect is a process of changing the position of the layer image L so that the displacement amount of the cursor pointer and the rotation angle of the layer image L are proportional. Here, the "simple" rotation effect means that the relationship between the amount of displacement of the cursor pointer and the rotation angle of the layer image L is in a fixed proportional relationship, and is a relatively simple process with a simple setting method. It comes from that.

The “transparency effect” is processing for changing the degree of transparency (or transparency) of the layer image L according to the position of the cursor pointer. The "X movement effect" is processing for changing the horizontal position of the layer image L according to the position of the cursor pointer. The "Y movement effect" is processing for changing the vertical position of the layer image L according to the position of the cursor pointer. The "rotation effect" is processing for changing the rotation angle of the layer image L (at this time, the rotation axis is the Z-axis) according to the position of the cursor pointer. The "X scale effect" is processing for changing the horizontal scale of the layer image L according to the position of the cursor pointer. The "Y scale effect" is processing for changing the scale of the layer image L in the vertical direction according to the position of the cursor pointer. The "X tilt effect" is processing for tilting and deforming the layer image L in the horizontal direction, and is processing for changing the amount of tilt according to the position of the cursor pointer. The "Y tilt effect" is a process of tilting and deforming the layer image L in the vertical direction, and is a process of changing the amount of tilt according to the position of the cursor pointer. For "Transmission Effect", "X Shift Effect", "Y Shift Effect", "Rotation Effect", "X Scale Effect", "Y Scale Effect", "X Tilt Effect" and "Y Tilt Effect", the change You can set details such as how to move and the position of the cursor pointer where the effect is activated (details will be described later).

For example, two types of processing, a “simple movement effect” and an “X movement effect”, are prepared for processing to move the layer image L in the horizontal direction. It is different from "simple movement effect" in that the position of the cursor pointer to be moved can be set in detail. Others are the same. Note that the "X movement effect" and the "Y movement effect" are examples of processing for moving the layer image according to a vector having at least one axis component among the first axis, the second axis, and the third axis.

In this example, the group '3D arrangement processing' includes 'simple Z movement effect', 'simple 3D rotation effect', 'Z movement effect', 'horizontal rotation effect', and 'vertical rotation effect'. The "simple Z movement effect" is processing for changing the position of the layer image L in the Z-axis direction according to the position of the cursor pointer. Specifically, the simple Z movement effect is a process of changing the position of the layer image L so that the amount of displacement of the cursor pointer and the amount of displacement of the layer image L in the Z-axis direction are proportional. Here, the "simple" movement effect means that the amount of displacement of the cursor pointer and the amount of displacement of the layer image L in the Z-axis direction are in a fixed proportional relationship. is simple. The "simplified 3D rotation effect" is processing for changing the rotation angle of the layer image L with respect to the rotation axis parallel to the X-axis or the Y-axis according to the position of the cursor pointer. Specifically, the simple stereoscopic rotation effect is a process of changing the position of the layer image L so that the displacement amount of the cursor pointer and the rotation angle of the layer image L are proportional. Here, the "simple" three-dimensional rotation effect means that the relationship between the amount of displacement of the cursor pointer and the rotation angle of the layer image L is in a fixed proportional relationship, and the setting method is relatively simple. comes from something.

The "Z movement effect" is processing for changing the position of the layer image L in the Z direction according to the position of the cursor pointer. The "horizontal rotation effect" is processing for changing the rotation angle of the layer image L about the rotation axis parallel to the Y-axis according to the position of the cursor pointer. The “vertical rotation effect” is processing for changing the rotation angle of the layer image L about the rotation axis parallel to the X-axis according to the position of the cursor pointer. For the "Z movement effect", the "horizontal rotation effect", and the "vertical rotation effect", the method of change and the position of the cursor pointer at which the effect is activated can be set in detail (details will be described later).

In this example, the group "filtering" includes "simple hue effect", "hue effect", "brightness effect", "saturation effect" and "blur effect". "Simple hue effect" and "hue effect" are processes for changing the hue (or hue) of the layer image L according to the position of the cursor pointer. The "simple" hue effect is simpler than the "hue effect" in that the (quantized) hue of the layer image L and the position of the cursor pointer are in a fixed, proportional relationship. "Brightness effect" is processing for changing the brightness of the layer image L according to the position of the cursor pointer. The "saturation effect" is processing for changing the saturation of the layer image L according to the position of the cursor pointer. The "blurring effect" is processing for changing the sharpness of the layer image L according to the position of the cursor pointer. For "hue effect", "brightness effect", "saturation effect", and "blur effect", you can set details such as how to change and the position of the cursor pointer where the effect is activated (details will be described later) ).

Note that the visual effect described here is merely an example. Only part of the visual effects described above may be implemented, or visual effects other than those described above may be implemented together.

3. Operation The operation of the image display system 1 will be described below. The operation of the image display system 1 can be roughly divided into two. One is creation or editing of composite images, and the other is viewing of composite images. Based on these two operations, users of the image display system 1 are roughly classified into two types. One is the user who creates or edits the composite image. The other is a user who only browses the composite image (a user who does not create or edit the composite image). These two types of users are considered in the following discussion. A user terminal 20[A] is a user terminal used by a user who creates or edits a composite image. A user terminal 20[B] is a user terminal used by a user who browses the composite image. Here, the operation of the image display system 1 will be described for each of creating or editing a composite image and viewing it.

In this example, the image display system 1 requests user registration for a user who intends to create or edit a composite image. The storage means 11 of the server 10 has a user database (not shown), and stores information on users (account names, mail addresses, etc.) in this user database. The image display system 1 does not require user registration for a user viewing a composite image. Thus, in this example, anyone can view the composite image.

3-1. Creation or Editing of Synthetic Image FIG. 8 is a sequence chart illustrating an operation related to creation or editing of a synthetic image. The user terminal 20[A] accesses the server 10 according to the user's instruction. In response to this access, the server 10 transmits data for displaying the top screen of the image service to the user terminal 20[A]. The top screen includes, for example, a service menu for image services. The service menu includes an item for starting creation of a composite image and an item for starting editing of the composite image. Here, "creation" of a composite image means creating a new composite image, and "editing" means modifying an existing composite image.

When the user instructs creation of a new synthetic image in the service menu, the control means 19 of the server 10 creates a new synthetic image record in the database 111 . When the user instructs editing of an existing synthetic image in the service menu, the generating means 12 reads data of the synthetic image from the database 111 . The generating means 12 generates data for displaying a work screen (an example of a UI screen) for creating or editing a composite image (step S100). The control means 19 transmits the generated data to the user terminal 20[A] (step S101). When editing an existing composite image, the control means 19 also transmits data of the existing composite image to the user terminal 20[A]. The display control means 25 of the user terminal 20[A] causes the display means 23 to display the work screen according to this data (step S102).

FIG. 9 is a diagram exemplifying a work screen. This work screen includes areas 91 and 92 . An area 91 is an area for displaying a preview of the composite image being worked on. The area 91 has a UI object 911 at a predetermined position (top in this example). A UI object 911 is a UI object (a button in this example) for adding the layer image L. FIG. When this button is pressed, a dialog box for selecting a file is displayed. When the user selects an image file according to the instructions in this dialog box, the selected image file is added as a new layer image L. The user designates a file to be added as a new layer image L via this dialog box. Alternatively, the user can add a new layer image L by dragging and dropping an image file onto area 91 .

Region 91 further includes region 912 and region 913 . An area 912 is an area for displaying a preview of the synthesized image being created or edited. Area 913 is a UI object for saving the created or edited composite image.

A region 92 is a region for displaying and inputting information about each layer image L. FIG. Information about the layer image L includes, for example, the thumbnail image of the layer image L and setting items. Setting items include the type and content of visual effects. Setting items are defined for each visual effect. The area 92 has a UI object 921 and an area 922 . A UI object 921 is arranged at a predetermined position (upper portion in this example) of the area 92 . A UI object 921 is a UI object for designating a visual effect for changing settings. A region 922 displays UI objects for setting visual effects to be given to the layer image L. FIG. Details of visual effect setting (or reaction amount setting) via these UI objects will be described later.

In this example, the positions of the boundaries of the regions 91 and 92 can be changed by dragging the boundaries. In other words, the sizes of the areas 91 and 92 can be changed by the user's operation on the boundary line. Here, a user action on the boundary between the areas 91 and 92 is particularly referred to as a user operation. In this example, when the area 91 is expanded to the full work screen (that is, when the area 92 is not displayed), the display control means 25 makes the preview display of the synthesized image in the area 91 more similar to browsing of the synthesized image. change. Specifically, (a) the UI objects (for example, buttons, etc.) arranged above and below the area 92 are hidden, (b) the translucent white frame surrounding the composite image is made opaque, and (c) ) to hide the reaction area guide. According to this example, the user can confirm the preview of the composite image in an environment closer to the environment in which the composite image is viewed by moving the boundary line between the regions 91 and 92 .

A region 91 is an example of a first region for previewing a synthesized image. A region 92 is an example of a second region for editing the amount of reaction and the type of visual effect. A boundary line between the area 91 and the area 92 is an example of a boundary line between the first area and the second area that moves according to the user action.

Refer to FIG. 8 again. The accepting unit 24 of the user terminal 20[A] accepts an input of the visual effect reaction amount from the user on the work screen (step S103). The visual effect reaction amount is a parameter for defining the reaction amount (or change amount) of the visual effect to the user action. The input of the reaction amount here is a concept including both the new input of the reaction amount and the correction of the already input reaction amount.

In step S104, the control unit 29 of the user terminal 20[A] transmits to the server 10 an instruction to save the data for displaying the composite image. This instruction includes information indicating the location of the layer image (or data of the layer image itself) and information indicating various reaction amounts. The process of step S104 is triggered by a predetermined event. This event is an event that the upload of data to the server 10 has been explicitly instructed by the user. Alternatively, the event may be, for example, the input of a single reaction amount value.

The communication means 16 of the server 10 receives an instruction to generate data for displaying a composite image from the user terminal 20[A] (step S105). That is, the communication means 16 receives data indicating layer images and various reaction amounts. The generating means 13 generates data for displaying the composite image on the user terminal 20 according to this instruction (step S106). This data is written in a predetermined format. This data may be the data itself generated in step S203, which will be described later, or the data that is the material for the data generated in step S203. The receiving means 14 stores (or writes) the layer image and various reaction amount data in the database 111 in the storage means 11 (step S107).

FIG. 10 is a diagram illustrating the data structure of the database 111. As shown in FIG. Database 111 includes a plurality of records. One record indicates one composite image. Each record has a composite image ID and a server ID. The composite image ID is identification information that identifies a composite image, and is automatically given by the control means 19, for example. The server ID is identification information of the server that stores the layer image file. Each record also has a creator ID. The creator ID is identification information that identifies the user who created the composite image.

Each record has multiple sub-records. One subrecord indicates one layer image L. That is, each subrecord has a layer image ID. A layer image ID is identification information that identifies a layer image. Each sub-record also contains the position and order of execution of the effect. The position is information indicating the initial value of the positional relationship between the layer image L and the frame. The effect execution order is information indicating in what order multiple visual effects are applied to the layer image. Each subrecord further includes information (or reaction amount) indicating the content of each of the plurality of visual effects.

Although not shown, each record may also include tags representing the contents of the composite image (for example, creator name, drawn scene, image title, character name, etc.).

3-2. Details of Visual Effect Settings FIG. 11 is a diagram illustrating UI objects 921 . The UI objects 921 include a UI object 9211 that designates a group of visual effects and a UI object 9212 that designates one visual effect among the visual effects belonging to the designated group. In this example, UI object 9211 is a tab and UI object 9212 is a button. A button for setting a visual effect belonging to the group selected in the UI object 9211 is displayed as a UI object 9212 (a button for setting a visual effect belonging to a group not selected in the UI object 9211 is not displayed). .

FIG. 12 is a diagram exemplifying visual effect setting information regarding the layer image L displayed in the area 922 . In this example, setting information about the layer image L is displayed in a matrix. In this matrix, the i-th row except for the top row displaying the setting item name contains the setting information of the layer image L[i]. UI objects for setting the amount of reaction related to visual effects are arranged in the column direction of the matrix. The setting items for setting the amount of reaction related to visual effects change according to the selected visual effect. This matrix is an example of a second UI object that sets the reaction amount for each of a plurality of areas obtained by spatially dividing each of a plurality of layers. In this case, it can be said that the synthesized image data includes the area identification information and the reaction amount set for the area.

In this example, the reaction quantities for visual effects include "form of change", "waveform of change", "value change", "position and length of response area", and "show guide for response area". . The reaction area is an area that spatially divides the layer image L or the frame F, and refers to an area where the visual effect of the layer image L changes when the cursor pointer enters it.

"Change form" is a setting related to the moving direction of the cursor pointer that changes the visual effect. The "form of change" specifically includes "interlocking direction" and "response area outline". "Interlocking direction" is the moving direction of the cursor pointer associated with the change in visual effect. In this example, the "interlock direction" is one of three options: "none", "left and right", and "up and down". If "None" is selected, no interaction between cursor pointer movement and visual effect occurs, ie, this visual effect is not applied. When "left and right" is selected, the visual effect changes as the X coordinate of the cursor pointer changes (the visual effect does not change as the Y coordinate changes).
. When "up and down" is selected, the visual effect changes as the Y coordinate of the cursor pointer changes (the visual effect does not change as the X coordinate changes). As will be described later, it is also possible to set both "left and right" and "up and down" for one layer image L as interlocking directions.

Further, the "response area outline" indicates how the amount of reaction of the visual effect increases or decreases with respect to the movement of the cursor pointer. In this example, the reaction area is divided into three areas in the interlocking direction: one end side area, center area, and other end side area. For these three areas, (a) one end side end point of one end side area, (b) center side end point of one end side area = one end side end point of center area, (c) other end side end point of center area = other There are a total of four boundaries, ie, the center-side endpoint of the edge area and (d) the other-end-side endpoint of the other-end area. In this example, the reaction amount value is constant in the central area regardless of the position of the cursor pointer. In each item described below, how the reaction amount value changes in these areas is set.

In this example, the ``response area outline'' is either one-way (left), round-trip, or one-way (right) (when the interlocking direction is left or right). ), round-trip, or one-way (below). "One way (left)" means that the width of the right area is set to zero. That is, the reaction area is substantially divided into two areas, a left area and a central area. "One way (right)" means that the width of the left area is set to zero. That is, the reaction area is substantially divided into two areas, a central area and a right area. "Round trip" means that the widths of the left and right areas are set to non-zero values.

The "waveform of change" is the amount of response that defines the profile of the amount of change in the visual effect with respect to displacement of the cursor pointer (ie, how much the visual effect changes when the cursor pointer is displaced). In this example, it is first specified whether the change waveform is symmetrical or asymmetrical in the interlocking direction. Symmetry means that the profile of the one end side area and the profile of the other end side area are symmetrical with respect to the center area. That is, in this case, the work screen only accepts specification of waveforms for only one of the one-end area and the other-end area, and the other waveform is automatically determined according to the one waveform. Asymmetric means that the profile of the one end side area and the profile of the other end side area are asymmetric with respect to the center area. That is, in this case, the work screen accepts designation of waveforms for both the one-end area and the other-end area.

After accepting the specification of symmetrical/asymmetrical waveforms, the work screen presents options for the shape of change for each area. In this example, the options include linear, Bezier curve, logarithmic, and exponential. Additionally, for sigmoid, logarithmic, and exponential forms, the work screen accepts changes in the shape of the curve (eg, curvature). In one example, the shape of the curve is changed by the user specifying the position of a reference point (eg, a control point in a Bezier curve) by dragging and dropping. When the waveform is "asymmetric", the work screen accepts waveform settings separately for one side area and the other side area. The user can also set the profile, for example, to vary logarithmically in the left area and linearly in the right area. A UI object for setting a "waveform of change" is an example of a fifth UI object that sets a function for changing the amount of reaction in each of a plurality of areas. In this case, it can be said that the synthesized image data includes information indicating a function that changes the amount of reaction in that area.

"Value change" indicates a representative value of the reaction amount of the visual effect in the change waveform. In this example, the representative value is the value of the amount of reaction at the reference position of each area, specifically, the value of the amount of reaction at the aforementioned four boundaries (a) to (d). Either "base" or "custom" can be selected for the representative value of the reaction amount. When "Base" is selected, the value of the reaction amount at that endpoint is set to a default value (eg, zero). If "custom" is selected, the user can enter a numerical value for the amount of reaction at that endpoint. For endpoints for which "custom" is selected, a check box "keep out of area" is further provided. When this check box is checked, the value of the reaction amount at the endpoint is maintained when the cursor pointer moves out of the reaction area. When this check box is unchecked, the value of the reaction amount is returned to the initial value when the cursor pointer moves out of the reaction area. A UI object for setting "change in value" is an example of a fourth UI object for setting the value of the amount of reaction at the reference position of each of a plurality of areas. In this case, it can be said that the synthesized image data includes information indicating the value of the reaction amount at the reference position.

"Position and length of reaction area" is a setting that defines the size of the reaction area. The visual effect does not change no matter how much the cursor pointer moves outside the reaction area. Either "symmetrical" or "asymmetrical" can be selected for the shape of the reaction area. When "Symmetric" is selected, only the UI objects that set the widths of the center area and one end area become active, and the width of the other end area is set to the same value as the one end area. When "asymmetrical" is selected, the width can be set for each of the one end area, the central area, and the other end area. For example, if the interlocking direction is left and right, the reaction area is divided into a left area, a center area and a right area. The user can enter a numerical value for the width of each region. Regarding the central area, its position (more specifically, the position of the reference point (eg, center) of the central area) can be set. The position and length of the reaction area are specified in units of pixels, for example. A UI object for setting "position and length of reaction area" is an example of a third UI object for setting division positions for spatially dividing each layer image into a plurality of areas. In this case, it can be said that the synthesized image data includes information indicating the set division positions.

The change in the reaction area and the visual effect described above will be described with specific examples.

13A and 13B are diagrams illustrating reaction regions in the layer image L. FIG. The reaction area is divided into three areas, one end side area, the center area, and the other end side area, in the interlocking direction. In this example, the horizontal direction is the interlocking direction, and the reaction area is divided into three areas: left area, center area, and right area. The waveform of change in the left area is set to an S shape, the waveform of change in the center area is set to a constant, and the waveform of change in the right area is set to a logarithmic function. The value v of the reaction amount in each area is as follows.
Left area: v=fL(x) where x1≤x≤x2
Central area: v=fC(x) where x2≤x≤x3
Right area: v=fR(x) where x3≤x≤x4
Note that this x-coordinate is an x-coordinate in a coordinate system based on the frame F (for example, the origin is the lower left vertex of the frame F). The values of the reaction amount at each boundary are as follows.
When x=x1, v=v1
When x=x2, v=v2
When x=x3, v=v2
When x=x4, v=v3

For example, when the position xm of the mouse cursor is x1≤xm≤x2 (when the mouse cursor is in the left area), the value v of the reaction amount is v=fL(xm)
Calculated by If the visual effect is an X-movement effect, the value v of the reaction amount represents the amount of movement in the X-axis direction.

3-3. Details of the UI Refer to FIG. 12 again. “Display reaction area guide” is a setting related to the display of a guide indicating the position of the reaction area on the preview display of the synthesized image of the area 91 . The settings that specify the appearance of the guides, if displayed (brightness and color in this example), are included in "Show Guides for Reactive Areas". This guide display can be set for each visual effect and each reaction area. Therefore, even when a plurality of visual effects are applied to one layer image and the reaction areas are different for each visual effect, the work screen can distinguish and display each reaction area.

The information about the layer image L in the area 92 includes the item "other operations". Other operations include resetting, copying and pasting setpoints (or reaction quantities), and duplicating waveforms. The copy and paste functionality is useful when you want different visual effects to have the same settings. For example, when setting an effect that moves diagonally at 45 degrees on the XY plane, it is necessary to set the same amount of reaction for both the X movement effect and the Y movement effect. After inputting the reaction amount, executing copy, switching to the input of the Y movement effect, and executing paste, the same reaction amount as the X movement effect is inputted and applied.

"Layer image" is an area for displaying a thumbnail image of each layer image. A slide bar for changing the background color of the thumbnail image is provided under the words "layer image". The user can select the background color by moving this slide bar. A button for switching display/non-display of the layer image is provided in the area 91 next to each thumbnail image. By pressing this button, the user can switch display/non-display of the layer image. Buttons are provided next to each thumbnail image for adjusting the positional relationship between the frame and its layer image. The user can turn on this button for any layer image among the plurality of layer images. A layer image in the ON state can change its positional relationship with the frame (that is, positional relationship with other layer images) by dragging and dropping (or touching and sliding) in the area 92 . That is, this button is an example of a seventh UI object that sets the positional relationship between two layer images of different sizes.

Please refer to FIG. 11 again. UI object 921 includes UI object 9213 and UI object 9214 . A UI object 9213 is a button for setting the initial value of the positional relationship between the layer image L and the frame. When this button is pressed, a UI object (another example of the seventh UI object) for setting the positional relationship between the layer image L and the frame with numerical values indicating the deviation of the coordinates is displayed in the area 92 . The positional relationship between the layer image L and the frame is based on a predetermined position of the frame (for example, the center of the frame in the X and Y directions) of the layer image L (for example, the position of the layer image L in the X and Y directions). center). That is, by setting the positional relationship via this UI object, even when layer images of different sizes are used, the positional relationship of each can be set.

A UI object 9214 is a button for setting the execution order of effects. The order of execution of effects is information indicating the order of execution of visual effects. A plurality of visual effects can be set for one layer image L, but even if the same combination of visual effects is used, the result obtained may differ depending on the execution order. Therefore, the execution order is specified in the database 111 . When the user instructs to change the execution order of the effects via the UI object 9214 (for example, by pressing a button), a screen for changing the execution order of the effects is displayed.

FIG. 14 is a diagram illustrating a screen for changing the execution order of effects. FIG. 14A shows the screen before change. In this example, image objects representing each visual effect are stacked vertically. Visual effects corresponding to higher positioned image objects are applied earlier. The user can change the order of these image objects by dragging and dropping. FIG. 13B shows the screen after changing the order of execution. "Simple Rotation" has been changed to precede "Simple X-Movement". The screen shown in FIG. 14 is an example of a first UI object for setting the execution order of multiple types of visual effects. In this case, the composite image data includes information indicating the set execution order.

15A and 15B are diagrams illustrating visual effects. FIG. 15A shows an example in which the simple X movement is applied to the layer image L first, and then the simple rotation is applied. FIG. 15B shows an example where the simple rotation is applied first and the simple X translation after. In this way, even the same combination of visual effects can produce completely different results depending on the order in which they are executed. According to the image display system 1, it is also possible to change the execution order of such visual effects.

The image display system 1 further has UI objects for designating visual effects when generating thumbnail images. When trying to generate a thumbnail image in a case where a composite image is generated by superimposing a plurality of layer images as in this embodiment, an image obtained by simply superimposing a plurality of layer images is converted into a thumbnail if no consideration is given. Images may end up being generated as thumbnail images. Such images may be inappropriate as thumbnail images.

FIG. 16 is a diagram illustrating a problem when generating thumbnail images. FIG. 16A shows an example of visual effects in a composite image. This composite image includes a layer image L[1] depicting a woman writing on a document and a layer image L[2] depicting a woman raising her right hand. When the cursor pointer is on the left, the layer image L[1] has the lowest transmittance and the layer image L[2] has the highest transmittance. The transmittance of the layer image L[2] decreases. When the cursor pointer is at the left end of the reaction area, only the layer image L[1], that is, the woman writing on the document is displayed (FIG. 16(A): a). When the cursor pointer is in the center, the transmittance of layer image L[1] and layer image L[2] are both 50%. is displayed (FIG. 16(A): b). When the cursor pointer is at the right end of the reaction area, only the layer image L[2], that is, the woman raising her right hand is displayed (FIG. 16(A): c). In such a composite image, if an image in which the layer image L[1] and the layer image L[2] are simply superimposed is thumbnailed, an image in which the right hand writing on the document and the right hand raised are overlapped. (FIG. 16A: A) is the thumbnail image. This is not what the creator of this composite image wants to use as a thumbnail image.

In the image display system 1, for example, the UI object 921 includes a UI object for calling a UI object for designating visual effects when generating thumbnail images. FIG. 16B is an example of a UI object for designating visual effects when generating thumbnail images. This UI object includes an area for displaying a preview of the thumbnail image It and an object P for designating the position of the cursor pointer. By dragging and dropping the object P, the user can specify the position of the cursor pointer. The thumbnail image It preview-displayed in this UI object is a reduced image of the actual composite image, but the display control means 25 converts the position of the cursor pointer into the size of the actual composite image and responds to the visual effect. Identify quantity values. That is, the visual effect in the thumbnail image It changes according to the position of the object P. FIG. If the creator of the composite image thinks that the composite image with visual effects in this state is suitable for the thumbnail image, he or she presses the decision button B to determine the position Pt of the cursor pointer for the thumbnail image. The storage means 21 stores the position Pt of the cursor pointer as the position of the cursor pointer for the thumbnail image. Further, the storage means 21 stores, as a thumbnail image, a thumbnail image of the synthesized image having the visual effect corresponding to the position Pt of the cursor pointer. When the value of the visual effect or its reaction amount is changed, the display control means 25 stores the thumbnail image having the changed visual effect corresponding to the position Pt of the cursor pointer in the storage means 21 . The screen of FIG. 16B is an example of a sixth UI object for designating an operation amount corresponding to a visual effect reaction amount when generating a thumbnail image. In this case, it can be said that the synthesized image data includes information specifying an operation amount corresponding to the reaction amount of the visual effect when generating the thumbnail image.

FIG. 16C is another example of UI objects for designating visual effects when generating thumbnail images. In this example, the display control means 25 does not accept designation of the cursor pointer position Pt from the object P, but receives designation of the cursor pointer position Pt from a specific user action (for example, double-clicking) on the thumbnail image It. . As with the UI object in FIG. 16B, the storage unit 21 stores the position Pt at which a specific user action has been received as the position of the cursor pointer for displaying the thumbnail image. Further, the storage unit 21 stores, as a thumbnail image, a thumbnail image of the composite image having the visual effect corresponding to the position Pt. That is, the screen of FIG. 16C is another example of the sixth UI object that designates the amount of operation corresponding to the reaction amount of the visual effect when generating the thumbnail image.

3-4. Browsing of Composite Image FIG. 17 is a sequence chart illustrating an operation related to browsing of a composite image. The user terminal 20[B] accesses the server 10 according to the user's instruction (step S201). In response to this access, the server 10 transmits data for displaying the top screen of the image service to the user terminal 20[B]. The top screen includes, for example, a service menu for image services. The service menu includes items for searching for synthetic images and items for viewing synthetic images. The item for searching for a composite image has a text box for entering a search keyword and a search button for instructing start of search. When the user enters a search keyword such as a creator name, scene, character name, etc. in this search box and presses a search button, the control means 19 extracts a composite image corresponding to the entered keyword and displays it on the user terminal 20 [B]. ]. This search includes, for example, a list of thumbnail images of composite images. When the user of the user terminal 20[B] selects one composite image from the presented composite images, the generating means 13 reads data of the selected composite image from the database 111 (step S202). Alternatively, if the user of the user terminal 20[B] knows in advance the access destination (for example, URL) of a specific composite image by some method (for example, notification from the creator), the user terminal 20[B] The access destination may be accessed directly. The URL of the composite image is uniquely determined by, for example, combining a domain name for accessing the server 10 and a word such as a composite image ID. In this case, the generating means 13 reads out the accessed composite image data from the database 111 (step S202).

In step S<b>203 , the generating means 13 uses the data read from the database 111 to generate data for displaying the composite image on the user terminal 20 . In one example, this data is code (or instructions) that runs on a client program on user terminal 20 . This code includes information specifying a layer image and information indicating the content of the visual effect in each layer image. Specifically, in the example where the client program is a general-purpose web browser program, this code is JavaScript code. In another example, where the client program is a proprietary application program, this data may be Java code or code written in a proprietary format. Note that when the JavaScript (registered trademark) code itself is generated and recorded in the database 111 in step S105, it is sufficient to read this data (that is, the code) from the database 111 in step S203, and the data is generated in step S203. You don't have to. The communication means 16 transmits the data for displaying the composite image, that is, the data of the generated code and the plurality of layer images to the user terminal 20[B] (step S204). In the user terminal 20[B], the display control means 25 executes the code. By executing the code, the synthesized image is displayed on the display means 23 (step S205).

18A to 18E are diagrams illustrating display screens of synthesized images. The composite image illustrated here is an image obtained by stacking the layer images L[1] to L[4] illustrated in FIG. In the composite image, the visual effects of each layer change according to user actions input via the receiving means 24 . Specifically, the visual effect of each layer changes according to the movement of the cursor pointer by the user action input via the receiving means 24 . When the user terminal 20[B] is a personal computer, the user action is movement of the cursor pointer P by operation input via a pointing device (for example, mouse). Alternatively, when the user terminal 20[B] is a smartphone, the user action is an operation of tilting the main body of the smartphone. In this case, the client program converts the tilt of the smartphone main body into the operation input of the pointing device. That is, when the user tilts the user terminal 20[B], the visual effect of the synthesized image changes according to the tilt. In this case, the cursor pointer P may not be displayed on the display screen of the synthesized image.

In this composite image, the interlocking direction of all layer images is the X direction. FIG. 18A shows the state where the cursor pointer is near the left end of the image, and FIG. 18E shows the state where the cursor pointer is near the right end. Layer L[1] becomes more blurred as the cursor pointer approaches the center. Layer L[2] moves to the right as the cursor pointer approaches the center. Layer L[3] expands as the cursor pointer approaches the center. Layer L[4] moves to the left as the cursor pointer approaches the center. These visual effects are combined to give the user the impression that the composite image as a whole is changing in a complex manner.

4. Modifications The present invention is not limited to the above-described embodiments, and various modifications are possible. Some modifications will be described below. Some of the items described in the following modified examples may be applied in combination with other parts.

Specific UI screens, visual effects, reaction areas, setting items, and reaction amounts in the image display system 1 are merely examples, and the present invention is not limited to the above-described embodiments. Some of the items illustrated in the embodiment may be omitted, and items other than the items illustrated in the embodiment may be added. For example, those described as separate UI objects in the embodiments may be integrated into one UI object.

The configuration of the work screen is not limited to those illustrated in the embodiment. In the embodiment, an example has been described in which the work screen is divided into an area 91 for previewing a synthesized image and an area 92 for editing visual effects, but the work screen corresponds to the area 92 on one screen, for example. It may include only the screen that In this case, when only the area 91 is displayed on the work screen, the work screen is switched to the screen corresponding to the area 92 by a predetermined user operation (for example, pressing a predetermined button) (here, "screen is switched"). includes an example in which a window corresponding to the area 92 pops up), or a window corresponding to the area 92 may be displayed in an overlapping manner. That is, the work screen may have a UI object (for example, a button) that switches a screen on which one of the areas 91 and 92 is displayed to a screen on which the other of the areas 91 and 92 is displayed by user operation. Moreover, even when the area 91 and the area 92 are included in one screen, the boundary line between these two areas may be fixed.

The screen configuration of the area 92 is not limited to that illustrated in the embodiment. In the embodiment, an example has been described in which layer images and visual effect setting items are displayed in a matrix in the area 92 . However, for example, a list of layer images may be displayed in the area 92, and when a desired layer image is selected, a visual effect setting screen for that layer image may be opened in a separate window.

The method of dividing the reaction region is not limited to those exemplified in the embodiments. Although the example in which the reaction area is divided into three areas along the X-axis has been described in the embodiment, the reaction area may be divided into two areas, or may be divided into four or more areas. . Also, the direction in which the reaction regions are divided does not have to be the same as the interlocking direction. For example, when the interlocking direction is the X direction, the reaction area may be divided along the Y axis instead of the X axis, or may be divided along both the X axis and the Y axis (that is, two-dimensionally). good too. Alternatively, the reaction area may not be split and treated as a single area.

In the embodiment, a plurality of types of visual effects that can be applied to each layer image are prepared, and the user can select the visual effect to be applied to the layer image from among these plurality of visual effects. However, the visual effect may be specified in advance by the image display system 1 for each layer image or for the entire synthesized image, and may be configured so that the user cannot select it. In this case, only a single visual effect may be applied in each layer image. In this case, the visual effect setting screen for the layer image L (area 922 in FIG. 12, etc.) may not include a UI object for designating the type of visual effect.

In the embodiment, the method of changing the visual effect is defined by the relative positional relationship between the reference position and the position of the cursor pointer (that is, the amount of change in the visual effect is defined by the coordinates of the reference position and the coordinates of the cursor pointer). example), which is a function of the difference. However, the method of changing user actions and visual effects is not limited to being defined by the relative positional relationship between the reference position and the position of the cursor pointer. Any amount of change in the visual effect may be used as long as it is defined by an operation amount specified by a user action. For example, the amount of change in visual effect may be a function of the tilt amount of the terminal or a function of the flick speed.

A specific method for setting the reaction amount of the visual effect is not limited to inputting numerical values by the user on the work screen. For example, the image display system 1 may present the user with a list of presets or templates prepared by the user, another user, or the system operator. This preset or template may be for a single layer image, or for multiple layer images (or an entire composite image). The user selects a desired one from this preset or template. The image display system 1 sets the response amount of each visual effect according to a preset or template selected by the user.

The hardware configuration of the image display system 1 is not limited to that illustrated in the embodiment. The image display system 1 may have any hardware configuration as long as it can implement the required functions. For example, a plurality of physical devices may work together to function as the server 10 . The server 10 may be a physical server or a virtual server (including so-called cloud).

Correspondences between functional elements and hardware are not limited to those illustrated in the embodiments. For example, at least part of the functions described as being implemented in the server 10 in the embodiments may be implemented in the user terminal 20 . Specifically, functions corresponding to the generating means 12, the generating means 13, and the receiving means 14 may be implemented in the user terminal 20 as application programs. In this case, the application program (that is, the user terminal 20) generates data for displaying the composite image by itself (internally). This is another example. In particular, database 111 may be implemented in a server device different from server 10 . Furthermore, some of the functional elements illustrated in FIG. 2 may be omitted. Alternatively, part of the functions described as being implemented in the user terminal 20 in the embodiments may be implemented in the server 10 . Specifically, functions corresponding to the reception unit 24, the display control unit 25, and the reception unit 26 may be implemented in the server 10 by a server program.

The programs executed by the CPU 101, CPU 201, etc. may be provided by downloading via a network such as the Internet, or may be provided in a computer-readable non-readable medium such as a DVD-ROM (Digital Versatile Disk Read Only Memory). It may be provided in a state recorded on a temporary recording medium.

Reference Signs List 1 image display system 10 server 11 storage means 12 generation means 13 generation means 14 reception means 15 storage means 16 communication means 19 control means 20 user terminal 21... Storage means 22... Access means 23... Display means 24... Acceptance means 25... Display control means 26... Acceptance means 29... Control means 91... Area 92... Area 101... CPU 102... Memory 103 Storage 104 Communication IF 111 Database 201 CPU 202 Memory 203 Storage 204 Communication module 205 Display device 206 Input device 911 UI object 912 Area , 913 ... area, 921 ... UI object, 922 ... area, 9211 to 9214 ... UI object

Claims (22)

the computer,
a first receiving means for receiving, via a UI screen, a plurality of layer images included in the composite image and an instruction to set a reaction amount of a visual effect with respect to an operation amount designated by a user action in each of the plurality of layer images;
display control means for causing a display means to display a composite image obtained by superimposing the plurality of layer images, wherein the composite image is obtained by superimposing the plurality of layer images, the visual effect of which changes according to the user action;
A program for functioning as second receiving means for receiving an instruction to store the plurality of images set according to the instruction, or information indicating the locations of the plurality of images and data indicating the reaction amount. wherein the visual effect includes multiple types of processing;
the first receiving means receives an instruction to set a plurality of types of visual effects in each of the plurality of layer images;
2. The program according to claim 1, wherein said second receiving means receives an instruction to save said data indicating said reaction amount of said plurality of types of visual effects set according to said instruction. the UI screen has a first UI object for setting the execution order of the plurality of types of processing;
3. The program according to claim 2, wherein said second receiving means receives an instruction to save said data including information indicating an execution order set via said first UI object. The UI screen is
4. The program according to any one of claims 1 to 3, comprising: a first area for previewing said synthesized image; and a second area for editing said reaction amount. 5. The program according to claim 4, wherein the UI screen has a boundary line between the first area and the second area that is moved by a user operation. 5. The UI screen according to claim 4, wherein a screen on which one of the first area and the second area is displayed is switched to a screen on which the other of the first area and the second area is displayed by a user operation. program. the UI screen includes a matrix;
7. A program according to any one of the preceding claims, wherein said plurality of layer images are arranged in one of rows and columns in said matrix and said visual effect items are arranged in the other. wherein the visual effect in one layer image among the plurality of layer images is
A process of moving the one layer image according to a vector having at least one axis component among a first axis, a second axis, and a third axis;
A process of rotating the one layer image about a rotation axis having at least one axis component among the first axis, the second axis, or the third axis;
a process of enlarging the one layer image along the first axis or the second axis;
a process of changing the transparency of the one layer image;
a process of changing the hue of the one layer image;
a process of changing the brightness of the one layer image;
The program according to any one of claims 1 to 7, comprising at least one of a process of changing saturation of said one layer image and a process of changing sharpness of said one layer image. wherein the UI screen has a second UI object for setting details of the visual effect for each of a plurality of areas obtained by spatially dividing each of the plurality of layer images;
9. The second receiving unit according to any one of claims 1 to 8, wherein the second receiving means receives an instruction to store the data including the identification information of the area for the content of the visual effect set via the second UI object. program. the UI screen has a third UI object that sets a division position for spatially dividing each of the plurality of layer images into a plurality of areas;
10. The program according to claim 9, wherein said second receiving means receives an instruction to save said data including information indicating division positions set via said third UI object. the UI screen has a fourth UI object for setting the value of the reaction amount at a reference position of the area for each of the plurality of areas;
11. The program according to claim 9, wherein said second receiving means receives an instruction to save said data including information indicating the amount of reaction at said reference position set via said fourth UI object. The UI screen has a fifth UI object that sets, for each of the plurality of areas, a function that changes the amount of reaction in the area,
12. The program according to any one of claims 9 to 11, wherein said second receiving means receives an instruction to save said data including information indicating said function set via said fifth UI object. the UI screen has a sixth UI object that specifies the amount of operation corresponding to the amount of reaction of the visual effect when generating a thumbnail image of the composite image;
13. The second receiving unit according to any one of claims 1 to 12, wherein the second receiving unit receives an instruction to save the data including the information indicating the visual effect when generating the thumbnail image, which is set via the sixth UI object. The program described in Section. wherein the plurality of layer images includes two layer images of different sizes;
the UI screen has a seventh UI object that sets the positional relationship between the two layer images of different sizes;
14. The program according to any one of claims 1 to 13, wherein said second receiving means receives an instruction to save said data including information indicating said positional relationship set via said seventh UI object. a first receiving means for receiving, via a UI screen, a plurality of layer images included in the composite image and an instruction to set a reaction amount of a visual effect with respect to an operation amount designated by a user action in each of the plurality of layer images;
display control means for causing a display means to display a composite image obtained by superimposing the plurality of layer images, wherein the composite image is obtained by superimposing the plurality of layer images, the visual effect of which changes according to the user action;
and second receiving means for receiving an instruction to save the plurality of images set according to the instruction or information indicating the location of the plurality of images and the data indicating the amount of reaction. a step of receiving, via a UI screen, an instruction to set a plurality of layer images included in the composite image and a reaction amount of a visual effect with respect to an operation amount designated by a user action in each of the plurality of layer images;
a step of displaying, on a display means, a composite image obtained by superimposing the plurality of layer images, wherein the composite image is obtained by superimposing the plurality of layer images, the visual effect of which changes according to the user action;
and receiving an instruction to save the plurality of images set according to the instruction or information indicating the location of the plurality of images and data indicating the amount of reaction. the computer,
a first generating means for generating data of a plurality of layer images included in the composite image and UI screen data for receiving an instruction to set a reaction amount of a visual effect with respect to an operation amount designated by a user action on each of the plurality of layer images; ,
A second generation for generating data for displaying, on a display means, a composite image in which the plurality of layer images are superimposed, wherein the composite image in which the plurality of layer images are superimposed and the visual effect of which changes according to the user action. means and
A program for functioning as receiving means for receiving an instruction to store the plurality of images set according to the instruction, or information indicating the locations of the plurality of images and data indicating the reaction amount. a first generating means for generating data of a plurality of layer images included in the composite image and UI screen data for receiving an instruction to set a reaction amount of a visual effect with respect to an operation amount designated by a user action on each of the plurality of layer images; ,
A second generation for generating data for displaying, on a display means, a composite image in which the plurality of layer images are superimposed, wherein the composite image in which the plurality of layer images are superimposed and the visual effect of which changes according to the user action. means and
An information processing apparatus comprising: receiving means for receiving an instruction to store the plurality of images set according to the instruction or information indicating the locations of the plurality of images and data indicating the amount of reaction. a step of generating UI screen data for receiving an instruction to set a plurality of layer images included in the composite image and a reaction amount of a visual effect with respect to an operation amount specified by a user action in each of the plurality of layer images;
a step of generating data for displaying, on a display means, a composite image in which the plurality of layer images are superimposed, wherein the composite image in which the plurality of layer images are superimposed and the visual effect of which changes according to the user action;
and receiving an instruction to save the plurality of images set according to the instruction or information indicating the location of the plurality of images and data indicating the amount of reaction. the computer,
display means for displaying a screen;
receiving means for receiving an input of an operation amount corresponding to a user action on the screen;
displaying on the display means a composite image in which the plurality of layer images are superimposed using data recording a reaction amount of a visual effect with respect to the operation amount in each of the plurality of layer images included in the composite image and the plurality of layer images; A program for functioning as display control means for displaying. display means for displaying a screen;
receiving means for receiving an input of an operation amount corresponding to a user action on the screen;
displaying on the display means a composite image in which the plurality of layer images are superimposed using data recording a reaction amount of a visual effect with respect to the operation amount in each of the plurality of layer images included in the composite image and the plurality of layer images; An information processing apparatus having display control means for displaying. displaying an image on a display means;
receiving an input of an operation amount corresponding to a user action on the screen;
displaying on the display means a composite image in which the plurality of layer images are superimposed using data recording a reaction amount of a visual effect with respect to the operation amount in each of the plurality of layer images included in the composite image and the plurality of layer images; An image display method comprising the step of displaying.

Images