I'm having some issues with image rendering on Android. I can see the game correctly in my Desktop build and also in the Android Emulator but when it comes to a real Android device nothing is painted.
Objects are there because if I click on the button I can't see the action is performed, I can hear sounds and see BitmapFonts painted correctly.
The problem happens with images painted as textures with spritebatcher or Actors (Image for instance).
Any ideas? Thanks in advance.
In Assets Class:
public static void texturePacker(){
if(S.DEBUG){
Settings settings = new Settings();
settings.maxWidth = 16384;
settings.maxHeight = 16384;
settings.jpegQuality = (float) 0.7;
TexturePacker2.process(settings, "imgs/res", "imgs/packs","pack");
}
}
public static void loadGameAssets() {
//Cargo todas las texturas del menu
enemy_punch_static=atlas.findRegion("punch_static");
enemy_punch_punyo1=atlas.findRegion("punch_punyo1");
...
}
In a Screen implementing class:
...
Image countdown_go=new Image(Assets.countdown_go);
stage.addActor(countdown_go);
...
#Override
public void render(float delta) {
super.render();
Gdx.gl.glClear(Gdx.gl.GL_COLOR_BUFFER_BIT | Gdx.gl.GL_DEPTH_BUFFER_BIT);
Gdx.gl.glClearColor(0.18431f,0.647058f,0.878431f, 1);
stage.act(delta);
stage.draw();
}
You can't use 16kx16k textures on devices. You can query GL_MAX_TEXTURE on all the devices you want to support to see if you can get away with something like 2048x2048 but you might want to switch to 1024x1024 to play it safe.
Related
I have a 3d-object (cube), which I want to use as a button. I've written the code in order to detect, if the cube was pressed but it doesn't look like it was pressed, since it lacks the "clicking animation". How can I create a clicking animation on my 3d-object ?
A good idea is to play an aninimation which skrinks the cube a bit and releases it immediately afterwards. The handler code you want to execute on a click might block the game loop, e.g. when you load a level. Then it might be useful to load the level aysnchronously to be able to see the animation. Or you execute the handler code after the animation. Or you play the scale down animation on the press event and the scale up animation on the release event.
Technically you can use the build in animation editor, the Update() method, start a coroutine or use the assets iTween or HOTween.
http://docs.unity3d.com/ScriptReference/Transform-localScale.html
Let me know if you like the idea or questions arise.
Unity makes it easier now to do this using Unity Canvas UI. Instead of real 3d buttons, you could place a canvas UI in world space at the location where you want the buttons. Add a UI Panel to the canvas then add a UI Button.
Now, you have out of the box several clicking effects. The default it color tint, but you can choose sprite swap, or animation.
If you do want animation, when you select button animation it will create an animator for you. Click on your UI button Game Object in the scene hierarchy and open the animation window. You can choose Pressed animation from the drop down, and press RECORD button, then edit your buttons scale, say make it 0.75 for x,y,z. Now when you click on the button it will animate a cool scale down for you.
Sorry, I know that is a lot of information dumped! But you will find it pretty great once you start working with it in world space.
You can scale it down a tiny bit once click happen. For example:
void OnMouseDown() {
this.transform.localScale += new Vector3(0.05f, 0.05f, 0.05f);
}
Then after click scale it back to the original size.
Perhaps look into iTween (free on Unity Asset store).
Its very easy to use and you can produce some nice looking animations.
you can scale it when pressed or just change the color a little bit. On mouse up, rescale or recolor it.
void OnMouseDown()
{
transform.localScale -= new Vector3(0.05, 0.05 , 0);
//or
transform.GetComponent<SpriteRenderer>().color += new Color(40,40,40);
}
void OnMouseUp()
{
transform.localScale += new Vector3(0.05, 0.05 , 0);
//or
transform.GetComponent<SpriteRenderer>().color -= new Color(40,40,40);
}
You can implement your button using new Event system of unity. Here are the functions you can implement :
public class ExampleClass : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler
{
public void OnPointerEnter(PointerEventData eventData)
{
//it is the function when you hover your mouse to the object
//You can change the color of your object to make your users
//understand that it is not just a cube but also a clickable item
}
public void OnPointerExit(PointerEventData eventData)
{
//You can revert your color back to its original
}
public void OnPointerDown (PointerEventData eventData)
{
//You can play with local scale as suggested by other answers here
}
public void OnPointerUp (PointerEventData eventData)
{
// Revert back the changes you made at onPointerDown
}
public void OnPointerClick (PointerEventData eventData)
{
//Use here for operations when your button is clicked
}
}
HI all,
I wnt to develop an ImageViewer using qt. I m trying to resize big images by scaling them. My problem is , when i change the screen orientation some part of the image gets clipped and also if i open the image in landscape mode, by default the size of image remains small even when i change back to portrait mode. What am i Doin wrong?
Please help me out. Heres the code dat i hv written
ImageViewer::ImageViewer()
{
setAttribute(Qt::WA_DeleteOnClose);
QAction *back = new QAction(this);
back->setText(QString("Back"));
connect(back,SIGNAL(triggered()),this,SLOT(close()));
back->setSoftKeyRole(QAction::PositiveSoftKey);
addAction(back);
imageLabel = new QLabel();
imageLabel->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
imageLabel->setAlignment(/*Qt::AlignLeft|*/Qt::AlignCenter);
QWidget *widget = new QWidget;
layout=new QStackedLayout();
layout->addWidget(imageLabel);
widget->setLayout(layout);
setCentralWidget(widget);
}
void ImageViewer::showImage(QString filePath)
{
QImageReader reader;
reader.setFileName(filePath);
QSize imageSize = reader.size();
imageSize.scale(size(), Qt::KeepAspectRatio);
reader.setScaledSize(imageSize);
QImage image = reader.read();
imageLabel->setPixmap(QPixmap::fromImage(image));
imageLabel->adjustSize();
}
You should re-implement QLabel's resizeEvent or install event filter to it and handle QResizeEvent there
The content of showImage method should go to handler of a resize event.
Currently you are using size() of ImageViewer widget (which seems to be derived from QMainWindow), it's better to use imageLabel.size(); or the best QResizeEvent::size() as this will prevent a problem if you will change UI layout in future.
Using GWT, I am displaying an image on the web page and my goal is to allow the user to crop it. The user draws an imaginary boundary box by clicking on a specific part of the image, moving the mouse, and releasing it somewhere else. With the use of MouseDownHandler() and MouseUpHandler(), I am planning to record the start and end corners of the mouse cursor.
However, when I deploy my work on the web, there is this problem: When the user clicks on the image and tries to draw the imaginary bounding box, the web browser (Google Chrome in my case) detects it as a drag and drop operation.
Therefore, I cannot get my mouseDown() and mouseUp() functions to work. How can I avoid the browser to do a drag and drop operation?
The code:
public void onModuleLoad(){
RootPanel.get().add(img1);
img1.addMouseDownHandler(new MouseDownHandler() {
#Override
public void onMouseDown(MouseDownEvent event) {
startX = event.getX();
startY = event.getY();
}
});
img1.addMouseUpHandler(new MouseUpHandler() {
#Override
public void onMouseUp(MouseUpEvent event) {
endX = event.getX();
endY = event.getY();
img1.setVisibleRect(startX, startY, endX-startX, endY-startY);
}
});
}
Maybe you can use HTML5. I have found this earlier question here on Stack OverFlow that describes the same problem as you have. Also I found a code example on code.google.com
Hopefully this will lead you to an solution.
Is there a way to have a SWT buuton with both image and text in a view? I have tried embedding Swings in SWT and the view looks exactly as I want, but when there is an operation going on, this view doesnot load till it gets over. This makes my perspective look unstable. Please help.
What OS are you using? On Windows XP/Vista/Windows 7, GTK+ and OSX you can just set the text and the image. E.g.
public class ButtonView extends ViewPart
{
private Button m_button;
public void createPartControl(Composite parent)
{
m_button = new Button(parent, SWT.NONE);
m_button.setText("My Button");
m_button.setImage(JFaceResources.getImage(Dialog.DLG_IMG_MESSAGE_ERROR));
}
public void setFocus()
{
m_button.setFocus();
}
}
I am trying to design a Blackberry Application and I am wondering if there are any resources on how to create custom user interface elements, skin existing ones and what other possibilities are there?
I have developed a few iPhone applications with custom UI and stuff, so not sure what BB world offers in terms of UI development.
Any tips, suggestions or ideas would be great.
There are no skins in Blackberry, two ways I know to achive skin effect are
create own theme
create custom controls
Create BlackBerry Theme
removed dead Imageshack link - BlackBerry Theme Builder
What can you do with Theme Builder?
Some of its main features allow you
to:
Customize the BlackBerry application icons
Change the Home screen banner image and icon/indicator colors
Create your own buttons
Customize the look of dialog and pop up screens
Customize an idle screen
Customize the look of menus and lists
Customize the phone application screens
Customize fonts used on the BlackBerry device
How To Create Your Own Personal Blackberry Themes by BrileyKenney
bb dev journal - Just Theme It!
BlackBerry Themes & Animated Graphics
Bad news - theme is applied to whole device OS and each application
Althought created theme may be a standalone software design product, I don't think it's a great idea to create own theme for developed application.
Design Mockup
Programming gui may take some time and in case you want to resolve some questions in GUI planning without coding, you may want to draw GUI mockup.
You can use free BlackBerry UI Prototyping Visio Stencils - v1.0 from ArtfulBits.
removed dead Imageshack link
removed dead Imageshack link
Creating custom control
By creating custom control you can configure
control size
control shape
control background (color, image)
control font (size, style, color)
control border (size, style, color)
All of this for states
disabled
normal
focused
active (clicked)
In the end you can simply skinn your control by setting background image
Basics
devsushi.com: Blackberry JDE API - User Interface Field Reference will basically give the idea of existent blackberry ui controls, with codesnippets and screenshots.
SO: Add items to a ListField ( BlackBerry )
SO: Embedded HTML control for Blackberry?
SO: Blackberry - how to get datetime value from DateField?
SO: Styling a BlackBerry Application to Look Like an iPhone
Managers, layout
Even using standard controls, we need to layout and group the way we want, thus we need custom managers:
Thinking BlackBerry: BlackBerry UI - Creating a basic field manager
Thinking BlackBerry: Simple BlackBerry Grid Layout Manager
Thinking BlackBerry: Making a Custom Screen, Vertically Scrolling and more
SO: Scrolling problem in Blackberry application
SO: How to set a ScrollBar to the VerticalFieldManager in Blackberry?
Wireless: Create a custom layout manager for a screen
SO: Blackberry - get all child fields of control
SO: Cancel scrolling in Layout Manager
SO: Creating custom layouts in BlackBerry
SO: Blackberry setting the position of a RichtextField in FullScreen
SO: Fun with Field Managers
SO: BlackBerry - Custom menu toolbar
SO: BlackBerry - Custom centered cyclic HorizontalFieldManager
Custom controls
Set of articles about writing custom controls:
Thinking BlackBerry: BlackBerry UI - A simple custom field
Coderholic: Blackberry Custom Button Field
Wireless: Create your own VirtualKeyboard for BBStorm
Wireless: ListField with check boxes
CodeProject: Creating a XY Chart/Plot as a BlackBerry Custom Field
SO: Blackberry - Custom size EditField
SO: Blackberry - How to add border to BasicEditField?
SO: Blackberry - Setting LabelField background color
SO: Blackberry change color of child fields on horizontal manager focus
SO: Setting background and font colors for RichTextField, TextField
SO: Blackberry Java: TextField without the caret?
SO: Image Map-like Blackberry Control - CLDC Application
SO: Blackberry - single line BasicEditField with large text
SO: Blackberry - custom BubbleChartField
SO: Blackberry - get checked items from list with checkboxes
SO: BlackBerry - Creating custom Date Field
SO: BlackBerry - How to create sub menu?
SO: BlackBerry - How can i show a Label with emoticons??
SO: BlackBerry - Show typing mode indicator programmatically
Graphics, animation
SO: BlackBerry - draw image on the screen
SO: Blackberry - background image/animation RIM OS 4.5.0
SO: Blackberry - Loading screen with animation
SO: How to set Anti Aliasing in Blackberry Storm?
SO: Blackberry setting a clipping region/area
SO: Is it better to use Bitmap or EncodedImage in BlackBerry?
SO: Blackberry - fields layout animation
Fonts
Wireless: Change fonts in a BlackBerry application
Developer Journals: Fonts
SO: How do I create a custom font for a blackberry application
SO: How to set a font to LabelField text in Blackberry?
SO: How to make Blackberry UI more attractive?
SO: How to change the font color of blackberry label field dynamically?
SO: BlackBerry - Unicode text display
Example of standard Media application skin on Bold 9000
removed dead ImageShack link - sliced Media application
removed dead ImageShack link - Sliced images
Use extention of ButtonField to map images with buttons:
class BitmapButtonField extends ButtonField {
Bitmap mNormal;
Bitmap mFocused;
Bitmap mActive;
int mWidth;
int mHeight;
public BitmapButtonField(Bitmap normal, Bitmap focused,
Bitmap active) {
super(CONSUME_CLICK);
mNormal = normal;
mFocused = focused;
mActive = active;
mWidth = mNormal.getWidth();
mHeight = mNormal.getHeight();
setMargin(0, 0, 0, 0);
setPadding(0, 0, 0, 0);
setBorder(BorderFactory
.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
setBorder(VISUAL_STATE_ACTIVE, BorderFactory
.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
}
protected void paint(Graphics graphics) {
Bitmap bitmap = null;
switch (getVisualState()) {
case VISUAL_STATE_NORMAL:
bitmap = mNormal;
break;
case VISUAL_STATE_FOCUS:
bitmap = mFocused;
break;
case VISUAL_STATE_ACTIVE:
bitmap = mActive;
break;
default:
bitmap = mNormal;
}
graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
bitmap, 0, 0);
}
public int getPreferredWidth() {
return mWidth;
}
public int getPreferredHeight() {
return mHeight;
}
protected void layout(int width, int height) {
setExtent(mWidth, mHeight);
}
}
put HorizontalFieldManagers inside VerticalFieldManagers and vice versa
use different images for normal, focused and active states
if you need a custom shaped buttons, you can draw them over in manager paint() method override, after super.paint()
Rest part of code:
class Scr extends MainScreen implements FieldChangeListener {
Bitmap mBmpHeader = Bitmap.getBitmapResource("header.png");
Bitmap mBmpCover = Bitmap.getBitmapResource("cover.png");
Bitmap mBmpTitle = Bitmap.getBitmapResource("title.png");
Bitmap mBmpTimeline = Bitmap.getBitmapResource("timeline.png");
Bitmap mBmpLeftside = Bitmap.getBitmapResource("leftside.png");
Bitmap mBmpPrevNrm = Bitmap.getBitmapResource("btn_prev_normal.png");
Bitmap mBmpPlayNrm = Bitmap.getBitmapResource("btn_play_normal.png");
Bitmap mBmpPauseNrm = Bitmap.getBitmapResource("btn_pause_normal.png");
Bitmap mBmpStopNrm = Bitmap.getBitmapResource("btn_stop_normal.png");
Bitmap mBmpNextNrm = Bitmap.getBitmapResource("btn_next_normal.png");
Bitmap mBmpPrevFcs = Bitmap.getBitmapResource("btn_prev_focused.png");
Bitmap mBmpPlayFcs = Bitmap.getBitmapResource("btn_play_focused.png");
Bitmap mBmpPauseFcs = Bitmap.getBitmapResource("btn_pause_focused.png");
Bitmap mBmpStopFcs = Bitmap.getBitmapResource("btn_stop_focused.png");
Bitmap mBmpNextFcs = Bitmap.getBitmapResource("btn_next_focused.png");
Bitmap mBmpRightside = Bitmap.getBitmapResource("rightside.png");
VerticalFieldManager mMainManager;
HorizontalFieldManager mHeaderManager;
HorizontalFieldManager mCoverManager;
HorizontalFieldManager mTitleManager;
HorizontalFieldManager mTimelineManager;
HorizontalFieldManager mToolbarManager;
BitmapField mHeader;
BitmapField mCover;
BitmapField mTitle;
BitmapField mTimeline;
BitmapField mLeftside;
BitmapField mRightside;
BitmapButtonField mBtnPrev;
BitmapButtonField mBtnPlay;
BitmapButtonField mBtnPause;
BitmapButtonField mBtnStop;
BitmapButtonField mBtnNext;
public Scr() {
add(mMainManager = new VerticalFieldManager());
addHeader();
addCover();
addTitle();
addTimeline();
addToolbar();
}
private void addHeader() {
mMainManager.add(mHeaderManager = new HorizontalFieldManager());
mHeaderManager.add(mHeader = new BitmapField(mBmpHeader));
}
private void addCover() {
mMainManager.add(mCoverManager = new HorizontalFieldManager());
mCoverManager.add(mCover = new BitmapField(mBmpCover));
}
private void addTitle() {
mMainManager.add(mTitleManager = new HorizontalFieldManager());
mTitleManager.add(mTitle = new BitmapField(mBmpTitle));
}
private void addTimeline() {
mMainManager.add(mTimelineManager = new HorizontalFieldManager());
mTimelineManager.add(mTimeline = new BitmapField(mBmpTimeline));
}
private void addToolbar() {
mMainManager.add(mToolbarManager = new HorizontalFieldManager());
mToolbarManager.add(mLeftside = new BitmapField(mBmpLeftside));
mToolbarManager.add(mBtnPrev = new BitmapButtonField(mBmpPrevNrm,
mBmpPrevFcs, mBmpPrevFcs));
mToolbarManager.add(mBtnPlay = new BitmapButtonField(mBmpPlayNrm,
mBmpPlayFcs, mBmpPlayFcs));
mBtnPlay.setChangeListener(this);
mBtnPause = new BitmapButtonField(mBmpPauseNrm, mBmpPauseFcs,
mBmpPauseFcs);
mBtnPause.setChangeListener(this);
mToolbarManager.add(mBtnStop = new BitmapButtonField(mBmpStopNrm,
mBmpStopFcs, mBmpStopFcs));
mToolbarManager.add(mBtnNext = new BitmapButtonField(mBmpNextNrm,
mBmpNextFcs, mBmpNextFcs));
mToolbarManager.add(mRightside = new BitmapField(mBmpRightside));
}
public void fieldChanged(Field field, int context) {
if (mBtnPlay == field)
play();
else if (mBtnPause == field)
pause();
}
private void pause() {
mToolbarManager.replace(mBtnPause, mBtnPlay);
}
private void play() {
mToolbarManager.replace(mBtnPlay, mBtnPause);
}
}
The resources aren't very good unfortunately. The best source of information is usually Google linking to blogs with the specific topic you're looking for.
If you're just beginning to write BB GUI code, I would highly recommend getting to know the Manager and Field classes since you'll probably have to write many custom extensions of them.