"Project Sekai Colorful Stage! feat. Hatsune Miku" (Japanese: プロジェクトセカイ カラフルステージ！ feat. 初音ミク；English: Project Sekai Colorful Stage! feat. Hatsune Miku; Korean: 프로젝트 세카이 컬러풀 스테이지! feat.하츠네 미쿠) is a music rhythm social mobile card game co-planned by SEGA, Craft Egg, and Crypton Future Media, and produced by SEGA Games and Craft Egg's subsidiary Colorful Palette. It is commonly referred to as "プロセカ，" "PRSK," or "PJSK (Beer BBQ)."
Introduction#
The Beer BBQ national server launched on March 27 this year! Recently, I came across many interesting business card designs on Bilibili, so I’ll share a few screenshots for everyone to see~
::: gallery
:::
For more images, you can search for related content on Bilibili. Here, I want to see what PJSK's business card personalization has done to allow players' individuality to develop so much.
PJSK's Business Card Customization Feature#
Since I haven't played the national server, the image text is from the international server.
Basic Personal Information#
On the personal information settings page, there is a distinction between basic personal information (Profile) and custom personal information (Custom Profile).
The basic personal information contains some preset content, and you can just click around to get a nice personal profile page for display, suitable for users who do not want to engage in special design. The developers must consider players who do not like UGC creation and provide corresponding convenience.
::: gallery
:::
Custom Personal Information#
In the customization section, the freedom is much greater; it is essentially a blank slate for players to create freely, with a maximum of 150 content blocks allowed.
PJSK has categorized the content blocks as follows:
Personal Information#
This type of block content has preset styles and cannot be resized; it can only be rotated, and only one of the same type can be placed.
Background#
The background is relatively simple, divided into general scenes and story scenes. Story scenes are those that have appeared in the plot, while general scenes are some background content preset by the developers. They can be resized and rotated, but only one of the same background can be placed.
Members#
Members can choose the card face of existing cards (horizontal or vertical), and can control whether to display the card's star rating, group, level, etc. Only one of the same card can be placed.
Additionally, full-body illustrations can be selected (it should be possible to place them without owning, but only one of the same character can be placed).
All this content can be resized and rotated.
::: gallery
:::
Titles#
Titles are divided into four categories (Character, Bond, Achievement, Event), and multiple of the same type can be placed (great for dedicated fans). You can choose between a large title and a small title, and for bond types, you can also choose the style border corresponding to the title name and bond level.
All this content can be resized and rotated.
::: gallery
:::
Text#
The official has already provided a lot of controllable content for text, such as text wrapping (counts as one block), changing fonts (preset in-game), text size, stroke thickness, line spacing, left-center-right alignment, text color (preset color blocks), and stroke color (preset color blocks).
All this content can be resized and rotated.
In addition to the official features, we can also use some text codes to achieve many special effects (there may be risks of account bans, reviews, etc.).
The basic format for text codes is similar to HTML, requiring angle brackets to wrap, and a slash to close at the end <attribute name></attribute>. Multiple effects can be layered within a single text segment.
Here are some examples of the content used in the images:
<b>Bold
<i>Italic
<size=18> Size
<color=#7d6608>Color
<line-indent=98%> This is an indent, but in PJSK, it can create a dynamic moving effect each time the text is opened; negative values create a shaking effect.
<alpha=#88>Opacity (#AA~#00)
<rotate=45>Rotation Enter the angle of rotation
<cspace=20>Letter spacing can be negative
<scale=2>Font size can be negative
<mark=#color code>Highlight, needs to have opacity; otherwise, it will be fully filled.
<sup>Subscript
<sub>Superscript
<sprite=1~15> Yellow bean emoji
Shapes#
Some usable shapes are built-in, and shapes can have fill colors (preset colors), stroke colors (preset colors), shape opacity, stroke opacity, and stroke thickness adjusted.
All this content can be resized and rotated (the resizing is not completely proportional; you can control the aspect ratio).
If you need some special shapes, you can consider using the text size tag to enlarge some special characters like ♦♣.
::: gallery
:::
Emojis#
Emojis can also be placed in the business card.
All this content can be resized and rotated.
Others#
Finally, there are some other types of content, such as group names and game names.
All this content can be resized and rotated.
Collection#
This type of content has always been empty for me, so I don't know what it is. If anyone knows, please let me know~
Some Operations#
In addition to the operations mentioned above, the official also includes operation aids, as well as layer display/hide, up and down adjustments, and locking features.
Operation aids can snap to the corresponding angle or align horizontally or vertically with other blocks, which can help make block content more organized.
How to Promote UGC#
Setting aside incentives for UGC creators, as developers, what we can do is provide better creation tools and lower the barriers to use, allowing more players and creators to join and continuously stimulate creative desire.
A significant factor in users' willingness to create is whether the creation tools provided by developers are simple to use and powerful.
Simplifying the creation process for creators and allowing ideas to be quickly realized is a design goal we must consider when creating UGC tools.
PJSK's business card design is just a very simple UGC tool, unlike games like Eggy that require providing events, actions, conditions, and a series of programming visualizations. However, it still offers many block types to enrich the fillable content of the business card.
If we were to optimize further, one area would be in operations, and another could be to provide component functionality (blocks made up of self-assembled modules), which could also promote the sharing and dissemination of components, further enhancing the social attributes. I won't elaborate on that here.
Conclusion#
Overall, the many types built into the official system can already meet most UGC design content, raising the lower limit of UGC. Some special text codes also raise the upper limit of UGC.
Moreover, it provides many relatively portable auxiliary operations, which is a system-level promotion of UGC.
As designers, we must raise the overall lower limit of UGC to allow for more possibilities in UGC content.
The modules listed above can serve as a reference.
This article is synchronized and updated to xLog by Mix Space.
The original link is https://blog.lolita.best/posts/GameDesign/PJSK-UGC-card-design