Related
I am using Google mobile vision text API for reading a text using the APIs provided.
My use cases :
Initially i am drawing a re-sizable rectangle to the surface of view.
Restrict the text that recognize by the google apis only with in the rectangle.
public class GraphicOverlay<T extends GraphicOverlay.Graphic> extends View
{
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
synchronized (mLock)
{
if ((mPreviewWidth != 0) && (mPreviewHeight != 0))
{
mWidthScaleFactor = (float) canvas.getWidth() / (float) mPreviewWidth;
mHeightScaleFactor = (float) canvas.getHeight() / (float) mPreviewHeight;
}
for (Graphic graphic : mGraphics)
{
graphic.draw(canvas);
}
paint.setColor(Color.parseColor("#55000000"));
paint.setStyle(Paint.Style.FILL);
paint.setStrokeJoin(Paint.Join.ROUND);
// mPaint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(5);
canvas.drawPaint(paint);
paint.setColor(Color.parseColor("#55FFFFFF"));
if (groupId == 1) {
mCurrentRect= new Rect(point2.x+colorballs.get(1).getWidthOfBall() / 2,
point4.y +colorballs.get(1).getWidthOfBall() / 2,
point4.x+colorballs.get(1).getWidthOfBall() / 2,
point2.y+colorballs.get(1).getWidthOfBall() / 2);
canvas.drawRect(mCurrentRect, paint);
} else {
mCurrentRect= new Rect(point2.x + colorballs.get(1).getWidthOfBall() / 2,
point4.y + colorballs.get(3).getWidthOfBall() / 2, point4.x
+ colorballs.get(3).getWidthOfBall() / 2, point2.y
+ colorballs.get(1).getWidthOfBall() / 2);
canvas.drawRect(mCurrentRect, paint);
}
BitmapDrawable mBitmap;
mBitmap = new BitmapDrawable();
// draw the balls on the canvas`enter code here`
for (ColorBall ball : colorballs) {
canvas.drawBitmap(ball.getBitmap(), ball.getX(), ball.getY(),
new Paint());
}
}
}
}
class CustomTextRecognizer extends Detector<TextBlock> {
private Detector<TextBlock> mDelegate;
private GraphicOverlay<OcrGraphic> mOcrGraphicOverlay;
CustomTextRecognizer(Detector<TextBlock> delegate, GraphicOverlay<OcrGraphic> ocrGraphicOverlay) {
mDelegate = delegate;
mOcrGraphicOverlay= ocrGraphicOverlay;
}
#Override
public void receiveFrame(Frame frame) {
Bitmap bt= frame.getBitmap();
super.receiveFrame(frame);
}
public SparseArray<TextBlock> detect(Frame frame) {
//How to compare the items that is inside my rectangle.
}
}
/*
* This method will call before each block detection and resolves only with valid detection that
* scanned with in the rectangle provided.
*/
public SparseArray<TextBlock> detect(Frame frame) {
SparseArray<TextBlock> validDetections = new SparseArray<TextBlock>();
Rect overlayRectangle = mOcrGraphicOverlay.getCurrentRectangle();
SparseArray<TextBlock> detectedItems = mDelegate.detect(frame);
for (int index = 0; index < detectedItems.size(); ++index) {
TextBlock detectedBlock = detectedItems.valueAt(index);
Rect boundingBox = detectedBlock.getBoundingBox();
// mOcrGraphicOverlay.getColorball(4).setX(overlayRectangle.left);
// mOcrGraphicOverlay.getColorball(4).setY(overlayRectangle.top);
/* if(((overlayRectangle.top <boundingBox.top) &&
(overlayRectangle.top+overlayRectangle.height())> (boundingBox.top +boundingBox.height())) &&
((overlayRectangle.left <boundingBox.left) &&
(overlayRectangle.left+overlayRectangle.width())> (boundingBox.left +boundingBox.width())))*/
mOcrGraphicOverlay.getColorball(4).setX(boundingBox.left);
mOcrGraphicOverlay.getColorball(4).setY(boundingBox.top);
if ((overlayRectangle.top < boundingBox.top) &&
(overlayRectangle.top + overlayRectangle.height()) > (boundingBox.top + boundingBox.height())) {
validDetections.put(index, detectedBlock);
}
}
return validDetections;
}
Found one solution.
Its been a week I was trying to create a watch Face for Android wear. As a kick start I followed Google official documentation and found these Android official watch face app tutorial with source code
So my current issue is , In Google documentation they use canvas to create analogue watch faces . The watch hands are generated using paint
Here is the sample of code for creating dial hand
public class AnalogWatchFaceService extends CanvasWatchFaceService {
private static final String TAG = "AnalogWatchFaceService";
/**
* Update rate in milliseconds for interactive mode. We update once a second to advance the
* second hand.
*/
private static final long INTERACTIVE_UPDATE_RATE_MS = TimeUnit.SECONDS.toMillis(1);
#Override
public Engine onCreateEngine() {
return new Engine();
}
private class Engine extends CanvasWatchFaceService.Engine {
static final int MSG_UPDATE_TIME = 0;
static final float TWO_PI = (float) Math.PI * 2f;
Paint mHourPaint;
Paint mMinutePaint;
Paint mSecondPaint;
Paint mTickPaint;
boolean mMute;
Calendar mCalendar;
/** Handler to update the time once a second in interactive mode. */
final Handler mUpdateTimeHandler = new Handler() {
#Override
public void handleMessage(Message message) {
switch (message.what) {
case MSG_UPDATE_TIME:
if (Log.isLoggable(TAG, Log.VERBOSE)) {
Log.v(TAG, "updating time");
}
invalidate();
if (shouldTimerBeRunning()) {
long timeMs = System.currentTimeMillis();
long delayMs = INTERACTIVE_UPDATE_RATE_MS
- (timeMs % INTERACTIVE_UPDATE_RATE_MS);
mUpdateTimeHandler.sendEmptyMessageDelayed(MSG_UPDATE_TIME, delayMs);
}
break;
}
}
};
final BroadcastReceiver mTimeZoneReceiver = new BroadcastReceiver() {
#Override
public void onReceive(Context context, Intent intent) {
mCalendar.setTimeZone(TimeZone.getDefault());
invalidate();
}
};
boolean mRegisteredTimeZoneReceiver = false;
/**
* Whether the display supports fewer bits for each color in ambient mode. When true, we
* disable anti-aliasing in ambient mode.
*/
boolean mLowBitAmbient;
Bitmap mBackgroundBitmap;
Bitmap mBackgroundScaledBitmap;
#Override
public void onCreate(SurfaceHolder holder) {
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onCreate");
}
super.onCreate(holder);
setWatchFaceStyle(new WatchFaceStyle.Builder(AnalogWatchFaceService.this)
.setCardPeekMode(WatchFaceStyle.PEEK_MODE_SHORT)
.setBackgroundVisibility(WatchFaceStyle.BACKGROUND_VISIBILITY_INTERRUPTIVE)
.setShowSystemUiTime(false)
.build());
Resources resources = AnalogWatchFaceService.this.getResources();
Drawable backgroundDrawable = resources.getDrawable(R.drawable.bg, null /* theme */);
mBackgroundBitmap = ((BitmapDrawable) backgroundDrawable).getBitmap();
mHourPaint = new Paint();
mHourPaint.setARGB(255, 200, 200, 200);
mHourPaint.setStrokeWidth(5.f);
mHourPaint.setAntiAlias(true);
mHourPaint.setStrokeCap(Paint.Cap.ROUND);
mMinutePaint = new Paint();
mMinutePaint.setARGB(255, 200, 200, 200);
mMinutePaint.setStrokeWidth(3.f);
mMinutePaint.setAntiAlias(true);
mMinutePaint.setStrokeCap(Paint.Cap.ROUND);
mSecondPaint = new Paint();
mSecondPaint.setARGB(255, 255, 0, 0);
mSecondPaint.setStrokeWidth(2.f);
mSecondPaint.setAntiAlias(true);
mSecondPaint.setStrokeCap(Paint.Cap.ROUND);
mTickPaint = new Paint();
mTickPaint.setARGB(100, 255, 255, 255);
mTickPaint.setStrokeWidth(2.f);
mTickPaint.setAntiAlias(true);
mCalendar = Calendar.getInstance();
}
#Override
public void onDestroy() {
mUpdateTimeHandler.removeMessages(MSG_UPDATE_TIME);
super.onDestroy();
}
#Override
public void onPropertiesChanged(Bundle properties) {
super.onPropertiesChanged(properties);
mLowBitAmbient = properties.getBoolean(PROPERTY_LOW_BIT_AMBIENT, false);
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onPropertiesChanged: low-bit ambient = " + mLowBitAmbient);
}
}
#Override
public void onTimeTick() {
super.onTimeTick();
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onTimeTick: ambient = " + isInAmbientMode());
}
invalidate();
}
#Override
public void onAmbientModeChanged(boolean inAmbientMode) {
super.onAmbientModeChanged(inAmbientMode);
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onAmbientModeChanged: " + inAmbientMode);
}
if (mLowBitAmbient) {
boolean antiAlias = !inAmbientMode;
mHourPaint.setAntiAlias(antiAlias);
mMinutePaint.setAntiAlias(antiAlias);
mSecondPaint.setAntiAlias(antiAlias);
mTickPaint.setAntiAlias(antiAlias);
}
invalidate();
// Whether the timer should be running depends on whether we're in ambient mode (as well
// as whether we're visible), so we may need to start or stop the timer.
updateTimer();
}
#Override
public void onInterruptionFilterChanged(int interruptionFilter) {
super.onInterruptionFilterChanged(interruptionFilter);
boolean inMuteMode = (interruptionFilter == WatchFaceService.INTERRUPTION_FILTER_NONE);
if (mMute != inMuteMode) {
mMute = inMuteMode;
mHourPaint.setAlpha(inMuteMode ? 100 : 255);
mMinutePaint.setAlpha(inMuteMode ? 100 : 255);
mSecondPaint.setAlpha(inMuteMode ? 80 : 255);
invalidate();
}
}
#Override
public void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height) {
if (mBackgroundScaledBitmap == null
|| mBackgroundScaledBitmap.getWidth() != width
|| mBackgroundScaledBitmap.getHeight() != height) {
mBackgroundScaledBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap,
width, height, true /* filter */);
}
super.onSurfaceChanged(holder, format, width, height);
}
#Override
public void onDraw(Canvas canvas, Rect bounds) {
mCalendar.setTimeInMillis(System.currentTimeMillis());
int width = bounds.width();
int height = bounds.height();
// Draw the background, scaled to fit.
canvas.drawBitmap(mBackgroundScaledBitmap, 0, 0, null);
// Find the center. Ignore the window insets so that, on round watches with a
// "chin", the watch face is centered on the entire screen, not just the usable
// portion.
float centerX = width / 2f;
float centerY = height / 2f;
// Draw the ticks.
float innerTickRadius = centerX - 10;
float outerTickRadius = centerX;
for (int tickIndex = 0; tickIndex < 12; tickIndex++) {
float tickRot = tickIndex * TWO_PI / 12;
float innerX = (float) Math.sin(tickRot) * innerTickRadius;
float innerY = (float) -Math.cos(tickRot) * innerTickRadius;
float outerX = (float) Math.sin(tickRot) * outerTickRadius;
float outerY = (float) -Math.cos(tickRot) * outerTickRadius;
canvas.drawLine(centerX + innerX, centerY + innerY,
centerX + outerX, centerY + outerY, mTickPaint);
}
float seconds =
mCalendar.get(Calendar.SECOND) + mCalendar.get(Calendar.MILLISECOND) / 1000f;
float secRot = seconds / 60f * TWO_PI;
float minutes = mCalendar.get(Calendar.MINUTE) + seconds / 60f;
float minRot = minutes / 60f * TWO_PI;
float hours = mCalendar.get(Calendar.HOUR) + minutes / 60f;
float hrRot = hours / 12f * TWO_PI;
float secLength = centerX - 20;
float minLength = centerX - 40;
float hrLength = centerX - 80;
if (!isInAmbientMode()) {
float secX = (float) Math.sin(secRot) * secLength;
float secY = (float) -Math.cos(secRot) * secLength;
canvas.drawLine(centerX, centerY, centerX + secX, centerY + secY, mSecondPaint);
}
float minX = (float) Math.sin(minRot) * minLength;
float minY = (float) -Math.cos(minRot) * minLength;
canvas.drawLine(centerX, centerY, centerX + minX, centerY + minY, mMinutePaint);
float hrX = (float) Math.sin(hrRot) * hrLength;
float hrY = (float) -Math.cos(hrRot) * hrLength;
canvas.drawLine(centerX, centerY, centerX + hrX, centerY + hrY, mHourPaint);
}
}
The entire code can be found inside the official sample app . Below you can find the screen shot of application which I made using Google official tutorial .
If anyone have any idea how to replace the clock hands with an drawable images ? . Any help would be appreciated .
Create a Bitmap of your drawable resource:
Bitmap hourHand = BitmapFactory.decodeResource(context.getResources(), R.drawable.hour_hand);
Do whatever transformations you need to your canvas and draw the bitmap:
canvas.save();
canvas.rotate(degrees, px, py);
canvas.translate(dx, dy);
canvas.drawBitmap(hourHand, centerX, centerY, null); // Or use a Paint if you need it
canvas.restore();
Use following method to rotate bitmap from canvas,
/**
* To rotate bitmap on canvas
*
* #param canvas : canvas on which you are drawing
* #param handBitmap : bitmap of hand
* #param centerPoint : center for rotation
* #param rotation : rotation angle in form of seconds
* #param offset : offset of bitmap from center point (If not needed then keep it 0)
*/
public void rotateBitmap(Canvas canvas, Bitmap handBitmap, PointF centerPoint, float rotation, float offset) {
canvas.save();
canvas.rotate(secondRotation - 90, centerPoint.x, centerPoint.y);
canvas.drawBitmap(handBitmap, centerPoint.x - offset, centerPoint.y - handBitmap.getHeight() / Constants.INTEGER_TWO, new Paint(Paint.FILTER_BITMAP_FLAG));
canvas.restore();
}
I am a little bit late with the answer, but maybe it can be helpful for others
canvas.save()
val antialias = Paint()
antialias.isAntiAlias = true
antialias.isFilterBitmap = true
antialias.isDither = true
canvas.rotate(secondsRotation - minutesRotation, centerX, centerY)
canvas.drawBitmap(
secondsHandBitmap,
centerX - 10,
centerY - 160,
antialias
)
canvas.restore()
Here is my public Git Repo you can check the source code
i am new to android apps ,
i just start to write a simple game.
I used a Class extends View and using some thread to make a simple game
i wanna ask if i go wrong direction ? should i use other way to do it?
I think i am wrong on using thread in here right??
I just use
Game gameview;
gameview= new Game(this);
setContentView(gameview);
to call this in class which extends activity
public class Game extends View {
Bitmap background;
Bitmap nomouthbear;
Bitmap nomouthbearget;
Bitmap apple;
float bearX;
float bearY;
List<Apple> appleList;
int appleCount = 0;
float appleX;
float appleY;
float applescore;
float applespeed;
int totalscore = 0;
float canvasheight;
float canvaswidth;
float randomNumber;// random number for apple appear in X
float randomNumber2;// random number for score and speed
float randomNumber3;
int applecombo = 0; // count for how many apple that the bear eat in combo
boolean checkbeareat; // for check if bear eat any of apple or not.
boolean bearEating = false;
Thread thread2;
boolean ineatingthread = false;
int time = 20; // game time =60sec
public Game(Context context) {
super(context);
// setup image source
nomouthbear = BitmapFactory.decodeResource(getResources(),
R.drawable.nomouthbear_net);
apple = BitmapFactory.decodeResource(getResources(), R.drawable.apple);
nomouthbearget = BitmapFactory.decodeResource(getResources(),
R.drawable.nomouthbearget);
background = BitmapFactory.decodeResource(getResources(),
R.drawable.background);
// init bear x,y
bearX=0;
bearY =0;
// setup background
if (background != null) {
setBackgroundDrawable(new BitmapDrawable(background));
}
// open a list which hold all apple
appleList = new ArrayList<Apple>();
// make a thread to creat apple every 2 sec
Thread thread = new Thread() {
#Override
public void run() {
try {
while (true) {
sleep(2000);
randomNumber = (float) Math.random();
randomNumber2 = (float) Math.random();
// avoid start at edge point
appleX = canvaswidth * randomNumber;
if (appleX >= canvaswidth - apple.getWidth() / 2)
appleX = canvaswidth - apple.getWidth() / 2;
if (appleX <= nomouthbear.getWidth() / 2)
appleX = nomouthbear.getWidth();
applescore = 1000 * randomNumber2;
// check if speed too low
applespeed = 10 * randomNumber2;
if (applespeed <= 3) {
applespeed = 3;
}
// add new apple in the apple list
appleList.add(new Apple(appleX, 65, applescore,
applespeed));
appleCount++;
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
};
// start the thread
thread.start();
// thread for timer
Thread thread1 = new Thread() {
#Override
public void run() {
try {
while (true)
{
sleep(1000);
if(time>=0)
time--;
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
};
thread1.start();
//thread for controlling the bear eat pic appear time
Thread thread2 = new Thread() {
#Override
public void run() {
try {
while (true)
{
if (bearEating == true) {
sleep(200);
bearEating = false;
}
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
};
thread2.start();
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
if (time <= 0) {
Paint textPaint = new Paint();
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Align.LEFT);
textPaint.setTextSize(65);
canvas.drawText(
"Game Over!",
canvas.getWidth() / 4, canvas.getHeight() / 2, textPaint);
canvas.drawText(
"Your Score is ",
canvas.getWidth() / 4, canvas.getHeight() / 2+65, textPaint);
canvas.drawText(
Integer.toString(totalscore),
canvas.getWidth() / 4, canvas.getHeight() / 2+130, textPaint);
} else {
checkbeareat = false;
canvasheight = canvas.getHeight();
canvaswidth = canvas.getWidth();
// draw score text
Paint textPaint = new Paint();
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Align.LEFT);
textPaint.setTextSize(65);
canvas.drawText("Score: " + Integer.toString(totalscore), 50, 50,
textPaint);
canvas.drawText("Time left: " + Integer.toString(time), 50, 120,
textPaint);
// if have apple
if (appleCount != 0) {
for (int i = 0; i < appleCount; i++) {
if (appleList.get(i).checkstate()) {
// make every apple fall down
if ((appleList.get(i).getAppleY() + apple.getHeight() / 2) <= canvas
.getHeight()) {
appleList.get(i).setAppleY(
appleList.get(i).getAppleY()
+ appleList.get(i).getspeed());
} else {
// appleList.get(i).setAppleY(appleList.get(i).getAppleY());
applecombo = 0;
appleList.get(i).destoryApple();
}
// check if bear eat the apple
if (bearX + nomouthbear.getWidth() / 2 >= appleList
.get(i).getAppleX()
&& bearX <= appleList.get(i).getAppleX()
&& bearY>= appleList
.get(i).getAppleY()
&& bearY-nomouthbear.getHeight()/2 <= appleList.get(i).getAppleY()) {
// add score
totalscore += appleList.get(i).getAppleScore();
// change the state of apple to false so wont draw
// it
// again
appleList.get(i).destoryApple();
// draw bear ate
canvas.drawBitmap(nomouthbearget, bearX
- nomouthbear.getWidth() / 2, bearY
- nomouthbear.getHeight(), null);
checkbeareat = true;
bearEating = true;
applecombo++;
}
// draw apple
if (appleList.get(i).checkstate()) {
canvas.drawBitmap(
apple,
appleList.get(i).getAppleX()
- (apple.getWidth() / 2),
appleList.get(i).getAppleY()
- (apple.getHeight() / 2), null);
}
}
}
}
// draw bear
// canvas.drawBitmap(nomouthbear, 0, 0, null);
if (bearEating == false) {
if (bearX == 0 && bearY == 0){
canvas.drawBitmap(nomouthbear, 0, canvas.getHeight()- nomouthbear.getHeight()*2, null);}
else{
canvas.drawBitmap(nomouthbear,
bearX - nomouthbear.getWidth() / 2, bearY
- nomouthbear.getHeight(), null);}
} else {
canvas.drawBitmap(nomouthbearget,
bearX - nomouthbear.getWidth() / 2,
bearY - nomouthbear.getHeight(), null);
}
invalidate();
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
if (event.getX() >= nomouthbear.getWidth() / 2
&& event.getX() <= canvaswidth - nomouthbear.getWidth() / 2) {
bearX = event.getX();
} else if (event.getX() >= canvaswidth - nomouthbear.getWidth() / 2)
bearX = canvaswidth - nomouthbear.getWidth() / 2;
else
bearX = nomouthbear.getWidth() / 2;
bearY = canvasheight - nomouthbear.getHeight();
return true;
}
}
You shouldn't be calling invalidate from onDraw -- invalidate is what causes onDraw to be called. If you want the view to update itself periodically then you should call invalidate at some interval from your thread (e.g. Thread1) by posting a runnable to the view.
In terms of multithreading your code is completely unsafe (i.e. it is unpredictable) -- there is no synchronization or even use of volatiles.
What you are doing is only okay for the simplest of games, because it handles both rendering and computation in the UI thread, making it laggy when things get a bit more complicated.
You should be using a GLSurfaceView, check out its documentation and read up on OpenGL in Android
If you really do not want to use OpenGL, consider the regular SurfaceView, but be aware that it is a bit of a hassle to set up and it can't perform as smoothly.
You can create simply game using View and onDraw but it is very slowly and very unprofesional. You cant create good game using it. To create game you should use openGL (GLSurfaceView).
I recomend you book: J. F. DiMarzio Practical Android 4 Games Development It's good book to learn using OpenGL on Android.
I doing animation with framework cocos2d android.I have series image same blow image, I want to crop a tivi in image use to cocos2d in android. Plz help me?
link image
public class MainActivity extends Activity {
private static final boolean DEBUG = true;
private CCGLSurfaceView mGLSurfaceView;
static Context context;
static Resources resources;
static AssetManager assetManager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
mGLSurfaceView = new CCGLSurfaceView(this);
setContentView(mGLSurfaceView);
assetManager = getAssets();
}
#Override
protected void onStart() {
super.onStart();
// attach the OpenGL view to a Window
Director.sharedDirector().attachInView(mGLSurfaceView);
// set landscape mode
// Director.sharedDirector().setLandscape(true);
// show FPS
Director.sharedDirector().setDisplayFPS(true);
// frames per second
Director.sharedDirector().setAnimationInterval(1.0f / 60);
Scene scene = Scene.node();
scene.addChild(nextAction());
// Make the scene active
Director.sharedDirector().runWithScene(scene);
}
static int sceneIdx = -1;
static Class transitions[] = { Animation1.class, };
static Layer nextAction() {
sceneIdx++;
sceneIdx = sceneIdx % transitions.length;
return restartAction();
}
static Layer restartAction() {
try {
Class c = transitions[sceneIdx];
return (Layer) c.newInstance();
} catch (Exception e) {
if (DEBUG)
e.printStackTrace();
return null;
}
}
#Override
protected void onPause() {
super.onPause();
Director.sharedDirector().pause();
}
#Override
protected void onResume() {
super.onResume();
Director.sharedDirector().resume();
}
#Override
protected void onDestroy() {
super.onDestroy();
TextureManager.sharedTextureManager().removeAllTextures();
}
static class Anima extends Layer {
Sprite tivi;
Sprite bg2;
InputStream is;
Resources resources;
AssetManager asset;
Bitmap bf, bitmap, bitmap2;
CCSize s = Director.sharedDirector().displaySize();
public Anima() {
Log.v("MP", "Width: " + s.width + " Height: " + s.height);
bg2 = Sprite.sprite("Scene02.png");
bg2.setScaleX(s.width / bg2.getTexture().getWidth());
bg2.setScaleY(s.height / bg2.getTexture().getHeight());
bg2.setPosition(s.width / 2, s.height / 2);
addChild(bg2, 1);
tivi = Sprite.sprite("TV0000.png");
tivi.setScaleX(s.width / bg2.getTexture().getWidth());
tivi.setScaleY(s.height / bg2.getTexture().getHeight());
//tivi.setPosition(0, 0);
tivi.setPosition(247 * s.width / bg2.getTexture().getWidth(), 480
* s.height / bg2.getTexture().getHeight());
addChild(tivi, 1);
}
protected void centerSprites() {
// tivi.setPosition(247 * s.width / bg2.getTexture().getWidth(), 480
// * s.height / bg2.getTexture().getHeight());
}
}
static class Animation1 extends Anima {
Animation tvAnimation;
IntervalAction tvAction;
CCSize s = Director.sharedDirector().displaySize();
boolean ck = true;
public Animation1() {
// centerSprites();
isTouchEnabled_ = true;
tvAnimation = initTVAnimation();
tvAction = Animate.action(tvAnimation);
}
private Animation initTVAnimation() {
Animation animation = new Animation("abc", 0.2f);
for (int i = 1; i < 40; i++) {
try {
is = assetManager.open(new CCFormatter().format(
"TV00%02d.png", i));
bf = BitmapFactory.decodeStream(is);
bitmap = Bitmap.createBitmap(bf, 0, 0, bf.getWidth(),
bf.getHeight());
bitmap2 = Bitmap
.createBitmap(bitmap, (int) (153 * (s.width / bg2
.getTexture().getWidth())),
(int) (261.5 * (s.height / bg2.getTexture()
.getHeight())),
(int) (87 * (s.width / bg2.getTexture()
.getWidth())),
(int) (97 * (s.height / bg2.getTexture()
.getHeight())));
animation.addFrame(bitmap2);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return animation;
}
#Override
public boolean ccTouchesBegan(MotionEvent event) {
CCSize s = Director.sharedDirector().displaySize();
CCPoint location = Director.sharedDirector().convertToGL(
event.getX(), event.getY());
if ((location.x >= 203.5 * s.width / bg2.getTexture().getWidth() && location.x <= 290
* s.width / bg2.getTexture().getWidth())
&& (location.y >= 433.5 * s.height
/ bg2.getTexture().getHeight() && location.y <= 526
* s.height / bg2.getTexture().getHeight())) {
if (tvAction.isDone() == true || ck == true) {
tivi.runAction(tvAction);
ck = false;
}
}
// addNew(location);
return TouchDispatcher.kEventHandled;
}
}
}
Animation animation = new Animation("abc", 0.2f);
for (int i = 1; i < 40; i++) {
try {
is = assetManager.open(new CCFormatter().format(
"TV00%02d.png", i));
bf = BitmapFactory.decodeStream(is);
bitmap = Bitmap.createBitmap(bf, 0, 0, bf.getWidth(),
bf.getHeight());
bitmap2 = Bitmap
.createBitmap(bitmap, (int) (153 * (s.width / bg2
.getTexture().getWidth())),
(int) (261.5 * (s.height / bg2.getTexture()
.getHeight())),
(int) (87 * (s.width / bg2.getTexture()
.getWidth())),
(int) (97 * (s.height / bg2.getTexture()
.getHeight())));
animation.addFrame(bitmap2);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return animation;
}
try to make simple of this code.... use the latest example series from the cocs2d-android 1 .. it have basic concept for handing the animation ..... you will get the answer from the example series
Hai i hope this will help you lot. I have used CCSprite. it scale to support all Screens with animation. scaling CCSprite in 480x800
public class MainMenuScreen extends CCColorLayer {
private CCSprite newGame1;
private CGSize size; // this is where we hold the size of current display
private float scaleX, scaleY;// these are the ratios that we need to compute
public static CCScene sence() {
CCScene ccScene = CCScene.node();
CCLayer layer = new MainMenuScreen(ccColor4B.ccc4(69, 3, 3, 255));
ccScene.addChild(layer);
return ccScene;
}
protected MainMenuScreen(ccColor4B color) {
super(color);
size = CCDirector.sharedDirector().winSize();
CCSprite backGround = CCSprite
.sprite(CandygrabberImage.MENU_BACKGROUND);
this.setIsTouchEnabled(true);
// backGround.setContentSize(winSize);
backGround.setTag(1);
backGround.setScale(.5f);
backGround.setPosition(CGPoint.ccp(size.width / 2.0f,
size.height / 2.0f));
backGround
.setScaleX(size.width / backGround.getTexture().getWidth());
backGround.setScaleY(size.height
/ backGround.getTexture().getHeight());
addChild(backGround);
scaleX = size.width / 480f;// assuming that all my assets are available
// for a 320X480(landscape) resolution;
scaleY = size.height / 800f;
newGame1 = CCSprite.sprite("newgame1.png");
CCAnimation buttonAnimation = CCAnimation.animation("", 1f);
buttonAnimation.addFrame("newgame1.png");
buttonAnimation.addFrame("newgame2.png");
buttonAnimation.addFrame("newgame3.png");
buttonAnimation.addFrame("newgame4.png");
buttonAnimation.addFrame("newgame5.png");
buttonAnimation.addFrame("newgame6.png");
buttonAnimation.addFrame("newgame7.png");
buttonAnimation.addFrame("newgame8.png");
CCIntervalAction buttonAction = CCAnimate.action(5, buttonAnimation,
false);
newGame1.runAction(CCRepeatForever.action(buttonAction));
newGame1.setScaleX(scaleX);
newGame1.setScaleY(scaleY);
newGame1.setScale(aspect_Scale(newGame1, scaleX, scaleY));
this.addChild(newGame1);
this.setIsTouchEnabled(true);
}
public float aspect_Scale(CCSprite sprite, float scaleX, float scaleY) {
float sourcewidth = sprite.getContentSize().width;
float sourceheight = sprite.getContentSize().height;
float targetwidth = sourcewidth * scaleX;
float targetheight = sourceheight * scaleY;
float scalex = (float) targetwidth / sourcewidth;
float scaley = (float) targetheight / sourceheight;
return Math.min(scalex, scaley);
}
}
I have window with 3 circles, they are rotating simultaneously. Everything is good until a Add text to the circles, then the rotation starts to lagging.
How can i optimize drawing on canvas ?
This is my code:
#Override
protected void onDraw(final Canvas canvas) {
if (mPaint == null) {
mPaint = new Paint();
mPaint.setTextSize(20f);
}
drawUpperCircle(canvas);
drawBottomCircle(canvas);
drawMainCircle(canvas);
try {
Thread.sleep(1, 1);
invalidate();
mRotation += 0.9;
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
super.onDraw(canvas);
}
private void drawUpperCircle(Canvas canvas) {
canvas.save();
canvas.rotate(mRotation, 0, mUpperCircleCentr);
mPaint.setColor(Color.CYAN);
canvas.drawCircle(0, mUpperCircleCentr, mUpperCirclRadius, mPaint);
mPaint.setColor(Color.BLACK);
for (int i = 0; i < SEG_COUNT; i++) {
canvas.rotate(SEG_IN_GRAD, 0, mUpperCircleCentr);
canvas.drawLine(0, mUpperCircleCentr, mUpperCirclRadius, mUpperCircleCentr, mPaint);
// canvas.drawText("my text" + String.valueOf(i), mUpperCirclRadius * 2 / 3, mUpperCircleCentr - 4, mPaint);
}
canvas.restore();
}
private void drawBottomCircle(Canvas canvas) {
canvas.save();
canvas.rotate(mRotation, 0, mBottomCircleCentr);
mPaint.setColor(Color.RED);
canvas.drawCircle(0, mBottomCircleCentr, mBottomCirclRadius, mPaint);
mPaint.setColor(Color.BLACK);
for (int i = 0; i < SEG_COUNT; i++) {
canvas.rotate(SEG_IN_GRAD, 0, mBottomCircleCentr);
canvas.drawLine(0, mBottomCircleCentr, mBottomCirclRadius, mBottomCircleCentr, mPaint);
// canvas.drawText("my text" + String.valueOf(i), mBottomCirclRadius * 2 / 3, mBottomCircleCentr - 4, mPaint);
}
canvas.restore();
}
private void drawMainCircle(Canvas canvas) {
canvas.save();
canvas.rotate(mRotation, 0, mMainCircleCentr);
mPaint.setColor(Color.argb(100, 100, 100, 100));
canvas.drawCircle(0, mMainCircleCentr, mMainCirclRadius, mPaint);
mPaint.setColor(Color.BLACK);
for (int i = 0; i < SEG_COUNT; i++) {
canvas.rotate(SEG_IN_GRAD, 0, mMainCircleCentr);
canvas.drawLine(0, mMainCircleCentr, mMainCirclRadius, mMainCircleCentr, mPaint);
canvas.drawText("my text" + String.valueOf(i), mMainCirclRadius * 2 / 3, mMainCircleCentr - 4, mPaint);
}
canvas.restore();
}
EDIT
To improve performance and remove drawing from UI thread I have Used Double Buffering With SurfaceView and implement #Morgans optimizations. That is how it realized.
DrawView.java
public class DrawView extends SurfaceView implements SurfaceHolder.Callback {
...............................................................
public DrawView(Context context, AttributeSet attrs) {
super(context, attrs);
getHolder().addCallback(this);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
float currentX = event.getX();
float currentY = event.getY();
float deltaX, deltaY;
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
// Modify rotational angles according to movement
deltaX = currentX - previousX;
deltaY = currentY - previousY;
mDrawThread.mRotation += deltaY * 180 / getHeight();
}
// Save current x, y
previousX = currentX;
previousY = currentY;
return true; // Event handled
}
#Override
public void surfaceChanged(SurfaceHolder surfaceHolder, int format, int width, int height) {
}
#Override
public void surfaceCreated(SurfaceHolder surfaceHolder) {
mDrawThread = new DrawThread(getHolder(), this);
mDrawThread.setRunning(true);
mDrawThread.start();
}
#Override
public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
boolean retry = true;
mDrawThread.setRunning(false);
while (retry) {
try {
mDrawThread.join();
retry = false;
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
And the main work is done in the DrawThread.java
public class DrawThread extends Thread {
private ArrayList<Path> mMainCirclePaths = new ArrayList<Path>(SEG_COUNT);
private ArrayList<Path> mUpperCirclePaths = new ArrayList<Path>(SEG_COUNT);
private ArrayList<Path> mCenterCirclePaths = new ArrayList<Path>(SEG_COUNT);
private ArrayList<Path> mBottomCirclePaths = new ArrayList<Path>(SEG_COUNT);
private boolean mRun = false;
private SurfaceHolder mSurfaceHolder;
private DrawView mDrawView;
private Paint mPaint;
private CirclesModel mCirclesModel;
public float mRotation = 0;
public DrawThread(SurfaceHolder surfaceHolder, DrawView drawView) {
mSurfaceHolder = surfaceHolder;
mDrawView = drawView;
mCirclesModel = new CirclesModel(mDrawView.getHeight());
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setTextSize(18f);
initPaths();
}
public void setRunning(boolean b) {
mRun = b;
}
#Override
public void run() {
while (mRun) {
Canvas canvas = null;
try {
canvas = mSurfaceHolder.lockCanvas(null);
synchronized (mSurfaceHolder) {
drawMainCircle(canvas);
mPaint.setColor(Color.WHITE);
canvas.drawCircle(mCirclesModel.mMainCircleCentr[CirclesModel.X], mCirclesModel.mMainCircleCentr[CirclesModel.Y],
mCirclesModel.mSmallCirclesRadius, mPaint);
drawCenterCircle(canvas);
drawUpperCircle(canvas);
drawBottomCircle(canvas);
//mRotation += 0.5f;
}
} finally {
if (canvas != null) {
mSurfaceHolder.unlockCanvasAndPost(canvas);
}
}
}
}
private void drawMainCircle(Canvas canvas) {
canvas.save();
canvas.rotate(mRotation, mCirclesModel.mMainCircleCentr[CirclesModel.X], mCirclesModel.mMainCircleCentr[CirclesModel.Y]);
float rot = mRotation;
mPaint.setColor(Color.LTGRAY/* argb(100, 255, 255, 255) */);
canvas.drawCircle(mCirclesModel.mMainCircleCentr[CirclesModel.X], mCirclesModel.mMainCircleCentr[CirclesModel.Y],
mCirclesModel.mBigCirclesRadius, mPaint);
mPaint.setColor(Color.BLACK);
for (int i = 0; i < SEG_COUNT; i++) {
canvas.rotate(SEG_IN_GRAD, mCirclesModel.mMainCircleCentr[CirclesModel.X], mCirclesModel.mMainCircleCentr[CirclesModel.Y]);
rot += SEG_IN_GRAD;
float absRot = Math.abs(rot % 360);
if (absRot > mCirclesModel.mMainCircleSegment[0] && absRot < mCirclesModel.mMainCircleSegment[1]) {
continue;
}
canvas.drawLine(mCirclesModel.mMainCircleCentr[CirclesModel.X], mCirclesModel.mMainCircleCentr[CirclesModel.Y],
mCirclesModel.mBigCirclesRadius, mCirclesModel.mMainCircleCentr[CirclesModel.Y], mPaint);
canvas.drawPath(mMainCirclePaths.get(i), mPaint);
// canvas.drawText("my text" + String.valueOf(i),
// mMainCirclRadius * 2 / 3, mMainCircleCentr - 4, mPaint);
}
canvas.restore();
}
.................................................................
}
Double Buffering is implemented in the two lines of code
canvas = mSurfaceHolder.lockCanvas(null); here I take from surface view canvas in which i will draw next frame.
mSurfaceHolder.unlockCanvasAndPost(canvas); here I am overlaping current image on SurfaceView with new canwas, this is the moment where image changes. Be aware if you have transparent elements then the previous image will be still visible, Image is not replaced, but overlaped.
Below is a version of your code that contains a few optimizations.
First, I try not to draw the lines and text that currently offscreen. I do this by tracking the rotation angle, and skipping the drawing for net rotations between 90 and 270 degrees. On my 2.3 simulator this improved performance overall by 25%.
Second, I "cache" the strings I am going to draw by initializing an array (ArrayList<Path>) with one Path for each string I need to draw. I do this in the same place you were one-time initializing the mPaint. Then I draw the strings using canvas.drawPath(...). On my 2.3 simulator this improved performance by another 33%. The net effect was to about double the rotation speed. Also, it stopped the text from "wiggling around".
A few other notes:
I removed the Thread.sleep(1,1). Not sure exactly what you were trying to accomplish with that.
I changed rotation delta to 1.0 from 0.9. Not sure why you were using 0.9. Note that if you change to back, my "log time it takes to rotate 10 degrees" will not quite work since mRotation % 10 may seldom be 0.
On a 4.1 simulator, the rotation was generally much faster (about 4x) than on my 2.3 simulator. And a 4.1 device was faster yet.
public class AnimView extends View {
Paint mPaint;
ArrayList<Path> mTextPaths;
float mRotation = 0f;
float mUpperCircleCentr = 150f;
float mUpperCirclRadius = 150f;
private static final int SEG_COUNT = 60;
private static final float SEG_IN_GRAD = 360.0f / SEG_COUNT;
float mBottomCircleCentr = 450f;
float mBottomCirclRadius = 150f;
float mMainCircleCentr = 300f;
float mMainCirclRadius = 300f;
long mLastMillis = 0L;
// ctors removed
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
if (mPaint == null) {
mPaint = new Paint();
mPaint.setTextSize(20f);
// init text paths
mTextPaths = new ArrayList<Path>(SEG_COUNT);
for (int i = 0; i < SEG_COUNT; i++) {
Path path = new Path();
String s = "my text" + String.valueOf(i);
mPaint.getTextPath(s, 0, s.length(), mMainCirclRadius * 2 / 3, mMainCircleCentr - 4, path);
path.close(); // not required on 2.2/2.3 devices
mTextPaths.add(path);
}
}
if (mLastMillis == 0L) {
mLastMillis = System.currentTimeMillis();
}
drawUpperCircle(canvas);
drawBottomCircle(canvas);
drawMainCircle(canvas);
invalidate();
if (((int) mRotation) % 10 == 0) {
long millis = System.currentTimeMillis();
Log.w("AnimateCanvas", "OnDraw called with mRotation == " + mRotation);
Log.w("AnimateCanvas", "Last 10 degrees took millis: " + (millis - mLastMillis));
mLastMillis = millis;
}
}
private void drawUpperCircle(Canvas canvas) {
canvas.save();
canvas.rotate(mRotation, 0, mUpperCircleCentr);
float rot = mRotation;
mPaint.setColor(Color.CYAN);
canvas.drawCircle(0, mUpperCircleCentr, mUpperCirclRadius, mPaint);
mPaint.setColor(Color.BLACK);
for (int i = 0; i < SEG_COUNT; i++) {
canvas.rotate(SEG_IN_GRAD, 0, mUpperCircleCentr);
rot += SEG_IN_GRAD;
if (rot % 360 > 90 && rot % 360 < 270)
continue;
canvas.drawLine(0, mUpperCircleCentr, mUpperCirclRadius, mUpperCircleCentr, mPaint);
}
canvas.restore();
}
private void drawBottomCircle(Canvas canvas) {
canvas.save();
canvas.rotate(mRotation, 0, mBottomCircleCentr);
float rot = mRotation;
mPaint.setColor(Color.RED);
canvas.drawCircle(0, mBottomCircleCentr, mBottomCirclRadius, mPaint);
mPaint.setColor(Color.BLACK);
for (int i = 0; i < SEG_COUNT; i++) {
canvas.rotate(SEG_IN_GRAD, 0, mBottomCircleCentr);
rot += SEG_IN_GRAD;
if (rot % 360 > 90 && rot % 360 < 270)
continue;
canvas.drawLine(0, mBottomCircleCentr, mBottomCirclRadius, mBottomCircleCentr, mPaint);
}
canvas.restore();
}
private void drawMainCircle(Canvas canvas) {
canvas.save();
canvas.rotate(mRotation, 0, mMainCircleCentr);
float rot = mRotation;
mPaint.setColor(Color.argb(100, 100, 100, 100));
canvas.drawCircle(0, mMainCircleCentr, mMainCirclRadius, mPaint);
mPaint.setColor(Color.BLACK);
for (int i = 0; i < SEG_COUNT; i++) {
canvas.rotate(SEG_IN_GRAD, 0, mMainCircleCentr);
rot += SEG_IN_GRAD;
if (rot % 360 > 90 && rot % 360 < 270)
continue;
canvas.drawLine(0, mMainCircleCentr, mMainCirclRadius, mMainCircleCentr, mPaint);
canvas.drawPath(mTextPaths.get(i), mPaint);
// canvas.drawText("my text" + String.valueOf(i), mMainCirclRadius * 2 / 3, mMainCircleCentr - 4, mPaint);
}
canvas.restore();
}
}
Your code is pretty nice and simple. You can optimize it by using less loops for instance, drawing things all together or combining variables, but this would quickly get messy.
I would recommend you to keep your drawing code more or less equal. You actually don't do the worst thing : instanciating objects, and it's clear and easy to maintain.
But you could maybe try to use a double buffer : drawing in a buffer in ram and flipping the buffer one shot on the screen. This generally performs quite well to get a constant animation pace. Use locking and unlocking of your canvas : Double buffering in Java on Android with canvas and surfaceview