JP2017038793A - Computer program and computer implementation method for user interface image display - Google Patents

Abstract

PROBLEM TO BE SOLVED: To achieve a dynamic UI display that does not fix placement positions and that allows a plurality of UIs to be placed simultaneously at any screen position.SOLUTION: A computer program for UI image display causes a computer comprising a touch screen to function as: a region defining unit that defines a plurality of user interface (UI) regions in a display region on the touch screen; a receiving unit that receives a plurality of touch operations by an object on the touch screen; a region allocating unit that allocates one UI region to each received touch operation; and a UI image displaying unit that displays, on the touch screen, an UI image associated with the one UI region in accordance with the corresponding received operation.SELECTED DRAWING: Figure 4

Description

  The present invention relates to a computer program and a computer-implemented method for displaying a user interface (hereinafter referred to as “UI”) image. More specifically, it is used in a game executed on a smartphone (hereinafter referred to as “smart phone game”), and a plurality of UI images are visually displayed on the touch panel according to a contact operation by an object. The present invention relates to a computer program and a computer mounting method.

  As a UI used for a smartphone game, for example, a conventional technique disclosed in Patent Document 1 is known. In other words, this is a conventional technique in which two types of operation buttons (a so-called cross key, joystick, etc.) are displayed in a composite manner on a touch panel of a smartphone (see [Summary]).

JP 2012-168931 A

  The virtual cross keys and joysticks of the prior art are used for the purpose of providing a simulated game experience such as a conventional home game machine (such as Nintendo Family Computer (registered trademark)) on a smartphone. It is only a virtual display of typical operation keys. In particular, the cross keys and virtual joysticks of the prior art are arranged at fixed positions such as the lower right and lower left of the screen of the smartphone. The user has to restrict the user operability in that the user has to align his / her finger with the fixed position during operation and the operation area is limited. Particularly in recent smartphone games, user operations are becoming more and more complicated as content becomes more complex, and UIs with excellent user operability are required. In particular, it is desirable to realize a UI that allows a user to proceed with a game through a touch operation without being aware of the touch position on the screen.

  Therefore, the present invention relates to a UI used in such a smartphone game, and an object of the present invention is to provide a computer program and a computer mounting method for UI display particularly excellent in user operability. More specifically, an object is to realize a dynamic UI display that allows a plurality of UIs to be simultaneously arranged at an arbitrary screen position without fixing the arrangement position as in the prior art.

  In order to solve the above problems, according to the present invention, an area defining unit that defines a plurality of user interface (UI) areas in a display area on a touch screen, and a plurality of touches on the touch screen by an object An accepting unit that accepts an operation, an area allocating unit that assigns one UI area for accepting each touch operation, and a UI image that is associated with each UI area according to the accepting is displayed on the touch screen. A computer program for displaying a UI image is obtained which causes a UI image display unit to function as a computer having the touch screen.

  According to the present invention, a step of defining a plurality of user interface (UI) regions in a display region on the touch screen, a step of receiving a plurality of touch operations on the touch screen by an object, and each touch operation A touch screen comprising: a step of allocating one UI area to the reception of the image; and a step of displaying a UI image respectively associated with the one UI area on the touch screen in response to the reception. A computer-implemented method for UI image display is obtained.

  The features and advantages of the present invention will become apparent from the following detailed description of the invention, as well as from the accompanying drawings and claims.

FIG. 1 is a schematic diagram of a portable terminal for executing a computer program according to an embodiment of the present invention. FIG. 2 is a block diagram schematically showing the configuration of the mobile terminal of FIG. FIG. 3 is a block diagram showing an outline of input / output in the mobile terminal of FIG. FIG. 4 is a UI image display example displayed on the portable terminal of FIG. 1 by executing the computer program according to the embodiment of the present invention. FIG. 5 is a definition example of the UI area in the exemplary screen display of FIG. FIG. 6 is a main functional block diagram implemented using the computer program according to the embodiment of the present invention. FIG. 7 is a flowchart showing information processing by the computer program according to the embodiment of the present invention. FIG. 8 is a flowchart showing detailed information processing related to step S104 of FIG. FIG. 9 is a flowchart showing detailed information processing related to step S105 of FIG.

[Description of Embodiment of the Present Invention]
First, the contents of the embodiment of the present invention will be listed and described. A computer program for user input support according to an embodiment of the present invention comprises the following arrangement.

(Item 1)
An area defining unit for defining a plurality of user interface (UI) areas in a display area on the touch screen;
A reception unit that receives a plurality of touch operations on the touch screen by an object;
An area allocation unit that allocates one UI area for each touch operation received;
In response to the acceptance, a UI image display unit that displays a UI image associated with each of the one UI areas on the touch screen is caused to function on a computer having the touch screen. Computer program.
According to the computer program of this item, when holding a smartphone sideways and playing a smartphone game by two-handed operation, the game can be advanced by associating a plurality of UI images by touch operation with both hands, User operability can be improved. In addition, it is possible to realize a dynamic UI display that allows a plurality of UIs to be simultaneously arranged at arbitrary screen positions without fixing the arrangement position.

(Item 2)
A computer program according to item 1, further comprising:
Causing the computer to function as a slide operation component that constitutes a slide operation in which the touch operation is a slide operation and has a touch start point and a touch end point;
The area allocation unit accepts the slide operation according to the position of the touch start point to determine the one UI area, and the touch end in the display area on the touch screen for the one UI area. A computer program for accepting the slide operation until a point is specified.
According to the computer program of this item, when holding a smartphone sideways and playing a smartphone game by a two-handed operation, the game can be advanced by associating a plurality of UI images by a sliding operation with both hands, Furthermore, user operability can be improved.

(Item 3)
In the computer program according to item 2,
The computer program according to item 2, wherein the area allocation unit is configured not to accept another touch operation in the one UI area in the slide operation during the accepting state.
According to the computer program of this item, it is possible to clearly define a rule that allows a plurality of UIs to coexist when a smartphone game is played sideways with a smartphone held sideways.

(Item 4)
In the computer program according to item 2 or 3,
The slide operation component is
During the acceptance state, a touch position for each frame at a predetermined frame rate is acquired in the display area;
When there are a plurality of touch positions on the touch screen in the immediately preceding frame, one of the touch positions of the immediately preceding frame that is closest to the touch position of the slide operation in the current frame is associated with the touch position of the current frame. A computer program constituting at least a part of the slide operation.
According to the computer program of this item, when a smartphone is held sideways and a smartphone game is played by a two-handed operation, misrecognition due to coexistence of a plurality of UIs can be prevented.

(Item 5)
Any one of Items 2 to 4, wherein the area allocation unit further allocates a slide movable area for specifying the touch end point in the display area on the touch screen in correspondence with the UI area. A computer program described in the section.
According to the computer program of this item, the slide movable area can be set, and the user operability can be made flexible.
(Item 6)
The computer program according to any one of items 1 to 5, wherein each of the areas is formed in a rectangular shape.

(Item 7)
Defining a plurality of user interface (UI) areas in a display area on the touch screen;
Receiving a plurality of touch operations on the touch screen by an object;
Assigning one UI area to each touch operation received;
Displaying the UI images respectively associated with the one UI area on the touch screen in response to the acceptance, and implemented for a computer having the touch screen for displaying a UI image Method.
According to the method of this item, when a smartphone game is played by holding a smartphone sideways and a two-handed operation, the game can be advanced by associating a plurality of UI images by a touch operation with both hands. Can be improved. In addition, it is possible to realize a dynamic UI display that allows a plurality of UIs to be simultaneously arranged at arbitrary screen positions without fixing the arrangement position.

(Item 8)
In the method according to item 7,
The touch operation includes a slide operation including a touch operation point and a touch end point;
Allocating the UI area comprises
Determining the one UI area to be assigned according to the position of the touch start point;
The step of setting the one UI region to accept the slide operation until the touch end point is specified in the display area on the touch screen, and during the accepting state, And a step configured not to accept another touch operation in one UI region.
According to the method of this item, when a smartphone game is played by holding a smartphone sideways and a two-handed operation, the game can be progressed by associating a plurality of UI images by a sliding operation with both hands, Operability can be improved.

(Item 9)
9. The method according to item 8, wherein the step of assigning the UI area further assigns a slide movable area for specifying the touch end point in the display area on the touch screen corresponding to the UI area. A method comprising steps.
According to the method of this item, the slide movable region can be set, and the user operability can be made flexible.

[Details of the embodiment of the present invention]
A computer program and a computer-implemented method for displaying a UI image according to an embodiment of the present invention will now be described with reference to the drawings. In the figure, the same components are denoted by the same reference numerals. The computer program for displaying UI images according to the embodiment of the present invention is mainly applicable as a part of a game program as a smartphone game. More specifically, the computer program can be used to advance a game as part of the game program and to control the operation of the virtual space and the game character in the virtual space.

Hardware Configuration of Mobile Terminal A smartphone 1 shown in FIG. 1 is an example of a mobile terminal and includes a touch panel 2. The user of the smartphone can control the progress of the game through a user operation including a touch operation on the touch panel 2. Note that the mobile terminal for executing the computer program according to the present embodiment is not limited to the smartphone 1 as shown in FIG. 2, and is, for example, a mobile terminal equipped with a touch panel such as a PDA or a tablet computer device. It will be appreciated that any device can be used.

  As shown in FIG. 2, the smartphone 1 includes a CPU 3, a main memory 4, an auxiliary memory 5, a transmission / reception unit 6, a display unit 7, and an input unit 8 that are connected to each other via a bus. Of these, the main memory 4 is composed of, for example, a DRAM, and the auxiliary memory 5 is composed of, for example, an HDD. The auxiliary memory 5 is a recording medium capable of recording the computer program and game program according to the present embodiment. Various programs stored in the auxiliary memory 5 are expanded on the main memory 4 and executed by the CPU 3. Note that data generated while the CPU 3 operates in accordance with the computer program according to the present embodiment and data used by the CPU 3 are also temporarily stored on the main memory 4. The transmission / reception unit 6 establishes connection (wireless connection and / or wired connection) between the smartphone 1 and the network under the control of the CPU 3 and transmits / receives various information. The display unit 7 displays various information to be presented to the user under the control of the CPU. The input unit 8 detects a touch input operation (mainly a physical contact operation such as a tap operation, a slide (swipe) operation, and a flick operation) on the touch pal 2 of the user.

  The display unit 7 and the input unit 8 correspond to the touch panel 2 described above. As illustrated in FIG. 3, the touch panel 2 includes a touch sensing unit 301 corresponding to the input unit 8 and a liquid crystal display unit 302 corresponding to the display unit 7. The touch panel 2 displays an image under the control of the CPU 3, receives an interactive touch operation (such as a physical contact operation on the touch panel 2) by a smartphone user, and responds to it based on control by the control unit 303. The graphic is displayed on the liquid crystal display unit 302.

  More specifically, the touch sensing unit 301 outputs an operation signal corresponding to the touch operation by the user to the control unit 303. The touch operation can be performed by any object. For example, the touch operation may be performed by a user's finger, or a stylus may be used. In addition, as the touch sensing unit 301, for example, a capacitance type can be adopted, but is not limited thereto. When the control unit 303 detects an operation signal from the touch sensing unit 301, the control unit 303 determines as an operation instruction to the user's character, and transmits a graphic (not shown) corresponding to the instruction operation to the liquid crystal display unit as a display signal. Process. The liquid crystal display unit 302 displays a graphic corresponding to the display signal.

Game Screen Example Next, the operation of the computer program for displaying the user interface image and the computer-implemented method according to the present embodiment will be specifically described with reference to the game screen examples of FIGS. In the screen example of FIG. 4, the character 10 is arranged in the three-dimensional virtual game space 20. Then, a visual field image obtained by photographing the character 10 from the upper front of the character 10 by a virtual camera (not shown) is displayed on the touch panel as a two-dimensional image (the same applies to FIG. 5). At the same time, two UI images (30 at the upper left of the screen and 40 at the lower right of the screen) are superimposed on the view field image. The UI images 30 and 40 are displayed on the touch panel as a result of a touch operation on the touch panel by the user (for example, a slide operation with a finger).

  In smartphone games, the user usually holds the terminal vertically and often operates with one hand, but of course, the present invention is not limited to this, and the terminal may be operated with both hands. When the screen is operated with both hands, the touch operation should be allowed with the left hand and the right hand, respectively, and the UI images 30 and 40 shown in FIG. it can.

  Then, a game progress command is generated and executed from these UI images. For example, as the UI image 30 with the left hand is displayed as “Move”, an instruction to move the character 10 on the plane in the game space 20 in the direction (upper right) indicated by the UI image is executed. Similarly, as the UI image 40 with the right hand is displayed as “Camera”, an instruction to move the virtual camera in the game space 20 is executed so as to change the field of view in the upper right direction indicated by the UI image.

  By the way, when displaying a plurality of UI images by such a touch operation, particularly a slide operation, and generating a plurality of game progress commands, it is possible to make the user operation completely freely over the entire touch panel on the computer program. Have some difficulty. For example, when the user performs slide operations with the right hand and the left hand, and the two approach or cross each other, it becomes difficult for the program to determine which hand is used for the slide operation. The operation may be misrecognized.

  Therefore, in the embodiment of the present invention, as shown in FIG. 5, a plurality of UI areas for generating a plurality of UIs are defined in advance for the display area on the touch panel, and the rules are clarified. That is, a rule is defined in advance so that, for example, one UI image is generated for one UI area. In the example of FIG. 5A, the left and right hand UI areas are divided into two parts, a left half Z1 and a right half Z2, and one UI image is obtained for each by slide operation. It can be generated. At this time, different visual displays may be performed on the generated UI images so as to be associated with the UI area. For example, an orange color effect may be applied to the Z1 UI image 30, and a green color effect may be applied to the Z2 UI image 40.

  The UI area is not limited to two as shown in FIG. 5 (a), and even three or more of Z3 (solid line area), Z4 (dashed line area), and Z5 (dotted line area) as shown in FIG. 5 (b). It will be appreciated by those skilled in the art that any number may be used. In addition, the shape and size of each UI region can be arbitrary. For example, the shape of the UI area is preferably a rectangle as shown in FIGS. 5A to 5C, but is not limited to this, and may be a curved area.

  FIG. 5C shows a left-hand and right-hand UI area divided into two areas, a left area Z6 and a right area Z7, and Z6 accepts a left-hand slide operation and Z7 accepts a right-hand slide operation. UI images 30 and 40 are respectively displayed. Here, it should be noted that the UI image 30 in the region Z6 only needs to include the slide operation start point 30a in the region Z6, and the slide operation end point 30b need not be included in the region Z6. . That is, the touch start position where the touch operation by the user is received is included in any of the areas and may be associated.

  Further, in order to specify the end point 30b of the slide operation, a slide movable area corresponding to the UI area may be introduced separately from the UI area. The slide movable area is an area where a user can allow a slide operation. The slide operation end point 30b is specified in the slide movable area in the same manner as the slide operation start point 30a is specified in the UI area. The slide movable area may be any as long as it includes the UI area. Specifically, it may be the entire display area of the touch panel (that is, the entire game screen), or the slide movable area and the UI area may be the same area. When the touch position of the slide operation is within the slide movable area, the UI image is displayed during that time. On the other hand, when the slide operation is out of the slide movable area, the UI image that has been displayed is erased from the screen. Display control should be performed.

  As described above, by configuring the end point of the slide operation not to be constrained by the UI area, the present invention enables a slide operation in a slide movable area different from the UI area, and improves user operability. Has the advantage. In FIG. 5, the slide operation by the user has been described as an example. However, the present invention is not limited to this, and it should be understood that any physical contact operation on the touch panel such as a tap operation, a swipe operation, and a slide operation may be used. It is.

UI Image Display Processing A computer program and a computer-implemented method for displaying a UI image according to this embodiment will now be described with reference to FIGS.

  FIG. 6 shows a set of main functions implemented as a computer program and functioning in a portable terminal having a touch panel. Through the function set, an input as an operation signal is processed to generate an output as a display signal. The function set includes a user operation unit 100 related to a user input operation and object formation through a touch panel, and a game progress unit (character operation) 200 for operating a game in accordance with the user input operation or a character in a virtual space. Including.

  The user operation unit 100 mainly includes an area defining unit 110 for defining the UI area described with reference to FIG. 5, a contact / non-contact determining unit 120 that determines a touch operation or a detach operation on the touch panel, and a touch such as a slide operation. Touch operation accepting unit 130 that accepts a plurality of operations, an area assigning unit 140 that can assign one UI area and a corresponding slide movable area to accept each touch operation, and a slide operation from the touch start point to the touch end point And a UI image display unit 160 for displaying a UI image generated in response to the touch operation. The UI image generated by the UI image display unit 160 is superimposed on the game image as shown in FIG. 4, and the game progression unit 200 generates and executes a corresponding game progression instruction to advance the game.

7 to 9 are flowcharts illustrating a computer-implemented method for displaying a UI image according to this embodiment.
In step S101 of FIG. 7, the area defining unit 110 defines a plurality of UI areas in the display area on the touch screen as in the screen examples of FIGS. The operation may be set at the time of game play. For example, the operation may be set by the developer at the time of game program development, or may be set by the user at the time of initial setting after downloading the application. When a plurality of UI areas are defined in advance in step S101 and game play by the user is started, the process proceeds to step S102. In step S102, the contact / non-contact determining unit 120 performs determination of one or more touch operations / detach operations to the touch screen by an object such as a user's finger and a touch state determination process. When the touch operation is determined in step S102, the process proceeds to the next step S103 and subsequent steps.

  In step S <b> 103, the touch operation receiving unit 130 receives a plurality of touch operations. In step S <b> 104, one UI area is allocated by the area allocation unit 140 for each reception of the touch operation. When the touch operation is a slide operation having a touch start point and a touch end point, a slide movable area corresponding to the UI area is also assigned. In step S105, the slide operation configuration unit 150 configures the slide operation. Details of steps S104 and S105 will be described later with reference to FIGS.

  Finally, in step S106, the UI image display unit 160 displays the corresponding UI images respectively associated with the one UI area assigned in step S104 in response to acceptance of the touch operation in S103 on the touch screen. And superimposed on the game image. For example, when the touch operation is a slide operation, the translucent UI image shown in FIG. 4 and subjected to color processing according to the UI area is displayed. Further, for example, when the touch operation is a tap operation, a circular UI image centered on the tapped position is subjected to color processing according to the UI area and displayed (not shown).

  In relation to the processing of steps S104 and S105, detailed description will be made with reference to FIGS. 8 and 9, respectively. 8 and 9, it is assumed that the touch operation is a slide operation, that is, the touch operation includes a touch start point and a touch end point. However, the present invention is not limited to this. Note that the touch start point and the touch end point can be determined by the contact / non-contact determination unit 120.

  FIG. 8 is a flowchart illustrating in detail the processing in step S104, which is mainly executed by the area allocation unit 140. First, the output in step S103 is received, and in step S1041, a slide operation is accepted according to the touch start position, and one related UI area is provisionally determined. In step S <b> 1042, it is determined whether or not the one UI area is set to the accepting state by another slide operation. If the one UI area is not in the accepting state (that is, in a new accepting state), the process proceeds to step S1043, and the one UI area is determined to make an assignment for accepting the slide operation. . In step S1044, in response to the main determination of the one UI area, the slide movable area is allocated in association with the UI area. Next, the process proceeds to step S105 (FIG. 9).

  On the other hand, in the accepting state in step S1042, the touch operation is invalidated as being absent, and the UI area provisionally determined in step S1041 is also cleared. In other words, in the series of steps S1042 and S1044, receiving of another touch operation is inhibited while the slide operation target UI area is in the accepting state.

  FIG. 9 is a flowchart illustrating in detail the processing in step S105, which is mainly executed by the slide operation configuration unit 150. This process functions only when the touch operation is a slide operation (step S1051).

  In step S1052, in response to receiving the slide operation, the target UI area is set as a slide operation acceptance state. The reception state is maintained until later step S1058. During the slide operation, in step S1053, the touch position for each frame acquired according to a predetermined frame rate (for example, 30 fps is standard) is temporarily stored in the storage unit. As illustrated in FIG. 4 and FIG. 5, when a plurality of slide operations are performed on one touch panel region, this takes into account that a plurality of slide operation positions approach or intersect each other. . In this case, it is necessary to determine which sliding operation is performed when approaching or intersecting without making a misjudgment, but for this purpose, as described below, the position information for each frame is used. Is preferable.

  In a case where a plurality of touch positions are acquired as in the example of FIGS. 4 and 5 in a frame immediately before the current time point (referred to as “previous frame”) (step S1054), in step S1055, the frame at the current time point is acquired. One touch position of the immediately preceding frame closest to the touch position (referred to as “current frame”) is selected, and at least a part of the slide operation may be configured in association with the touch position of the current frame. In this way, by always storing the touch position of the immediately preceding frame one frame before and making a determination according to the positional relationship with the current frame, it is possible to prevent erroneous recognition as another slide operation. When only one (that is, own) touch position is acquired in the immediately preceding frame, at least a part of the slide operation may be configured by associating the touch position with the touch position in the current frame in step S1056.

  Finally, when the touch end point is specified by the contact / non-contact determination unit 120 in step S1057, the slide operation acceptance state is canceled in step S1058, and this step S105 ends, and the above-described step S106 is performed. move on.

  As described with reference to FIG. 5C, the touch end point in the case of the slide operation is not limited to the UI area assigned to the slide operation, and may be specified in the slide movable area. That is, the touch end point can be set to an arbitrary position within the slide movable area. In particular, when the slide movable area is set as the entire display area of the touch panel, the user can perform a slide operation for an arbitrary time and an arbitrary distance.

  Finally, as shown in FIG. 4, a plurality of UI images are superimposed on the game image, and a command associated with each UI image is executed as shown in FIG.

  According to the computer program and the computer mounting method for displaying a UI image according to the present embodiment, when a smartphone game is played by holding a smartphone sideways and a two-hand operation, a plurality of UIs by a touch operation with both hands is used. The game can be progressed in association with images, and user operability can be improved. In addition, it is possible to realize a dynamic UI display that allows a plurality of UIs to be simultaneously arranged at arbitrary screen positions without fixing the arrangement position.

  The computer program and the computer mounting method for displaying the UI image according to the embodiment of the present invention have been described above by way of example. The above-described embodiments are merely examples for facilitating understanding of the present invention, and are not intended to limit the present invention. The present invention can be changed and improved without departing from the gist thereof, and it is needless to say that the present invention includes equivalents thereof.

Claims (9)

An area defining unit for defining a plurality of user interface (UI) areas in a display area on the touch screen;
A reception unit that receives a plurality of touch operations on the touch screen by an object;
An area allocation unit that allocates one UI area for each touch operation received;
In response to the acceptance, a UI image display unit that displays a UI image associated with each of the one UI areas on the touch screen is caused to function on a computer having the touch screen. Computer program. The computer program according to claim 1, further comprising:
When the touch operation is a slide operation, the computer is caused to function as a slide operation configuration unit that configures a slide operation having a touch start point and a touch end point.
In the area allocation unit, the one UI area is determined by receiving the slide operation according to the position of the touch start point, and the touch end point in the display area on the touch screen for the one UI area. A computer program in which the slide operation is accepted until is identified. The computer program according to claim 2, wherein
The computer program according to claim 2, wherein the area allocation unit is configured not to accept another touch operation in the first UI area in the slide operation during the accepting state. The computer program according to claim 2 or 3,
The slide operation component is
During the acceptance state, a touch position for each frame at a predetermined frame rate is acquired in the display area;
When there are a plurality of touch positions on the touch screen in the immediately preceding frame, one of the touch positions of the immediately preceding frame that is closest to the touch position of the slide operation in the current frame is associated with the touch position of the current frame. A computer program constituting at least a part of the slide operation.   The area allocation unit further allocates a slide movable area for specifying the touch end point in the display area on the touch screen in correspondence with the UI area. A computer program according to one item.   The computer program according to claim 1, wherein each of the UI areas is formed in a rectangular shape. Defining a plurality of user interface (UI) areas in a display area on the touch screen;
Receiving a plurality of touch operations on the touch screen by an object;
Assigning one UI area to each touch operation received;
Displaying the UI images respectively associated with the one UI area on the touch screen in response to the acceptance, and implemented for a computer having the touch screen for displaying a UI image Method. The method of claim 7, wherein
The touch operation includes a slide operation including a touch operation point and a touch end point;
Allocating the UI area comprises
Determining the one UI area to be assigned according to the position of the touch start point;
The step of setting the one UI region to accept the slide operation until the touch end point is specified in the display area on the touch screen, and during the accepting state, And a step configured not to accept another touch operation in one UI region.   9. The method according to claim 8, wherein the step of assigning the UI area further includes a slide movable area for specifying the touch end point in the display area on the touch screen corresponding to the UI area. A method comprising the step of assigning.